白骑士的HTML教学基础篇 1.5 列表与表格

        在前几节中，我们学习了HTML的基本概念、文档结构、文本格式化、链接与图像。在这篇博客中，我们将深入探讨HTML中的列表与表格。列表和表格是网页中常用的元素，用于组织和显示信息。掌握这些技能可以帮助你创建结构化和易于阅读的网页内容。

无序列表与有序列表

        HTML提供了两种基本类型的列表：无序列表（unordered list）和有序列表（ordered list）。

无序列表

        无序列表使用‘<ul>‘标签来定义，列表项使用‘<li>‘标签表示。无序列表通常用于列出没有特定顺序的项目。

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

有序列表

        有序列表使用‘<ol>‘标签来定义，列表项使用‘<li>‘标签表示。有序列表用于列出有特定顺序的项目，默认情况下会显示为数字列表。

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

嵌套列表

        你可以将一个列表嵌套在另一个列表的某个列表项中，以创建更复杂的结构。

<ul>
    <li>项目一
        <ul>
            <li>子项目一</li>
            <li>子项目二</li>
        </ul>
    </li>
    <li>项目二</li>
</ul>

<ol>
    <li>第一项
        <ol>
            <li>子项一</li>
            <li>子项二</li>
        </ol>
    </li>
    <li>第二项</li>
</ol>

创建表格

        HTML中的表格使用‘<table>‘标签来定义，表格行使用‘<tr>‘标签，表格头使用‘<th>‘标签，表格数据单元使用‘<td>‘标签。

基本表格结构

<table>
    <tr>
        <th>标题一</th>
        <th>标题二</th>
    </tr>

    <tr>
        <td>数据一</td>
        <td>数据二</td>
    </tr>

    <tr>
        <td>数据三</td>
        <td>数据四</td>
    </tr>
</table>

表格属性

        你可以使用各种属性来调整表格的外观，例如边框、宽度和对齐方式。

<table border="1" width="50%">
    <tr>
        <th>标题一</th>
        <th>标题二</th>
    </tr>

    <tr>
        <td align="center">数据一</td>
        <td align="center">数据二</td>
    </tr>

    <tr>
        <td>数据三</td>
        <td>数据四</td>
    </tr>
</table>

表头、表体和表尾

        HTML提供了‘<thead>‘、‘<tbody>‘和‘<tfoot>‘标签，用于定义表格的头部、主体和尾部。

<table border="1">
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>数据一</td>
            <td>数据二</td>
        </tr>

        <tr>
            <td>数据三</td>
            <td>数据四</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>表尾一</td>
            <td>表尾二</td>
        </tr>
    </tfoot>
</table>

总结

        通过本篇博客，我们学习了如何在HTML中创建无序列表、有序列表、嵌套列表以及表格。掌握这些技能可以帮助你组织和展示网页中的信息，使内容更加清晰和易于阅读。在接下来的文章中，我们将进一步探讨HTML中的表单和多媒体元素，帮助你更全面地掌握HTML开发技能。欢迎继续关注我们的HTML系列教程，持续提升你的网页开发能力！