Web前端开发笔记8——列表

最新推荐文章于 2025-06-01 21:17:58 发布

原创最新推荐文章于 2025-06-01 21:17:58 发布 · 833 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html

#Web前端开发入门专栏收录该内容

57 篇文章

订阅专栏

本文介绍了HTML中的三种列表类型：无序列表、有序列表和自定义列表。无序列表以<ul>和<li>标签创建，常用于展示不需排序的项目，如手机品牌。有序列表使用<ol>标签，适用于有顺序的列表，如步骤说明。自定义列表通过<dl><dt><dd>组合，用于定义具有标题和详细描述的列表，常见于术语解释。了解这些列表类型有助于提升网页布局和内容组织。

1.列表是用来排序布局的，主要分为下面的三类：

无序列表
有序列表
自定义列表

2.无序列表：包含ul和li标签，分别表示列表定义及每一行主体。

<h3>下面是无须列表，以手机品牌为例</h3>
<ul>
    <li>华为</li>
    <li>三星</li>
    <li>小米</li>
    <li>vivo</li>
</ul>

代码效果：

注：ul中不可以放入别的标签，只能放li标签。li标签等于一个容器。无须列表中也有自己的样式属性，但在实际使用时，我们会使用css设置。

3.有序列表用于有排序的列表。使用ol标签来定义一个有序列表标签，再使用li标签来列出呈现的内容。

<ol>
    <li>1-华为</li>
    <li>2-三星</li>
    <li>3-小米</li>
    <li>4-vivo</li>
</ol>

代码效果：

注：ol中不可以放入别的标签，只能放li标签。li标签等于一个容器。同样在每一行内容之前也有自己的样式属性。

4.自定义列表的使用。首先使用dl标签来定义一个自定义列表，再使用dt定义列表项目名字，暂且认为是一个表格中的标题，最后就是使用dd来定义dt下的元素即子项。

<dl>
    <dt>
        这里我我自定义的一个列表标题
    </dt>
    <dd>这是子项1</dd>
    <dd>这是子项2</dd>
    <dd>这是子项3</dd>
</dl>

代码效果：

注：同样要注意的是dl里面只能包含dt和dd。dt和dd个数没有限制，经常是一个dt对应多个dd。