站長資訊網
最全最豐富的資訊網站

html5中的列表有什么

html5中的列表有3種:1、無序列表,使用“<ul>”和“<li>”標簽來定義;2、有序列表,使用“<ol>”和“<li>”標簽來定義;3、定義列表,使用“<dl>”、“<dt>”和“<dd>”標簽來定義。

html5中的列表有什么

本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。

無序列表(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

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
久久成人精品视频| 亚洲国产日韩视频观看| 久久亚洲精品国产精品黑人| 国产精品伊人久久伊人电影 | 亚洲av日韩综合一区在线观看| 久久精品熟女亚洲av麻豆| 国产精品影音先锋| 91精品国产自产在线观看永久∴| 亚洲AV无码成人精品区天堂| 国产美女亚洲精品久久久综合| 国产精品无码素人福利不卡| 日韩一区二区精品观看| 国产 日韩 中文字幕 制服| 国产精品爽爽va在线观看无码| 久久精品国产亚洲av品善| 精品深夜AV无码一区二区老年 | 九九精品国产亚洲AV日韩| 国产精品亚洲精品日韩电影| 国产成人精品久久久久| 一本色道久久综合亚洲精品蜜桃冫| 国产精品久久成人影院| 国产精品久久成人影院| 精品国精品国产自在久国产应用| 1卡二卡三卡四卡精品| 久久99精品久久久久久综合| 国内精品免费在线观看| 国产在线精品无码二区| 在线精品亚洲一区二区小说| 在线精品自拍无码| 国产综合免费精品久久久| 久久精品?ⅴ无码中文字幕| 国产精品免费看久久久香蕉| 丁香六月婷婷精品免费观看| 美女免费精品高清毛片在线视 | 四虎永久在线精品免费观看视频| 亚洲精品视频在线观看免费| 日韩精品人妻系列无码专区免费| 国产女人水真多18毛片18精品| 99免费精品视频| 精品aⅴ一区二区三区| 97国产精品视频|