列表与表格

列表与表格是网页中组织结构化内容的核心元素，适用于导航、数据展示等场景。

列表类型

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 自定义起始序号 -->
<ol start="5">
    <li>从5开始</li>
</ol>

<!-- 自定义序号类型 -->
<ol type="A">  <!-- A, B, C... -->
    <li>项目A</li>
</ol>

定义列表

<dl>
    <dt>术语名称</dt>
    <dd>术语描述</dd>

    <dt>HTML</dt>
    <dd>超文本标记语言</dd>

    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

列表嵌套

<ul>
    <li>前端
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端</li>
</ul>

表格结构

基础表格

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

表格标签

完整结构

<table>
    <caption>员工信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>技术部</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td>
            <td>10人</td>
        </tr>
    </tfoot>
</table>

单元格合并

<!-- 横向合并（跨列） -->
<td colspan="2">合并两列</td>

<!-- 纵向合并（跨行） -->
<td rowspan="2">合并两行</td>

要点总结

1. 列表选择：导航用无序，步骤用有序，术语用定义
2. 表格语义：使用<thead>、<tbody>、<tfoot>增强语义
3. 合并单元格：注意合并后删除多余单元格
4. 列表嵌套：子列表需嵌套在父<li>内部