前端之HTML，CSS（二）
HTML标签
列表标签
无序列表：闭标签，由<ul><li></li>...</ul>组合而成，效果成纵向列表。格式：<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签，<li>标签作为容器，包含内容，内容可以是文本或者其他元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>无序列表标签-测试</title> 6 </head> 7 <body> 8 ????<ul> 9 ????????<li>Python</li>10 ????????<li>Java</li>11 ????????<li>C</li>12 ????????<li>C++</li>13 ????????<li>Ruby</li>14 ????????<li>PHP</li>15 ????????<li>16 ????????????<ul>17 ????????????????<li>HTML</li>18 ????????????????<li>CSS</li>19 ????????????????<li>JavaScript</li>20 ????????????</ul>21 ????????</li>22 ????</ul>23 </body>24 </html>
有序列表：闭标签，由<ul><li></li>...</ul>组合而成，效果成纵向列表。格式：<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签，<li>标签作为容器，包含内容，内容可以是文本或者其他元素。与无序列表之间只是<ul>换成了<ol>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>无序列表标签-测试</title> 6 </head> 7 <body> 8 ????<ol> 9 ????????<li>Python</li>10 ????????<li>Java</li>11 ????????<li>C</li>12 ????????<li>C++</li>13 ????????<li>Ruby</li>14 ????????<li>PHP</li>15 ????????<li>16 ????????????<ol>17 ????????????????<li>HTML</li>18 ????????????????<li>CSS</li>19 ????????????????<li>JavaScript</li>20 ????????????</ol>21 ????????</li>22 ????</ol>23 </body>24 </html>
自定义列表：闭标签，由<dl><dt></dt><dd></dd><dd></dd>...</dl>组合而成，效果成纵向无标记符号列表。格式：<dl><dt>content</dt><dd>content</dd>...</dl>,<dl>标签中嵌套一组<dt>标签，<dd>标签作为容器，包含内容，内容可以是文本或者其他元素，<dd>标签内容是对<dt>标签内容的扩展和说明。
1 !DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>无序列表标签-测试</title> 6 </head> 7 <body> 8 ????<dl> 9 ????????<dt>中国</dt>10 ????????<dd>北京</dd>11 ????????<dd>上海</dd>12 ????????<dd>广州</dd>13 ????????<dd>深圳</dd>14 ????</dl>15 </body>16 </html>
上述列表的效果展示建议保存至list.html文件，使用浏览器打开查看一下。
表格标签
表格标签由<table></table>表示整体外框（不显示，只是界定范围），<tr></tr>表示表格的行标签，<td>content</td>表示单元格标签，表格中的内容嵌入<td></td>单元格标签中。所以，表定义为一个表格范围，划分为多个行，行又划分为多个单元格，每个单元记录内容。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表格标签-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<tr>10 ????????????<td>Python</td>11 ????????????<td>PHP</td>12 ????????????<td>Perl</td>13 ????????</tr>14 ????????<tr>15 ????????????<td>C</td>16 ????????????<td>C++</td>17 ????????????<td>C#</td>18 ????????</tr>19 ????</table>20 </body>21 </html>
| 属性名 | 属性值 | 描述 |
| border | 数字 | 设置表格边框，默认为0，无边框 |
| width | 像素 | 设置表的宽度，注意是表整体 |
| height | 像素 | 设置表的高度，注意是表整体 |
| align | left,center,right | 设置表的位置，注意是表整体，默认为左对齐 |
| cellspacing | 像素 | 设置单元格与单元格之间的距离，注意表整体的外部边框是一个大单元格。默认为2px |
| cellspadding | 像素 | 设置单元格与单元格中内容的距离，默认为1px |
表格属性效果（一般推荐设置border,cellspacing,cellspadding属性值设置为0.）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表格标签-测试</title> 6 </head> 7 <body> 8 ????<table border="1", width="100", height="100", align="center", cellspacing="3", cellpadding="3"> 9 <!--尝试去改动上述属性值验证效果 -->10 ????????<tr>11 ????????????<td>Python</td>12 ????????????<td>PHP</td>13 ????????????<td>Perl</td>14 ????????</tr>15 ????????<tr>16 ????????????<td>C</td>17 ????????????<td>C++</td>18 ????????????<td>C#</td>19 ????????</tr>20 ????</table>21 </body>22 </html>
注意：对单元格内容居中对齐可以使用<tr align="center">或者<td align="center">，推荐是用CSS调整。
表头标签：一种对单元格内容加粗和居中的表示，一般去取表格的首行或者首列作为表头。闭标签，使用<th></th>标签，格式：<th>content</th>，取代<td></td>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表格标签-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<tr>10 ????????????<th>Python</th>11 ????????????<th>PHP</th>12 ????????????<th>Perl</th>13 ????????</tr>14 ????????<tr>15 ????????????<td>C</td>16 ????????????<td>C++</td>17 ????????????<td>C#</td>18 ????????</tr>19 ????</table>20 </body>21 </html>
标题标签：作为表格的标题，像<tr><td><th>一般嵌入<table>标签中。闭标签，效果居中显示，格式：<caption>title</caption>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表格标签-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<caption>编程语言</caption>10 ????????<tr>11 ????????????<th>Python</th>12 ????????????<th>PHP</th>13 ????????????<th>Perl</th>14 ????????</tr>15 ????????<tr>16 ????????????<td>C</td>17 ????????????<td>C++</td>18 ????????????<td>C#</td>19 ????????</tr>20 ????</table>21 </body>22 </html>
合并单元格：表格中会常出现单元格合并，可以单元多行合并，也可以多列合并。单元格属性：rowspan，行合并；colspan，列合并。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表格标签-测试</title> 6 </head> 7 <body> 8 ????<table border="1"> 9 ????????<tr>10 ????????????<th>X</th>11 ????????????<th>X</th>12 ????????????<th>X</th>13 ????????</tr>14 ????????<tr>15 ????????????<td rowspan="2">X</td>16 ????????????<td>X</td>17 ????????????<td>X</td>18 ????????</tr>19 ????????<tr>20 ????????????<td colspan="2">X</td>21 ????????</tr>22 ????</table>23 </body>24 </html>
表单标签
表单的组成：表单控件、提示信息、表单域。
input控件：开标签，<input type="" />
| 属性 | 属性值 | 描述 |
| type | text | 单行文本框 |
| password | 密码输入框 | |
| radio | 单选按钮框 | |
| checkbox | 多选按钮框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像提交按钮 | |
| file | 文件域 | |
| name | 用户自定义文本 | 控件名称 |
| value | 用户自定义文本 | 控件默认值 |
| checked | checked | 控件默认选项 |
input控件效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表单标签-测试</title> 6 </head> 7 <body> 8 ????<table border="0", cellpadding="0", cellspacing="0", align="center"> 9 ????????<caption>个人信息表</caption>10 ????????<tr>11 ????????????<td>用户名</td>12 ????????????<td><input type="text", value="Bellamy" /></td>13 ????????</tr>14 ????????<tr>15 ????????????<td>密码</td>16 ????????????<td><input type="password" /></td>17 ????????</tr>18 ????????<tr>19 ????????????<td>性别</td>20 ????????????<td>21 ????????????????男<input type="radio" name="sex"， checked="checked" />22 ????????????????女<input type="radio" name="sex" />23 ????????????</td>24 ????????</tr>25 ????????<tr>26 ????????????<td>爱好</td>27 ????????????<td>28 ????????????????运动<input type="checkbox", checked="checked" />29 ????????????????游戏<input type="checkbox" />30 ????????????????阅读<input type="checkbox" />31 ????????????????音乐<input type="checkbox" />32 ????????????</td>33 ????????</tr>34 ????????<tr>35 ????????????<td></td>36 ????????????<td>37 ????????????????<input type="button" value="注册" />38 ????????????????<input type="submit" value="提交" />39 ????????????????<input type="reset" value="重置" />40 ????????????</td>41 ????????</tr>42 ????????<tr>43 ????????????<td></td>44 ????????????<td>45 ????????????????<input type="image" src="images/submit.jpg">46 ????????????</td>47 ????????</tr>48 ????????<tr>49 ????????????<td>上传头像</td>50 ????????????<td><input type="file" /></td>51 ????????</tr>52 ????</table>53 </body>54 </html>
注意：<input type="radio", name="xx">单选框按钮，必须在多个选项中添加相同的name属性值，将其归类为一组选择项，从中选择一项。
label标签：闭标签，效果扩大点击输入范围，格式：<label>用户名：<input type="text" /></label>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>label标签-测试</title> 6 </head> 7 <body> 8 ????<!-- 点击用户名，文本框无光标输入提示 --> 9 ????用户名：<input type="text" />10 ????<br />11 ????<!-- 点击用户名，文本框有光标输入提示 ?-->12 ????<label>用户名：<input type="text" /></label>13 </body>14 </html>
文本域标签：闭标签，<textarea></textarea>,效果可以输入多行文本，即文本可以换行输入，格式：<textarea>content</textarea>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>textarea标签-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<tr>10 ????????????<td>留言</td>11 ????????????<td>12 ????????????????<textarea>此处显示默认文本</textarea>13 ????????????</td>14 ????????</tr>15 ????</table>16 </body>17 </html>
下拉菜单：闭标签，<select><option></option>...</select>，效果点击出现下来选项，格式：<select><option>选项</option><option>选项</option>...</select>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>下拉菜单-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<tr>10 ????????????<td>出生年月</td>11 ????????????<td>12 ????????????????<select>13 ????????????????????<option>请选择年</option>14 ????????????????????<option>1990</option>15 ????????????????????<option>1991</option>16 ????????????????????<option>1992</option>17 ????????????????????<option>1993</option>18 ????????????????????<option>...</option>19 ????????????????</select>20 ????????????????<select>21 ????????????????????<option>请选择月</option>22 ????????????????????<option>1月</option>23 ????????????????????<option>2月</option>24 ????????????????????<option>3月</option>25 ????????????????????<option>4月</option>26 ????????????????????<option>5月</option>27 ????????????????????<option>...</option>28 ????????????????</select>29 ????????????</td>30 ????????</tr>31 ????</table>32 </body>33 </html>
在<option>设置selected="selected"属性可以设置默认显示选项。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>下拉菜单-测试</title> 6 </head> 7 <body> 8 ????<table> 9 ????????<tr>10 ????????????<td>出生年月</td>11 ????????????<td>12 ????????????????<select>13 ????????????????????<option>请选择年</option>14 ????????????????????<option>1990</option>15 ????????????????????<option>1991</option>16 ????????????????????<option>1992</option>17 ????????????????????<option selected="selected">1993</option>18 ????????????????????<option>...</option>19 ????????????????</select>20 ????????????????<select>21 ????????????????????<option>请选择月</option>22 ????????????????????<option>1月</option>23 ????????????????????<option>2月</option>24 ????????????????????<option selected="selected">3月</option>25 ????????????????????<option>4月</option>26 ????????????????????<option>5月</option>27 ????????????????????<option>...</option>28 ????????????????</select>29 ????????????</td>30 ????????</tr>31 ????</table>32 </body>33 </html>
表单域：闭标签，用于包裹多个表单控件，格式：<form action="URL", method="提交方式" />，其中action属性指定接受处理表单的服务器URL地址，method指提交表单的方式，一般取HTTP方法的get或者post方法。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>表单标签-测试</title> 6 </head> 7 <body> 8 ????<form action="demo.php", method="post"> 9 ????????<table border="0", cellpadding="0", cellspacing="0", align="center">10 ????????????<caption>个人信息表</caption>11 ????????????<tr>12 ????????????????<td>用户名</td>13 ????????????????<td><input type="text", value="Bellamy" /></td>14 ????????????</tr>15 ????????????<tr>16 ????????????????<td>密码</td>17 ????????????????<td><input type="password" /></td>18 ????????????</tr>19 ????????????<tr>20 ????????????????<td>性别</td>21 ????????????????<td>22 ????????????????????男<input type="radio" name="sex"， checked="checked" />23 ????????????????????女<input type="radio" name="sex" />24 ????????????????</td>25 ????????????</tr>26 ????????????<tr>27 ????????????????<td>爱好</td>28 ????????????????<td>29 ????????????????????运动<input type="checkbox", checked="checked" />30 ????????????????????游戏<input type="checkbox" />31 ????????????????????阅读<input type="checkbox" />32 ????????????????????音乐<input type="checkbox" />33 ????????????????</td>34 ????????????</tr>35 ?????????????<tr>36 ????????????????<td></td>37 ????????????????<td>38 ????????????????????<input type="image" src="images/submit.jpg">39 ????????????????</td>40 ????????????</tr>41 ????????????<tr>42 ????????????????<td>上传头像</td>43 ????????????????<td><input type="file" /></td>44 ????????????</tr>45 ????????????<tr>46 ????????????????<td></td>47 ????????????????<td>48 ????????????????????<input type="button" value="注册" />49 ????????????????????<input type="submit" value="提交" />50 ????????????????????<input type="reset" value="重置" />51 ????????????????</td>52 ????????????</tr>53 ????????</table>54 ????</form>55 </body>56 </html>
文档查阅
HTML标签还有很多，博客中提到的是我们常用标签，其他标签的使用和学习可以查阅W3C和MDN。
W3C：https://www.w3cschool.cn/
MDN：https://www.w3cschool.cn/
前端之HTML，CSS（二）
原文地址：https://www.cnblogs.com/snow-lanuage/p/10389744.html