编排列表以及表格

3.1 列表

列表是以结构化，易读性更强的方式提供信息的方法。列表的存在形式主要分为：无序列表、有序列表、定义列表、嵌套列表。

3.1.1 无序列表

  无序列表就是列表中列表项的前导符号没有一定的顺序，而是用黑点、圆圈、方框等一些特殊符号标识，类似与Word处理软件中的项目符号。

代码如下：

<ul>
        <li>苹果</li>
        <li>梨</li>
        <li>香蕉</li>
        <li>榴莲</li>
        <li>橙子</li>
    </ul>

运行结果： 

在 ul 后指定符号的样式，可设定 ul 中所有<li>标签的前导符号，例如 

3.1.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序，它们之间以编号来标记。

代码如下： 

 <ol>
        <li>拖鞋</li>
        <li>运动鞋</li>
        <li>篮球鞋</li>
        <li>专业鞋</li>
        <li>健身鞋</li>
    </ol>

运行结果：

<ol>标签的type属性用来定义一个有序列表的符号样式，在 ol 后指定符号的样式，可设定直到</ol>之前的表项加重记号，格式为 

<ol type="1"><li>序号为数字</li></ol>
    <ol type="A"><li>序号为大写英文字母</li></ol>
    <ol type="a"><li>序号为小写英文字母</li></ol>
    <ol type="I"><li>序号为大写罗马字母</li></ol>
    <ol type="i"><li>序号为小写罗马字母</li></ol>

运行结果： 

3.1.3 定义列表

定义列表又称为释义列表或字典列表。定义列表不是带有前导字符的列项目，而是一列实物，以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：<dl>标签、<dt>标签和<dd>标签。格式为

<h2>H5 创新学院联系方式</h2>
    <dl>
        <dt>电话：</dt>
        <dd>+89-01-1102-2221</dd>
        <dt>地址：</dt>
        <dd>广东省广州市白云区</dd>
    </dl>

3.1.4 嵌套列表

所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为：无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、有序列表中嵌套无序列表。此外，可以多层嵌套，还可以嵌套定义列表，由使用者灵活掌握。 

例如;

<h2>商城支付向导</h2>
    <ul type="circle">
        <li>支付方式</li>
        <ul type="disc">
            <li>贷到付款</li>
            <li>财付通</li>
            <li>支付宝</li>
            <li>网银在线</li>
        </ul>
    
    <hr>

    <li>网银在线支付步骤</li>
     <ol type="A">
        <li>选择您要使用的网上银行</li>
        <li>显示您的应付总价，点击“确认无误，付款”</li>
        <li>确认您在银行的预留信息，点击确认</li>
        <li>输入您的网银账号、登陆密码、验证码</li>
        <li>支付成功，提示“已完成付款”</li>
      </ol>
     <hr>
    </ul>

运行结果：

3.2 表格

3.2.1 表格的基本语法

 在HTML语法中，表格主要通过<table>、<tr>和<td>3个标签构成。表格的标签为
<table>，行的标签为<tr>，表项的标签为<td>。还有一种特殊的单元格<th>,用于表格中的表头单元格。

3.2.2 表格的属性

3.2.3 创建表格练习

<table border="1" width="500px" height="100" alight="center">
        <tr align="center">
            <td></td>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>

        <tr align="center">
            <th>2021年</th>
            <td>40</td>
            <td>400</td>
            <td>440</td>
        </tr>

        <tr align="center">
            <th>2022年</th>
            <td>100</td>
            <td>1500</td>
            <td>1600</td>
        </tr>

        <tr align="center">
            <th>2023年</th>
            <td>150</td>
            <td>3000</td>
            <td>3150</td>
        </tr>

        <tr align="center">
            <th>2024年</th>
            <td>250</td>
            <td>4000</td>
            <td>4200</td>
        </tr>
    </table>

运行结果： 

3.3.4   不规则表格

1.跨行（rowspan）

跨行是指单元格在垂直方向合并（保留上边单元格，删除下边多余单元格），语法如下：

 <table>
        <tr>
            <td rowspan="所跨的行数">单元格内容</td>
        </tr>
    </table>

2.跨列(colspan)

跨列是指单元格在水平方向上合并（保留左边单元格，删除右边多余单元格），语法如下：

 <table>
        <tr>
            <td colspan="所跨的列数">单元格内容</td>
        </tr>
    </table>

3.跨行跨列(rowspan和colspan)

跨行跨列是指先水平合并后垂直合并

 <table>
        <tr>
            <td colspan="所跨的列数" rowspan="所跨的行数">单元格内容</td>
        </tr>
    </table>

4、不规则表格训练

 <table border="1" width="500px" height="200" align="center">
        <tr align="center">
            <td></td>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>
        <tr align="center">
            <th>2021年</th>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr align="center">
            <th>2022年</th>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <th>2023年</th>
            <th colspan="2" rowspan="2"></th>
            <th></th>
        </tr>
        <tr align="center">
            <th>2024年</th>
            <td></td>
        </tr>

运行结果如下：