列表，表格

a标签 利用锚点来跳转指定锚点处

{11111}html

定义锚点

      <div id='锚点名称'></div>(设置锚点位置）

      引用锚点

      <a href="#锚点名称">内容</a>（定位锚点）

点击定位锚点跳转到锚点位置

{22222}无序列表

<ul><!-- 列表容器 -->

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ul>

- 特性

  - ul 和 li 标签都是块级标签

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

  - 高度默认由内容撑开

  - 独立成行

  - 自带外间距

  - 自带内填充

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

- css属性

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

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

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

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

{33333}有序列表

<!--  type="a，i,I" 序号改变-->

        <li>有序列表</li>

        <li>有序列表</li>

        <li>有序列表</li>

    </ol>

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

        start="6"开始属性：从几开始

     reversed属性：倒序  写在 <ol start="6" reversed></ol>开始标签中

      <ol start="6" reversed>开始属性；从6开始进行倒序-->

{44444}自定义列表

<dl>

        <!-- 自定义列表项 -->

        <dt>专业名词</dt>

        <!-- 对自定义列表项的解释 -->

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

      </dl>

{55555}

HTML语义化 用合适的标签去匹配合适的内容

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

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

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

  - 有利于SEO搜索引擎优化

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

{66666}表格属性，基本结构标签

align:内容在单元格水平对齐方式

             left:居左对qi      center:居中对      right:居右对齐

        valign:内容在单元格垂直对齐方式

            - top顶端对齐      - middle居中对齐       - bottom底部对齐

基本结构标签

table- 语法: <table></table>  - 作用:定义表格

 tr 语法: <tr></tr> 作用:定义表格中的行

td  - 语法: <td></td>

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

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

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

th 语法:<th></th>

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

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

<table>

    <tr>

        <th></th>

        <th></th>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

表包含三部分：table tr 单元格（th td）

          table:表格的容器

          tr:表格的行

          th:表头单元格,默认文字加粗，水平方向和垂直方向居中显示

          td:普通单元格,默认水平居左，垂直方向居中

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

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

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

   {777777}

 cellpadding

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

- cellspacing

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

    cellspacing='0',单元格之间的距离为0

align

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

   - 取值

     -  left左对齐

     -  center 居中对齐

     -  right 右对齐

-  valign

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

   - 取值

     - top顶对齐

     - middle居中对齐

     - bottom底部对齐

合并单元格

-  rowspan

   - 作用：跨行合并

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

-  colspan

   - 作用：跨列合并

     语法：<td colspan="2"> 电话 </td>   - 3删除多余单元格

表格特性

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

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

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

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