Web基础(从零开始)——HTML列表标签详解

最新推荐文章于 2024-05-20 22:38:25 发布

小白花lll

最新推荐文章于 2024-05-20 22:38:25 发布

阅读量611

点赞数

分类专栏：零基础学Web 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_57633498/article/details/121180396

版权

33 篇文章 6 订阅

订阅专栏

列表是用来布局的，根据使用情景不同、列表可分为三大类：无序列表、有序列表和自定义列表。

（1）无序列表：列表项直接没有顺序的区别

<ul>标签表示HTML页面中的无序列表，<li>标签定义列表项

<body>
    <h3>商品列表</h3>
    <ul>
        <li>手机</li>
        <li>电视</li>
        <li>电脑</li>
    </ul>
</body>

注： 1.无序列表的各个列表项直接没有顺序级别之分，是并列的

2.<ul></ul>标签中只能嵌套<li></li>标签，不允许放其他标签和文字

3.<li></li>标签可以存放任何标签或者文字

4.无序列表带有自己的样式属性，但在实际使用时，一般使用CSS设置

（2）有序列表：列表项之间有顺序

<ol>标签用于定义有序列表，<li>标签用来定义列表项，会自动在列表项前面加一个数字

<h3>晋江排行榜</h3>
    <ol>
        <li>某某 木苏里</li>
        <li>难哄 竹己</li>
        <li>向师祖献上咸鱼 扶华</li>
    </ol>

注：1.<ol></ol>标签中只能嵌套<li></li>标签，不允许放其他标签和文字

2.<li></li>标签可以存放任何标签或者文字

3.有序列表带有自己的样式属性，但在实际使用时，一般使用CSS设置

（3）自定义列表：有一个列表的表头，列表项围绕着表头进行解释和描述

<dl>标签用于定义列表，<dt>定义名字，<dd>描述每一个项目

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>淘宝客服</dd>
    </dl>

注：1.<dl></dl>标签中只能嵌套<dt></dt>标签和<dd></dd>标签，不允许放其他标签和文字

2.<dt></dt>和<dd></dd>个数没有限制，通常是一个.<dt></dt>对应多个<dd></dd>

关注