转： http://www.imdsx.cn/index.php/2017/07/27/html0/
前端的三把利器
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>
|