HTML基础——列表标签

列表标签

• 作用：告诉浏览器这一堆数据是一个整体
• 分类：无序列表、有序列表、定义列表

无序列表

• 作用：给一堆数据添加列表语义，且所有数据没有先后之分
• 格式：

<ul>
     <li>需要显示的条目内容</li>
</ul>

• 注意点：
  • ul和li标签是一个组合，一般情况下一起出现
  • ul标签中不推荐包含除li外的其他标签，li标签中的内容可能会很复杂，因此，可以在li标签中添加其它标签来丰富界面（可添加ul标签，实现列表嵌套），比如：

<h2>物品清单</h2>
<ul>
    <li>
        <h3>蔬菜</h3>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>
        <h3>水果</h3>
        <ul>
            <li>苹果</li>
            <li>梨子</li>
            <li>桃子</li>
        </ul>
    </li>
</ul>

• 以上例子也可以通过以下方法生成主要框架：

ul>li*2>h2+ul>li*3

• 无序列表应用
  • 新闻列表
  • 商品列表
  • 导航条

有序列表

• 作用：给一堆数据添加语义，且所有数据有先后之分
• 格式：

<ol>
      <li></li>
</ol>

• 其余用法和ul类似

定义列表

• 作用：定义列表的作用
  • 给一堆数据添加列表语义
  • dt定义列表中所有标题，dd给每个标题添加描述信息
• 格式：

<dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
<dl>

• dt:definition title，定义列表中的标题
• dd:definition description，定义标题中对应的描述
• 定义列表应用
  • 网站尾部的相关信息
  • 图文混排
• 注意点：
• dl和dt、dd是整体，一般一起出现
• dl中只加dt和dd
• dt可以没有对应的dd，推荐一个dt对一个dd
• 需要丰富界面时，可以在dt和dd标签中继续添加其余标签