前端之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>
注意：<label>标签应用于两个<td>标签时，无法达到扩大点击输入范围，可以使用<label for="id">中的for属性指定。
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> 11 <label for="user_name">用户名</label> 12 </td> 13 <td> 14 <input type="text", value="Bellamy", id="user_name" /> 15 </td> 16 </tr> 17 </table> 18 </body> 19 </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/
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
