html5中的清單有什麼

html5中的列表有3種：1、無序列表，使用「

」和「
• 」標籤來定義；2、有序列表，使用「
  」和「
  1. 」標籤來定義；3、定義列表，使用「

     」、「

     」和「

     」標籤來定義。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

無序列表(unordered list)

作用: 給一堆內容添加無序列表語義(一個沒有先後順序整體), 列表中的條目是不分先後

#格式：

li 英文是list item, 翻譯為列表項目

<h4 id="选择居住城市-CN">选择居住城市(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 id="中国房价排行">中国房价排行</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應用場景:

網站底部相關資訊

但凡看到一堆內容都是用來描述某一個內容的時候就要想到dl

• 注意事項:

• - dl是一個`組標籤`, 一定是一坨一坨的出現, 也就是說dt和dd標籤不能單獨存在, 必須包裹在dl裡面

• #由於dl和dt、dd是一個整體, 所以dl裡面不推薦包裹其它標籤
• dd和dt和li標籤一樣是容器標籤, 裡面可以添加任意標籤

定義列表非常靈活, 可以給一個dt配置多個dd, 但最好不要出現多個dt對應一個dd, dd的語意是描述離它最近的一個dt, 所以其它dt相當於沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述

######定義列表非常靈活, 可以將多個dt dd組合拆分為多個dl#########相關推薦：《### html影片教學###》###

以上是html5中的清單有什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！