列表标签：

html 中有有序列表(ol)，无序列表(ul)和自定义列表(dl)。不管何种列表，其中只能涵盖列表项标签（li），dl 标签除外。

1. 有序列表

<ol></ol>有序列表标签，双标签，第一层嵌套内只能包含<li></li>列表项标签，单独存在没有意义，块级元素可以自占一行显示
<li></li>列表项标签，为双标签可以包裹任何标签和文本，块级元素。
列表项前有数字顺序，type 类型 1、A、a、i、I 用来更改列表项的数字。type 属性可以设置：

- type="1" 默认的

- type="a" 小写字母

- type="A" 大写字母

<ol type="A">
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ol>

2. 无序列表

<ul></ul>无序列表标签，双标签，第一层嵌套内只能包含<li></li>列表项标签，单独存在没有意义，块级元素可以自占一行显示
<li></li>列表项标签，为双标签可以包裹任何标签和文本，块级元素。
type 类型 disc、square、circle 用来更改列表项的形状。type属性可以设置：
type="disc" 默认的
type="circle" 空心圆点
type="square" 小正方形（实心的）

<ul type="square">
    <li>后羿</li>
    <li>蔡⽂姬</li>
    <li>程咬⾦</li>
</ul>

3.嵌套列表

当需要多级⽬录，或多级列表时，可采取列标签套的⽅法，写法与普通列表书写⽅法⼀样，只是在列表项中再增加列表。列表嵌套结构因嵌套复杂，容易出错，因此在书写中需要格外注意。

<ol>
    <li>认识互联网</li>
    <ol type="I">
        <li>互联网介绍</li>
        <ul>
            <li>互联网</li>
            <li>web和互联网的关系</li>
        </ul>
        <li>浏览器介绍</li>
        <li>web工作原理</li>
     </ol>
</ol>

练习

<ul>
    <li>草系小精灵</li>
    <ol>
        <li>妙蛙种子</li>
        <img src="./img/001.png" alt="" width="50">
        <li>妙蛙草</li>
        <img src="./img/002.png" alt="" width="50">
        <li>妙蛙花</li>
        <img src="./img/003.png" alt="" width="50">
     </ol>
          <li>火系小精灵</li>
     <ol>
          <li>小火龙</li>
          <img src="./img/004.png" alt="" width="50">
     </ol>
</ul>

六. 表格

1.表格标签

<table></table>表格标签。双标签可以包裹表格系列的标签，块级元素，自占一行
对于表格往往应用于 pc 端部分布局，手机端不可用 table 标签布局
<caption></caption>表格标题标签，双标签，只可以包裹文本。块级元素，自占一行，可以指定表格的标题，只能有一个，可以省略不写。如书写一定在<table></table>标签内嵌套的第一行出现。
<thead></thead>表头标签，可以指定表格的列表表头，可不写
<tbody></tbody>表体标签，可以指定表格的主体部分，可不写
<tfoot></tfoot>表尾标签，可以指定表格的尾部说明，可不写。<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

2. 表格的行列

<tr></tr>行标签，双标签只能包裹列标签和加粗列标签，可存在在表头、表体和表尾中，属于结构，代表一行的范围。
<th></th>加粗列标签，一般放在表头，当作列标题使用。
<td></td>表格单元列标签，放置内容如文本和其他标签。

<table border="1px">
    <caption>月收入表</caption>
    <thead>
          <tr>
              <th>月</th>
              <th>收入</th>
          </tr>
    </thead>
    <tfoot>
        <tr>
            <td>总和</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>一月</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>二月</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>

<table border="1px">
    <caption>王者荣耀英雄表</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>英雄名字</th>
            <th>职业</th>
            <th>阵营</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>程咬金</td>
            <td>坦克</td>
            <td>长安</td>
        </tr>
        <tr>
            <td>2</td>
            <td>老夫子</td>
            <td>战士</td>
            <td>稷下学院</td>
        </tr>
        <tr>
            <td>3</td>
            <td>甄姬</td>
            <td>法师</td>
            <td>魏地</td>
        </tr>
        <tr>
            <td>4</td>
            <td>橘右京</td>
            <td>刺客</td>
            <td>扶桑</td>
        </tr>
    </tbody>
</table>

3.表格标签的相关属性

<table>标签下的属性

- border 像素表格边框宽度

- height 像素、百分比表格整体高度

- width 像素、百分比表格整体宽度

- border-collapse 值collapse 除去缝隙，需要写在 style 样式中style="border-collapse: collapse;"

- bgcolor 英文、16 进制、rgba 表格背景颜色

拆分、合并单元格

- colspan 数字（占据的列数）合并列（左右相邻合并）

- rowspan 数字（占据的行数）合并行（上下相邻合并）

练习：

<table border="1" style="border-collapse: collapse;" align="center">
            <tr>
                <th colspan="9">讲台</th>
            </tr>
            <tr>
                <td rowspan="4"> 过道</td>
                <td>凌华培</td>
                <td>易文祥</td>
                <td>沃博浩</td>
                <td rowspan="4">过道</td>
                <td>黄学雄</td>
                <td>邓报华</td>
                <td>张伟康</td>
                <td rowspan="4" > 过道</td>
            </tr>
            <tr>
                <td>郑雨浓</td>
                <td>庄杰鸿</td>
                <td>朱谭飞</td>
                <td>林锐彬</td>
                <td>林财文</td>
                <td>邓文杰</td>
            </tr>
            <tr>
                <td>吴俊超</td>
                <td>赵宏青</td>
                <td>黄世荣</td>
                <td>鲁荣豪</td>
                <td>梁纪洪</td>
                <td>林钢飞</td>
            </tr>
            <tr>
                <td>朱盈盈</td>
                <td>许佳曼</td>
                <td>梁锦添</td>
                <td>许慕栒</td>
                <td>李琦雯</td>
                <td>练岚金</td>
            </tr>
            <tr>
                <td colspan="9" align="center">过道</td>
            </tr>
</table>

HTML列表标签、表格 ，详细代码图解

列表标签：

六. 表格

HTML列表标签、表格，详细代码图解