03-HTML列表标签

列表标签

无序列表(unordered list)

• 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
• li 英文是 list item, 翻译为列表项

<h1>中国城市</h1>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>

• 无序列表应用场景
  • 导航条
  • 商品列表等
  • 新闻列表
• 注意点:
  • 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住,
    ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul>
    <li>北京
        <ul>
            <li>第一城市</li>
            <li>超级厉害</li>
        </ul>

    </li>
    <li>上海</li>
    <li>深圳</li>
</ul>

有序列表(ordered list)

• 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
• ol应用场景并不多, 因为能用ol做的用ul都能做

<ol>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ol>

定义列表(definition list)

• 作用: 给一堆内容添加列表语义, 通过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里面不推荐包裹其它标签
  • 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt
    对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有
    描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一
    个条目进行描述
  • 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl