HTML中有两种主要类型的列表:无序列表(<ul>)和有序列表(<ol>)。每个列表项使用 <li> 元素表示。以下是无序列表和有序列表的示例:

无序列表:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表示例</title>
</head>
<body>

    <h1>购物清单</h1>

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>

</body>
</html>

在上述示例中,使用 <ul> 元素创建无序列表,每个列表项由 <li> 元素表示。浏览器会默认为无序列表添加项目符号(通常是圆点)。

有序列表:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表示例</title>
</head>
<body>

    <h1>任务列表</h1>

    <ol>
        <li>写一篇文章</li>
        <li>学习HTML</li>
        <li>锻炼身体</li>
    </ol>

</body>
</html>

在上述示例中,使用 <ol> 元素创建有序列表,每个列表项同样由 <li> 元素表示。浏览器会默认为有序列表添加编号。

除了基本的无序列表和有序列表,还有定义描述列表的 <dl>、<dt> 和 <dd> 元素,分别表示列表、术语和描述。以下是描述列表的示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>描述列表示例</title>
</head>
<body>

    <h1>词汇表</h1>

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

</body>
</html>

在描述列表中,使用 <dl> 元素定义整个列表,<dt> 元素定义术语(名词),<dd> 元素定义描述。描述列表通常用于表示术语及其相应的定义。


转载请注明出处:http://www.zyzy.cn/article/detail/12479/HTML5