1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
| 一：HTML5基础
1.图像标签：插入图像时使用标签<img/>，要求src和alt属性必选
<img src="path" alt="text" title="text" width="x" height="y" />
2.链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
跳转标记
<a id="marker">乙位置</a>
跳转链接
<a href="#marker">甲位置</a>
功能性链接
<a href="http://www.blog.fadeaway.online/">联系我们</a>
二：列表、表格与媒体元素
1.列表
（1）无序列表ul
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻
（2）有序列表li
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
（3）定义列表dl
没有顺序，每个<dt>(声明列表项)标签、<dd>(定义列表项内容)标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
2.表格
为什么使用表格？（简单通用，结构稳定）
table 整个表格
caption 表格标题
thead 表头
tbody 表格主体
tfoot 表尾
tr 表格行
th 表头单元格（或称标题单元格）
td 普通单元格
<table >
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
<td colspan="n">单元格内容</td>// 所跨的列数
<td rowspan="n"> </td> // 所跨的行数
</tr>
</table >
3.媒体元素
音频元素 <video src="音频路径" controls></video>
视频元素 <video src="视频路径" controls></video>
4.结构元素header footer section article aside nav
5.框架语言 <iframe src="path" name="mainFrame" ></iframe>
三：表单
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
<input type="hidden" value="666" name="userid">
<input name="name" type="text" value="张三" readonly>
<input type="submit " disabled value="保存" >
表单验证的好处
减轻服务器的压力
保证数据的可行性和安全性
placeholder
required
pattern
四：
css:
Cascading Style Sheet 级联样式表
行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式
<style>
h1{color: green; }
</style>
外部样式
链接外部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
导入外部样式表
<head>
……
<style type="text/css">
</style>
</head>
css:样式优先级 行内样式>内部样式表>外部样式表
就近原则
属性选择器
[属性名字] {} 匹配的是拥有这个属性的元素
[class] { }
[id] { }
[a] { } a自定义属性
五：
伪类样式
鼠标悬浮其上的超链接样式
a:hover {
color:#B46210;
text-decoration:underline;
}
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
CSS3渐变 linear-gradient ( position, color1, color2,…)
六。
盒子模型总尺寸=border+padding+margin+内容宽度
边框border
内边距padding
内容content
七：
清除浮动，防止父级边框塌陷的四种方法
浮动元素后面加空div
简单，空div会造成HTML代码冗余
设置父元素的高度
简单，元素固定高会降低扩展性
父级添加overflow属性
简单，下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
八：
position属性：
1.static：默认值，网页没有定位
2.relative:相对定位
（1）设置相对定位的元素，盒子会相对于他原来的位置进行偏移，达到新位置。
（2）设置相对定位的元素，盒子仍然在原来的文本流中，对父级元素和相邻的元素不受影响。，。
（3）设置相对定位的元素，盒子原来的位置会被保留下来。
（4）对于浮动的元素，相对定位也管用
3.absolute:绝对定位
（1）使用了绝对定位的元素以它最近的一个“已经定位”的“祖先”元素为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准来进行定位。
（2）绝对定位的元素，从文档流中脱离，这意味着他们对其他元素的定位不会造成影响。
4.fixed:固定定位
（1）相对于浏览器窗口来定位。
（2）偏移量不会随着滚动条的移动而移动。
5.固定定位的使用场景：
（1）一般在网页的左右两边固定广告，返回顶部图标、吸顶导航栏中使用。
6.z-index: 用于调整元素定位时重叠层的上下位置，其语法为：
z-index:9999;
需要注意的是，使用z-index的前提必须该元素已经定位了（relative,absolute,fixed）
7.透明度：opacity:设置值，值为0-1，值越小越透明。eg:0.4
|
wechat