【HTML入门】列表与表格

news2024/7/7 15:08:59

文章目录

前言
一、列表与表格是什么？
- 列表
- 表格
二、使用标签
- 列表标签
- 表格标签
三、组合情况
- 列表的组合
- 表格的组合
四、示例代码
总结

好的，以下是一个关于HTML列表与表格的文章示例：

前言

随着网页开发的普及，HTML成为了构建网页的基础语言。本文将介绍HTML中的列表与表格，帮助初学者掌握这些基本元素的使用方法。

一、列表与表格是什么？

列表

列表用于展示一系列相关的项目。HTML中有三种主要的列表类型：

无序列表（ul）：使用圆点符号表示。
有序列表（ol）：使用数字或字母表示。
定义列表（dl）：用于描述术语及其定义。

表格

表格用于组织和展示数据。HTML表格由行和列组成，常用于展示结构化信息。

二、使用标签

列表标签

无序列表：<ul> 和 <li>
有序列表：<ol> 和 <li>
定义列表：<dl>, <dt>, 和 <dd>

表格标签

表格：<table>
表头：<thead>
表体：<tbody>
表尾：<tfoot>
行：<tr>
单元格：<td> 和 <th>

三、组合情况

列表的组合

列表可以嵌套使用，例如在无序列表中嵌套有序列表。

表格的组合

表格可以包含表头、表体和表尾，且可以合并单元格以创建更复杂的布局。

四、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 列表与表格示例</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
    </ul>

    <h2>有序列表</h2>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

    <h2>定义列表</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
    </dl>

    <h2>表格</h2>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
</body>
</html>