03HTML基礎--列表標籤

列表標籤

無序列表(unordered list)

• 作用: 給一堆內容新增無序列表語義(一個沒有先後順序整體), 列表中的條目是不分先後
• 格式:
  • li 英文是 list item, 翻譯為列表項

格式：<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

    <h4

    <ul>

        <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標籤：ul>li*4

<ul>

        <li>

            好吃的

            <ul>

                <li>牛奶</li>

                <li>麵包</li>

            </ul>

        </li>

        <li>

            <h1>日用的</h1>

            <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