HTML基础【3】：列表标签

2024-10-19 08:52:26

无序列表

作用：给一堆内容添加无序列表语义（一个没有先后顺序整体），列表中的条目不分先后

格式：

li 英文是 list item，翻译为列表项

<h4>选择居住城市(CN)</h4>

    <ul>

        <li>北京</li>

        <li>上海</li>

        <li>广州</li>

        <li>铁岭</li>

    </ul>

ul应用场景：
- 导航条
- 商品列表等
- 新闻列表
注意事项
- 这里指的无序是指对于主体来说内容没有先后之分，例如主题是 "选择居住城市（CN）"，北京上海都是中国的城市，无论谁放在前面它都还是中国的城市的。如果标题改为 "中国雾霾排行" ，那么就必须有严格的排名，北京必须写在前面
- 浏览器会给无需列表自动添加先导符号但是一定要记住，ul的作用并不是给文字添加小圆点，而是增加无序列表的语义
  - 其实 ul 还有一个 type 属性，可以修改先导符号的样式，取值有 disc、square、circle 几种
  - 但是由于样式将来都是通过css来完成，所以在这里不做介绍
- ul是一个组标签，一定是一坨一坨的出现，也就是说 li 标签不能单独存在，必须包裹在 ul 里面
- 由于 ul 和 li 是一个整体，所以 ul 里面不推荐包裹其它标签，永远记住 ul 里面最好只写 li 标签
- 虽然 ul 中推荐只能写li标签，但是 li 标签是一个容器标签，li 标签中可以添加任意标签，甚至可以添加 ul 标签
```
<ul>

    <li>

        好吃的

        <ul>

            <li>牛奶</li>

            <li>面包</li>

        </ul>

    </li>

    <li>

        日用的

        <ul>

            <li>毛巾</li>

            <li>牙膏</li>

        </ul>

    </li>

</ul>
```

有序列表

作用：给一堆内容添加有序列表语义（一个有顺序整体），列表中的条目有先后之分

格式：

<h4>中国房价排行</h4>

    <ol>

        <li>北京</li>

        <li>上海</li>

        <li>广州</li>

        <li>铁岭</li>

    </ol>

ol 应用场景
- xxx排行榜
- 其实 ol 应用场景并不多，因为能用 ol 做的用 ul 都能做
注意事项：ol 和 ul 就是语义不一样，如何使用以及注意点都一样

定义列表

作用：给一堆内容添加列表语义，通过dt罗列出列表的条目，然后再通过dd给每个条目进行相应的描述

格式：

dt英文definition title，翻译为定义标题
dd英文definition description，翻译为定义描述信息

<dl>

    <dt>北京</dt>

    <dd>帝都, 看升国旗的地方</dd>

    <dt>上海</dt>

    <dd>魔都, 遍地是黄金的地方</dd>

</dl>

dl应用场景：
- 网站底部相关信息
- 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
注意事项：
- dl 是一个组标签, 一定是一坨一坨的出现，也就是说 dt 和 dd 标签不能单独存在，必须包裹在 dl 里面
- 由于 dl 和 dt、dd 是一个整体，所以 dl 里面不推荐包裹其它标签
- dd 和 dt 和 li 标签一样是容器标签，里面可以添加任意标签
- 定义列表非常灵活，可以给一个dt配置多个dd，但是最好不要出现多个dt对应一个dd，dd的语义是描述离它最近的一个dt，所以其它dt相当于没有描述，而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
- 定义列表非常灵活，可以将多个dt+dd组合拆分为多个dl

最新文章

热门文章