列表标签

无序列表

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

• 格式：

  • 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