前端-暑假知识点总结（二）

前端-暑假知识点总结（二）

目录：
4. HTML 中的注释和特殊字符
4.1 注释
4.2 特殊字符
5. 表格标签

5.1 表格的主要作用
5.2 表格的基本语法
5.3 表头单元格标签
5.4 表格属性
5.5 表格结构标签
5.6 合并单元格

4. HTML 中的注释和特殊字符

4.1 注释
<!-- 注释语句 --> 快捷键: ctrl + /
4.2 特殊字符

5. 表格标签

5.1 表格的主要作用
表格不是用来布局页面的,而是用来展示数据的.

5.2 表格的基本语法

<table>
    <tr>
 <td>单元格内的文字</td>
 ...
    </tr>
 ...
</table>

1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

5.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. <th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
 <tr>
         <th>姓名</th>
 ...
 </tr>
 ...
</table>

5.4 表格属性

5.5 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分。在表格标签中，分别用：<thead>标签 表格的头部区域、标签 表格的主体区域。

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。

5.6 合并单元格
合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格：(写合并代码)
跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲：

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
3. 删除多余的单元格