前端的三把利器
HTML：赤裸的一个人
CSS：华丽的衣服
JS/JavaScript：赋予这个人的行为，也就是动起来
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
HTML标签
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
<html lang="en"> <!--html标签(只能一个)，指定语言en-->
<head> <!-- html head标签的开始 -->
</head> <!-- html head标签的结束 -->
<body> <!-- html body标签的开始 -->
<a href="http://www.imdsx.cn">跳转大师兄</a> <!--类似有很多href这种的叫做标签内部属性-->
</body> <!-- html body标签的结束 -->
</html>
注释的写法 <!-- -->
|
html head
1、自闭和标签
<meta charset="UTF-8">
只有开头标签，没有结尾标签
2、主动闭合标签
<a></a>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定编码 -->
<meta charset="UTF-8">
<!-- 每3秒中刷新一次 -->
<meta http-equiv="refresh" content="1">
<!-- 3秒后跳转页面 -->
<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">
<!-- 关键字检索 -->
<meta name="keywords" content="大师兄">
<!-- 网站描述-->
<meta name="description" content="大师兄是名低调的测试工程师">
<!-- ie打开时以最高的兼容模式打开 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
<title>白羊座</title>
<!-- 前方高能预警，***重要*** -->
<!-- title的图标 -->
<link rel="shortcut icon" href="tubiao.ico">
<!-- 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- css样式-->
<style></style>
<!-- 引入js和编写js -->
<script src="tmp.js"></script>
</head>
<body>
</body>
</html>
|
html body
符号
<a href="http://www.imdsx.cn">大 师 兄</a>
<a href="http://www.imdsx.cn"><a></a>
空格：  大于号：> 小于号 < 记住常用的这三个，其他的用时百度
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)
行内标签：SPAN标签(白板)
p、br
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- p标签称之为段落标签，占满一整行，段落之间有空行 想换行需要通过<br />标签 自闭合标签建议自己写上/作为区分-->
<p>年轻,就是拿来折腾的。<br />让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
<p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>
<p>你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。</p>
<p>不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。</p>
<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>
<p>只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。</p>
<p>生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
</body>
</html>
|
h、form、div、span、input、label
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->
<h1>大师兄</h1>
<h2>大师兄</h2>
<h3>大师兄</h3>
<h4>大师兄</h4>
<h5>大师兄</h5>
<h6>大师兄</h6>
<!-- 行内标签的代表 什么属性都不带-->
<span>大师兄</span>
<!-- 块级标签的代表 什么属性都不带，html代码中出场率最高-->
<div>大师兄</div>
<!-- 登录页面 -->
<!-- 表单标签 可以理解为载体 纸 input 就是写在纸上的文字-->
<form action="/login" method="post">
<!-- 文本输入框 -->
<input type="text" name="username"/>
<!-- 密码输入框 -->
<input type="password" name="passwd"/>
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
<input type="button" value="登录"/>
<!-- 提交 提交表单需要用submit -->
<input type="submit" value="提交"/>
</form>
<!-- get与post区别提交 -->
<form action="/login" method="get" enctype="multipart/form-data">
<!-- 文本输入框 text-->
<input type="text" name="username" value="默认值"/>
<!-- 密码输入框 password-->
<input type="password" name="passwd"/>
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
<input type="button" value="登录"/>
<!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked-->
<p>女朋友的选择标准</p>
<input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span>
<input type="checkbox" name="check" value="2"><span>长头发</span>
<input type="checkbox" name="check" value="3"><span>36C</span>
<!-- 单选框 radio name相同 勾选是互斥-->
<input type="radio" name="sax" value="1" checked="checked"><span>男</span>
<input type="radio" name="sax" value="2"><span>女</span>
<!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
<p>上传文件</p>
<input type="file" name="file"/>
<!-- 提交 提交表单需要用submit -->
<input type="submit" value="提交"/>
<!-- reset 还原表单中填写的数据到默认 -->
<input type="reset" value="重置">
</form>
<!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id-->
<label for="username">用户名</label>
<input id="username" type="text"/>
</body>
</html>
|
textarea、select、option、optgroup、a、img、ul、li、ol、dl、dt、dd
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="t1">描述</p>
<!-- 多行文本 textarea 默认值在标签之间-->
<textarea name="meno">默认值</textarea>
<p>省市</p>
<!-- select option 默认选择在option上增加selected size属性显示多少个 多选属性：multiple-->
<select name="city" size="3" multiple="multiple">
<option value="1">黑龙江</option>
<option value="2" selected="selected">辽宁</option>
<option value="3">北京</option>
<option value="4">四川</option>
</select>
<!-- optgroup 分组 label 组的名字 -->
<select name="city" size="3" multiple="multiple">
<optgroup label="黑龙江省">
<option value="1">哈尔滨</option>
<option value="2">牡丹江</option>
</optgroup>
<optgroup label="北京省">
<option value="3">北京</option>
</optgroup>
</select>
<!-- 超链接标签 a href：跳转的链接 target="_blank" 新tab打开页面 -->
<p>超链接</p>
<a href="http://www.baidu.com" target="_blank">大师兄</a>
<!-- a标签 锚的链接 通过id进行对应关系的映射 例子回到顶部-->
<div style="height: 500px;">文章</div>
<a style="position: fixed;right: 0;bottom: 0" href="#t1">回到顶部</a>
<!-- img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字-->
<a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px; 200px;" alt="html" title="大师兄html"></a>
<!-- 列表 ul li 点-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!-- 列表 ol li 数字 -->
<ol>
<li>第一列</li>
<li>第二列</li>
</ol>
<!-- 分层列表 dl dd内层 dt外层 -->
<dl>
<dt>黑龙江</dt>
<dd>哈尔滨</dd>
<dd>牡丹江</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>北京</dd>
</dl>
</body>
</html>
|
table、thead、tr、th、tbody、tr、td
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列-->
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>用例名称</th>
<th>执行人</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>table表格测试</td>
<td>大师兄</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
<tr>
<td>1</td>
<!-- colspan等于几就占几列-->
<td colspan="2">table表格测试</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
<tr >
<td>1</td>
<!-- rowspan等于几就占几行-->
<td rowspan="2">table表格测试</td>
<td>大师兄</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
<tr>
<td>1</td>
<td>大师兄</td>
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
</tr>
</tbody>
</table>
</body>
</html>
|
CSS选择器
|
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 --> */
#i1{
height: 48px;
background-color: red;
}
/* class选择器 最常用 */
.div{
height: 48px;
background-color: aqua;
}
/* 标签选择器 */
span{
color: red;
background-color: blue;
}
/* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格*/
span div{
color: aqua;
background-color: red;
}
/* class 层级选择器 层级通过空格*/
.c1 div{
background-color: #336699;
height: 48px;
}
/* id 层级选择器 层级通过空格*/
#i2 div{
background-color: black;
height: 48px;
}
/* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/
#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
}
/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}
/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[s='dsx']{
background-color: darkred;
height: 48px;
}
</style>
</head>
<body>
<!-- css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class-->
<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
<!-- css class引用-->
<div id="i1"></div>
<div class="div"></div>
<div class="div"></div>
<!-- 全局标签选择器 -->
<span>标签选择器</span>
<!-- 层级选择器 组合标签选择器 -->
<span>
<div>组合标签选择器</div>
</span>
<!--层级选择器 class选择器下的div标签 -->
<div class="c1">
<div></div>
</div>
<!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div>
<!-- id组合选择器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 属性选择器 -->
<div s="dsx"></div>
<div name="nn"></div>
</body>
</html>
|
CSS优先级
标签中style优先级最高，其次在代码中就近找，也就是重下往上找
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* css 优先级 */
.c1{
background-color: darkred;
height: 48px;
}
.c2{
background-color: black;
height: 48px;
}
</style>
</head>
<body>
<div class="c1 c2" style=" font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
</body>
</html>
引入CSS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="tmp.css">
</head>
<body>
<div class="c1 c2" style=" font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
</body>
</html>
|
CSS属性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<!-- 边框 border：宽度 实线还是虚线 颜色-->
<div style="height: 48px;border: 1px solid red"></div>
<!-- 边框 border 上下左右边框 都可单独配置 -->
<div style="height: 48px;border-left: 1px dotted red"></div>
<!-- height：高 width：宽 -->
<div style="height: 48px; 48px;border: 1px solid red"></div>
<!-- 宽高的设定可以是指定的像素 也可以百分比 -->
<div style="height: 48px; 80%;border: 1px solid red"></div>
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>
<!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>
<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style=" 20%;float: left">1</div>
<div style=" 20%;float:left;">2</div>
<div style=" 20%;float:right;">3</div>
<!-- 块及标签的占满100%是相对来说，相对与他外层的div -->
<div style=" 400px;height: 400px;border: 1px solid black;">
<div style=" 100px;height: 40px;float:left;"></div>
<div style=" 100px;height: 40px;float:left;"></div>
<div style=" 100px;height: 40px;float:left;"></div>
<div style=" 100px;height: 40px;float:left;"></div>
<div style=" 100px;height: 40px;float:left;"></div>
</div>
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<div style="height: 100px;display: inline">外联标签</div>
<!-- display：block 内联标签转换为块及标签-->
<span style="height: 100px;display: block;">内联标签</span>
<!-- 行内标签：无法设置高度、宽度、padding、margin-->
<!-- 块级标签：无法设置高度、宽度、padding、margin-->
<span style=" 100px;height: 100px;">大师兄</span>
<!-- 通过display:inline-block 可以完美的解决这个问题 他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<span style=" 100px;height: 100px;display: inline-block;">大师兄</span>
<!-- 让标签消失 display：none-->
<span style="display: none">我不显示的</span>
<!-- 外边距 margin 内边距 padding-->
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;margin-top: 30px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;padding: 10px">内边距增加</div>
</div>
</body>
</html>
|
例子
各个网站的header
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<div class="p-header" style=" 100%;">
<div style=" 980px;margin: 0 auto">
<div style="height: 48px;line-height: 48px;float: left">收藏本站</div>
<div style="height: 48px;line-height: 48px;float: right">登录</div>
<div style="height: 48px;line-height: 48px;float: right">注册</div>
<!-- clear:both 清除浮动，将内层div拉下来从而撑开外层div-->
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
|