列表標籤

無序列表

• 做用：給一堆內容添加無序列表語義（一個沒有前後順序總體），列表中的條目不分前後

• 格式：

  • 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