列表標(biāo)簽
列表標(biāo)簽
無序列表(unordered list)
作用: 給一堆內(nèi)容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后
格式:
li 英文是 list item, 翻譯為列表項
<h4>選擇居住城市(CN)</h4><ul><li>北京</li><li>上海</li><li>廣州</li><li>鐵嶺</li></ul>
ul應(yīng)用場景:
導(dǎo)航條
商品列表等
新聞列表
注意事項:
這里指的無序是指對于主體來說內(nèi)容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標(biāo)題改為"中國霧霾排行", 那么就必須有嚴(yán)格的排名,北京必須寫在前面
瀏覽器會給無需列表自動添加先導(dǎo)符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點,而是增加無序列表的語義
其實ul還有一個type屬性, 可以修改先導(dǎo)符號的樣式, 取值有disc、square寺渗、circle幾種
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
ul是一個組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說li標(biāo)簽不能單獨存在, 必須包裹在ul里面
由于ul和li是一個整體, 所以ul里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽
<ul><li>好吃的<ul><li>牛奶</li><li>面包</li></ul></li><li>日用的<ul><li>毛巾</li><li>牙膏</li></ul></li></ul>
有序列表(ordered list)
作用: 給一堆內(nèi)容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分
格式:
<h4>中國房價排行</h4><ol><li>北京</li><li>上海</li><li>廣州</li><li>鐵嶺</li></ol>
ol應(yīng)用場景:
xxx排行榜
其實ol應(yīng)用場景并不多, 因為能用ol做的用ul都能做
注意事項:
ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點都一樣
其實ul還有兩個常見屬性start拍谐、type屬性, 可以修改先導(dǎo)符號的樣式和序號
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
定義列表(definition list)
作用: 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進(jìn)行相應(yīng)的描述
格式:
dt英文definition title, 翻譯為定義標(biāo)題
dd英文definition description, 翻譯為定義描述信息
<dl><dt>北京</dt><dd>國家的首都, 看升國旗的地方</dd><dt>上海</dt><dd>魔都, 遍地是黃金的地方</dd></dl>
dl應(yīng)用場景:
網(wǎng)站底部相關(guān)信息
但凡看到一堆內(nèi)容都是用于描述某一個內(nèi)容的時候就要想到dl
注意事項:
- dl是一個組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標(biāo)簽不能單獨存在, 必須包裹在dl里面
由于dl和dt辈双、dd是一個整體, 所以dl里面不推薦包裹其它標(biāo)簽
dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽
定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現(xiàn)多個dt對應(yīng)一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進(jìn)行描述
定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl
作者：極客江南
鏈接：http://www.reibang.com/p/1e15d8059bb4
來源：簡書
著作權(quán)歸作者所有责掏。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處湃望。
