列表標簽

無序列表(unordered list)

• 作用: 給一堆內容添加無序列表語義(一個沒有先後順序整體), 列表中的條目是不分先後
• 格式:
  • 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>
 

有序列表(ordered list)

• 作用: 給一堆內容添加有序列表語義(一個有順序整體), 列表中的條目有先後之分
• 格式:

    <h4>中國房價排行</h4>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>鐵嶺</li>
    </ol>

• ol應用場景:

  • xxx排行榜
  • 其實ol應用場景並不多, 因為能用ol做的用ul都能做

• 註意事項:

  • ol和ul就是語義不一樣，怎麽使用都是一樣的以及註意點都一樣
  • 其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號
  • 但是由於樣式將來都是通過css來完成, 所以這裏就不給大家介紹了

定義列表(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裏面不推薦包裹其它標簽
  • dd和dt和li標簽一樣是容器標簽, 裏面可以添加任意標簽
  • 定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現多個dt對應一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當於沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述
  • 定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl

04-列表標簽