HTML部分
一.HTML是什么
- HTML（超文本标记语言）是一种标记语言，不是编程语言。
- 是一种制作网页的语言，由一个个标签组成。
- 用文本文件保存，扩展名html或者htm.
- 如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页跳转到另一个网页。
二.HTML基本结构
- HTML由标签和内容组成。
- 标签语法是由<和>括起来。
- 双标签：<标签名>...</标签名> 单标签：<标签名/>
- HTML标签中可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2”...>...</标签名>
- 标签规范：标签名小写，属性使用双引号，标签要闭合。
- 注释：<!-- 这就是唯一的一种注释了 -->
格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我的第一个网页</h1>
</body>
</html>三.HTML常用标签
1.文本标签：
A.标题标签（加粗，独立行）：<hn>...</hn> n为1到6.
B.<i>...</i>:斜体
C.<em>...</em>:强调斜体
D.<b>...</b>:加粗
E.<strong>...</strong>:强调加粗
F.<cite>...</cute>：作品的标题（引用）
G.<sub>...</sub>:下标
H.<sup>...</sup>:上标
I.<del>...</del>:删除线
2.格式化标签
<br/>:换行
<p>...</p>:换段
<hr/>:水平分割线
<div>...</div>:用于组合块状元素，默认换行（不允许同一行有其他元素）
<span>...</span>:没有意义的标签（可忽略）
列表：
<ui>...</ui>:无序列表
<ol>...</ol>:有序列表，其中type类型值表示起始值（eg：1,A）
<li>...</li>:列表项
3.图片标签
<img/>:在网页中插入一张图片
属性：
- src:图片名及url地址
- alt:图片加载失败时的提示信息
- title:文字提示属性
- width:图片宽度
- height：图片高度
- border:边框线粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<!--摔啊-->
<i>感觉还不错</i><br/>
<img src="D:/pic/plane.jpg" alt="飞机图片" width="200" title="战斗机" border="1"/>
<img src="./pic2/plane.jfif" alt="飞机图片" width="200" title="战斗机"/>
<img src="https://www.baidu.com/img/bd_logo1.png" alt="图片" width="200"/>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片" width="200"/>
<!--第一个路径是相对路径，./代表该文件所在的路径-->
<!--第二,三,四是绝对路径，即完整路径-->
<!--第三四，百度图片地址是打开百度网页，右键百度logo复制图片地址即可-->
</body>
</html> 
4.超链接标签
A.<a href=””>...</a> （vscode直接输入a,然后按enter键即可）
target：表示链接打开方式
a._blank:新窗口
b._parent:父窗口
c._self:本窗口（默认）
d._top:顶级窗口
e.framename:窗口名
f.title：文字提示属性
B.锚点链接：
定义一个锚点：<a id=”a1”></a>
使用锚点：<a href=”#a1”>跳到a1处</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<!--摔啊-->
<i>感觉还不错</i><br/>
<a href="#test1">跳转到test1位置</a><br><br>
<a href="http://www.jd.com" target="_blank" title="京东链接">京东</a><br><br>
<img src="D:/pic/apple.jpg" alt="苹果图片" title="苹果"/><br>
<img src="D:/pic/apple.jpg" alt="苹果图片" title="苹果"/>
<a id="test1"></a>
<h2>飞机图片</h2>
<img src="D:/pic/plane.jpg" alt="飞机图片" width="200" title="战斗机" border="1"/>
</body>
</html>
5.表单标签（常用） 可以在一些网站上看完整的
<form>...</form>:表单标签
<input/>:表单项标签input定义输入字段，用户可以在其中输入数据
<select>...</select>:标签创建下拉列表
<textarea>...</textarea>:多行的文本输入区域
<button>...</button>:标签定义按钮
6.多媒体标签
<audio>...</audio>:音频标签
eg: <audio src="D:/pycharm-project/air-project/test2.wav" controls="controls">
不能播放
</audio><br><viedo>...</viedo>:视频标签
eg:<video src="D:/HTML/video/v1.mp4" controls="controls" width="400" height="400">
该video不能播放
</video><br>
CSS部分
一.CSS是什么
- CSS：层叠样式表，样式定义如何显示控制HTML元素，从而实现美化页面
- 多个样式定义可层叠为一，后者可覆盖前者样式
- 语法：选择器{属性:值；属性:值；...}
eg:h1{font-size: 40px;color: aqua;}属性：font-size:尺寸大小
color:颜色
background-color:背景色
line-height:行高
后面还会说
4.如何使用CSS样式
5.外部样式：新建一个CSS文件，写好如选择器{属性:值；属性:值；...}代码，然后在HTML文件head部分导入link标签，指定CSS路径
A.外部样式
CSS文件：li{font-size: 40px;color:black;background-color: brown;}
HTML文件（head）：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./c1.css">
<!-- <style>
h1{font-size: 40px;color: aqua;}
li{font-size: 30px;color:green;}
</style> -->
</head>B.内部样式：在head部分，加入style标签
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./c1.css"> -->
<style>
h1{font-size: 40px;color: aqua;}
li{font-size: 30px;color:green;}
</style>
</head>C.内联样式:作用于指定的标签，标签后加style属性
<u1>
<li>ptyhon</li>
<li>java</li>
<li>c++</li>
<li style="color: blue;">html</li>
</u1>优先级：当样式冲突时，采用就近原则（内联优先级最高）
若没有冲突则叠加
二.CSS常用选择器
- HTML选择器：以HTML标签作为的选择器
- 类选择器：HTML标签加入class属性，值即类名
<h1 class="xw">CSS学习第一天·</h1>
<style>
.xw{color: hotpink;} //代表对所有类名为xw的标签操作
h1.xw{color:lawngreen;} //代表对h1且类名是xw操作
</style>.xw中“.”代表类；
3.id选择器：HTML标签加入id属性，值即id名
<li id="www">c++</li> id值不要数字开头，不然出错，无法关联
#www{color:maroon;}#代表id;
三种选择器优先级：id>类>html
4.关联选择器
u1 li{background-color: mediumslateblue;}指定li为u1下的
5.组合选择器
h1,h2,h3{
color: midnightblue;
}h1,h2,h3共同操作
6.伪类选择器
三.CSS属性
1.font-family:字体类型
2.font-weight:字体粗细（400：正常；700：粗；200：细）
eg:<h1 class="xw" style="font-weight: 100;">CSS学习第一天·</h1>
3.文本属性:
A.text-indent:文本开头缩进，值为2em表示开头缩进2格
<style>
div.xww{text-indent: 2em;}
</style> <div class="xww">
智能家居又称"智能住宅”，是利用计算机、网络通讯、自动控制、
物联网等先进技术，通过网络化综合智能控制和管理，构建高效的
住宅设施与家庭日程事务的管理系统，实现家居安全性、便利性、
舒适性、艺术性，并实现环保节能的居住环境。为满足市场需求，
我们公司推出了基于SCADA系统的智能家居APP项目，该项目由客户端、
智能网关、SCADA云平台、服务器组成。智能网关在Linux系统中运行，
通过TCP/IP协议与客户端进行数据交互。客户端采用手机APP通过远程
服务器对家居设备进行控制和信息交互。用户可以通过我们的APP产
品智能控制和管理家居，并提供了语音控制系统。
</div>结果：
B.text-align：文本位置，值有left，center，right
C.text-shadow:文本文字是否有阴影或模糊效果
格式如下：
text-shadow:0px 0px 6px blue;D.letter-spacing:字间距
E.line-height:行高
4.背景属性
A.background-color:背景颜色
B.background-image:背景图片，用url（）导入
C.background-repeat:是否平铺,如何重复？值为no-repeat:不平铺；repeat-x:水平平铺；repeat-y:垂直平铺
D.background-position:定位,left,center,right,bottom
E.background-size:背景大小
eg:<style>
div.xww{text-indent: 2em;text-align: left;
text-shadow:0px 0px 6px blue;
background-image: url("D:/pic/apple.jpg");
background-repeat:repeat-x;
background-position: center;
letter-spacing: 1.5px;line-height: 40px;}
</style>结果：
扫一扫
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
