Web前端知识点 表格 无序、有序列表 语义化

      ul：无序标签             

 特性  - 宽度默认撑满整个父元素

         - 高度默认由内容撑开

  - 独立成行      - 自带外间距      - 自带内填充(内间距)

  - 自带列表符，去掉自带列表符 li{ list-style: none; }

- css属性

  - list-style-type属性：列表符类型

    - circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

* 应用场景 : 新闻列表 、导航 、商品列表

* 注意：ul的直接子元素只能是li

 - 宽度默认撑满整个父元素

  - 高度默认由内容撑开

  - 独立成行      - 自带外间距      - 自带内填充(内间距)

  - 自带列表符，去掉自带列表符 li{ list-style: none; }

- css属性

  - list-style-type属性：列表符类型

    - circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

* 应用场景 : 新闻列表 、导航 、商品列表

* 注：ul的直接子元素只能是li

有序列表  ol

 </ol>

     strat属性:开始值 写在 <ol start="6"></ol>开始标签中

     reversed属性：倒叙  写在 <ol start="6" reversed></ol>

---

  自定义列表：       <dl> 列表容器

        <dt>词专业名</dt>

        <dd>对专业名次的解释</dd>

             </dl>

特性

  - 宽度默认撑满整个父元素

  - 高度默认由内容撑开

  - 独立成行

  -dl dt dd都是块级标签

    dl标签自带外间距

    dd标签自带外间距

    浏览器显示，dd标签的内容会缩进显示

意：ul的直接子元素只能是li

---

### 1、什么是HTML语义化？

用合适的标签去匹配相应的内。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

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

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

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

  - 有利于SEO搜索引擎优化（在搜索框搜索内容的时候更好更快的搜到）

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

---

1.  表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。

类比：excel表格&网页中的表格

## 3、表格基本标签

- table

  - 语法: <table></table>

  - 作用:定义表格

- tr

  - 语法: <tr></tr>

  - 作用:定义表格中的行

- td

  - 语法: <td></td>

  - 作用：普通单元格，定义表格数据（table data）

    单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

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

- th

  - 语法:<th></th>

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

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

注意：1.表格必须嵌套在table中

               2.单元格必须嵌套在tr行标签中

               3.在单元格内可以添加任意的标签和内容

---

cellpadding

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

- cellspacing

  - 作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略

    cellspacing='0',

borderColor：

  * 改变边框的颜色

width\height

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

-  align

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

   - 取值

     -  left左对齐

     -  center 居中对齐

     -  right 右对齐

-  valign

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

   - 取值

     - top顶部对齐

     - middle居中对齐

     - bottom底部对齐

---

合并单元格

-  rowspan

   - 作用：跨行合并

     语法：<td rowspan="2"> 电话 </td>  消横线

-  colspan

   - 作用：跨列合并

     语法：<td colspan="2"> 电话 </td> 消竖线

## 1、表格结构标签

---

- 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标签

2、表格特性

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

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

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

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