HTML【语义化】及表格

1、什么是HTML语义化？

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加

2、语义化的好处有哪些？

• 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。

  • 使代码更具【可读性】，便于团队开发和维护。

  • 有利于SEO搜索引擎优化

  • 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

alt属性等）

HTML表格

1、表格简介

表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格

2、表格的作用

• 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代

• 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)

• 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局

• 3、表格基本标签

• table

  • 语法: <table></table>

  • 作用:定义表格

• tr

  • 语法: <tr></tr>

  • 作用:定义表格中的行

• td

  • 语法: <td></td>

  • 作用：普通单元格，定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 默认样式:内容水平居左，垂直居中

• th

  • 语法:<th></th>

  • 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

  • 默认样式：字体加粗，内容水平居中，垂直居中

  • 表包含三部分：table tr 单元格（th td）
            table:表格的容器
            tr:表格的行
            th:表头单元格,默认文字加粗，水平方向和垂直方向居中显示
            td:普通单元格,默认水平居左，垂直方向居中
            注意：1.表格必须嵌套在table中
                 2.单元格必须嵌套在tr行标签中
                 3.在单元格内可以添加任意的标签和内容

  • 4、表格常用属性

    table属性

  • width\height

    • 语法

      <table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">

    • 作用：定义表格的宽或高

    • 注：省略单位 默认px

  • border

    • 作用 ：使用表格的边框属性可以显示一个带有边框的表格。

    • 注意：如果不定义边框属性，表格将不显示边框。

  • cellpadding

    • 作用：定义单元格中内容和边框之间的间距,单位是像素，可以省略

  • cellspacing

    • 作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略 cellspacing='0',单元格之间的距离为0

  • borderColor：

    • 改变边框的颜色

    <table border="1"  borderColor="#ffa500"></table>

  • 语法：

    <td width="100" height="100" align="center" valign="middle">

  • width\height

    • 作用：定义单元格宽度、高度

    • 注意：省略单位 默认px

  • align

    • 作用：单元格水平方向的对齐方式

    • 取值

      • left左对齐

      • center 居中对齐

      • right 右对齐

  • valign

    • 作用：单元格垂直方向的对齐方式

    • 取值

      • top顶对齐

      • middle居中对齐

      • bottom底部对齐

  • 5、表格结构标签

  • caption

    • 语法：<caption></caption>

    • 作用：定义表格的标题

    • 默认样式：居中于表格之上

    • 注意： caption 标签必须紧随 table 标签之后

  • thead

    • 语法:<thead></thead>

    • 作用:用于组合 HTML 表格的表头内容

  • tbody

    • 语法:<tbody></tbody>

    • 作用:用于组合 HTML 表格的主体内容

    • 提示：一个表格允许包含多个<tbody>

  • tfoot

    • 语法：<tfoot></tfoot>

    • 作用：用于组合 HTML 表格的页脚内容

  • 总结

    • 每个表格只能定义一个标题<caption>

    • thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载

    • 注意：在一个表格中只能有一组thead/tfoot标签，可以有多个tbody标签

    • 6、合并单元格

    • rowspan

      • 作用：跨行合并 语法：<td rowspan="2"> 电话 </td>

    • colspan

      • 作用：跨列合并 语法：<td colspan="2"> 电话 </td>

    • 7、表格特性

    • 未定宽度的表格、单元格适应内容(单元格的宽高由内容撑开)

    • 同一行的单元格，高度只会识别一个，取高度最大值

    • 同一列的单元格，宽度只会识别一个，取宽度最大值

    • 表格可以包含其他HTML标签以及表格

    • 操作步骤

      • 1.确定是合并行还是合并列

      • 2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td>

      • 3.删除多余单元格

•