1 需求
HTML基础知识
- 基础标签：DOCTYPE标签、html标签、title标签、body标签、h1-h6标签、hr标签、br标签
- 格式标签：
- 链接标签：a标签
- 图像标签：img标签
- 列表标签：ol标签、ul标签、li标签
- 表格标签：table标签、tr标签、th标签、td标签
- 表单标签：form标签、input标签、button标签、select标签、option标签
- form标签：action属性、method属性、enctype属性
- input标签/button标签：id属性、class属性、name属性、value属性
- 样式标签：style标签
- 程序标签：script标签
2 语法
3 示例
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style> h1, h2, h3, h4, h5, h6 { text-align: center; } form { border: 1px black solid; margin: 0 auto; width: 20%; text-align: center; } </style> </head> <body> <h1>标题（h1~h6标签）</h1> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <hr /> <h1>段落（p标签）</h1> <p>段落1</p> <p>段落2</p> <hr /> <h1>换行（br标签）</h1> 第一行<br /> 第二行 <hr /> <h1>格式（b标签、em标签、strong标签、i标签、del标签、u标签、small标签、sup标签、sub标签、pre标签）</h1> <b>b：粗体文本</b><br /> <i>i：斜体文本</i><br /> <em>em：强调文本</em><br /> <strong>stong：语气更为强调的文本</strong><br /> <del>del：删除线</del><br /> <u>u：下划线</u><br /> <small>small：小号文本</small><br /> x<sup>2</sup><br /> x<sub>2</sub><br /> <pre> 1 2 3 </pre> <hr /> <h1>图像（img标签、src属性、alt属性、title属性）</h1> <img src="https://www.baidu.com/img/flexible/logo/pc/peak-result.png" alt="替代文本" title="提示文本" style="background-color: black;" /> <hr /> <h1>链接（a标签、href属性、target属性）</h1> <a href="https://www.baidu.com" target="_blank">百度一下</a> <hr /> <h1>无序列表（ul标签、li标签）</h1> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <hr /> <h1>有序列表（ol标签、li标签）</h1> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <h1>普通表格（table标签、tr标签、th标签、td标签、caption标签、thead标签、tbody标签、tfoot标签）</h1> <table border="1"> <caption>表格标题</caption> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table> <hr /> <h1>跨行表格（rowspan属性）</h1> <table border="1"> <tr> <td rowspan="2">11</td> <td>12</td> <td>13</td> </tr> <tr> <!-- <td>21</td> --> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table> <hr /> <h1>跨列表格（colspan属性）</h1> <table border="1"> <tr> <td colspan="2">11</td> <!-- <td>12</td> --> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table> <hr /> <h1>表单-登录框</h1> <ul> <li>form标签：action属性、method属性、enctype属性</li> <li>input标签：type属性、id属性、class属性、name属性、value属性、placeholder属性</li> <li>button标签：type标签、name标签</li> </ul> <form action="" method="" enctype="" onsubmit=""> <h6>用户登录</h6> 账号：<input type="text" id="" class="" name="" value="" placeholder="请输入用户名" /><br /> 密码：<input type="" placeholder="请输入密码" /><br /> <button type="reset">重置</button> <button type="submit">登录</button><br /> <a href="" target="_blank">忘记密码</a> <a href="" target="_blank">立即注册</a> </form> <hr /> <h1>表单-文件上传</h1> <form action="" method="" enctype=""> <input type="file" name="" /> <button type="submit">上传</button> </form> <hr /> <h1>表单-单选按钮</h1> <form> <input type="radio" name="gender" value="male" checked />男 <input type="radio" name="gender" value="female" />女 <button type="submit">提交</button> </form> <hr /> <h1>表单-复选按钮</h1> <form> <input type="checkbox" name="hobby[]" value="basketball" />篮球 <input type="checkbox" name="hobby[]" value="football" />足球 <input type="checkbox" name="hobby[]" value="pingpang" />乒乓球 <button type="submit">提交</button> </form> <hr /> <h1>表单-下拉列表（单选）</h1> <form> <select name=""> <option>1</option> <option selected>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit">提交</button> </form> <hr /> <h1>表单-下拉列表（多选）</h1> <form> <select name="" multiple> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit">提交</button> </form> <hr /> <h1>表单-只读文本、禁用文本、必填文本</h1> <form> 只读文本：<input type="text" value="只读文本" readonly /><br /> 禁用文本：<input type="text" value="禁用文本" disabled /><br /> 必填文本：<input type="text" required /><br /> <button type="submit">提交</button> </form> <hr /> </body> </html>
4 参考资料
最后
以上就是高大薯片最近收集整理的关于Web开发技能树-HTML-标签列表（功能排序）的全部内容，更多相关Web开发技能树-HTML-标签列表（功能排序）内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复