13. 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--”开头，以“-->”结束。
<!-- 需要注释的内容 -->
快捷键：ctrl + /
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
14. 特殊字符
在HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
重点记住：空格、大于号、小于号这三个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> 空格：<br> <!-- 这样子只会显示一个空格 --> 空 格<br> <!-- 显示多个空格使用 --> 空 格<br> </div> <div> <!-- < > 为标签的包裹 --> 大于号：> 小于号：< </div> </body> </html>
15. 表格标签
15.1 表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面的,而是用来展示数据的.
15.2 表格的基本语法
<table> <tr> <td></td> <td></td> <td></td> ... </tr> <tr> <td></td> <td></td> <td></td> ... </tr> ... </table>
<table> </table>是用于定义表格的标签。<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。- 字母td 指表格数据（table data），即数据单元格的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tr> <td>姓名</td> <td>性别</td> </tr> <tr> <td>lili</td> <td>女</td> </tr> <tr> <td>kiki</td> <td>女</td> </tr> <tr> <td>tom</td> <td>男</td> </tr> </table> </body> </html>
15.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.<th> 标签表示HTML 表格的表头部分(table head 的缩写)
表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.
<body> <table> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>lili</td> <td>女</td> </tr> <tr> <td>kiki</td> <td>女</td> </tr> <tr> <td>tom</td> <td>男</td> </tr> </table> </body>
15.4 表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过CSS 来设置.
| 属性名 | 属性值 | 描述 |
| align | left , center、right | 规定表格相对周围元素的对齐方式。 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素。 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素。 |
| width | 像素值或百分比 | 规定表格的宽度。 |
这些属性要写到表格标签table 里面去
<body> <table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="200" > <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>lili</td> <td>女</td> </tr> <tr> <td>kiki</td> <td>女</td> </tr> <tr> <td>tom</td> <td>男</td> </tr> </table> </body>
15.5 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。
<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。- 以上标签都是放在
<table></table>标签中。
<body> <table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="200" > <thead> <tr> <th>姓名</th><th>性别</th> </tr> </thead> <tbody> <tr> <td>lili</td><td>女</td> </tr> <tr> <td>kiki</td><td>女</td> </tr> <tr> <td>tom</td><td>男</td> </tr> </tbody> </table> </body>
15.6 合并单元格
合并单元格方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
合并单元格三步曲：
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：
<td colspan=“2”></td>。 - 删除多余的单元格。
<body> <table border="3" width="400" height="200"> <thead> <tr> <th colspan="4">合并单元格</th> </tr> </thead> <tbody> <tr> <td></td> <td colspan="3">向右合并三个单元格</td> <!-- <td></td> --> <!-- <td></td> --> </tr> <tr> <td rowspan="3">向下合并三个单元格</td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body>
