HTML中dl、ul、ol用哪一個比較好？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【HTML中dl、ul、ol用哪一個比較好？】

 

標題：

【修真院xx（職業）小課堂】課題名稱

HTML中dl、ul、ol用哪一個比較好？

開場語：

你們好，我是IT修真院上海分院第10期的學員林璇，一枚正直純潔善良的程序員，今天給你們分享一下，修真院官網WEB（職業）任務一，深度思考中的知識點——HTML中dl、ul、ol用哪一個比較好？

（1）背景介紹：

什麼是dl標籤

dl標籤就是定義列表，英文的單詞是 definition list

接下來還有definition title  dt  列表的標題 這個標籤是必需要的

definition description 列表的列表項，若是不須要它，能夠不加 dd

就是說，dt、dd只能在dl裏面；dl裏面只能有dt、dd。

什麼是ul標籤

無序列表 unordered list，「無序列表」的意思。

無序列表中的每一項是li標籤

li：list item，「列表項」的意思。

什麼是ol標籤

有序列表ol 英文單詞：Ordered List。

裏面的每一項都是li標籤

（2）知識剖析：

列表

dl標籤的做用很是大，在不少的大型網站上面都用它

上圖能夠看出，定義列表表達的語義是兩層：

（1）是一個列表，列出了幾個dd項目

（2）每個詞兒都有本身的描述項。

ul標籤

li不能單獨存在，必須包裹在ul裏面；反過來講

ul的「兒子」不能是別的東西，只能有li。

咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，

而是增長無序列表的「語義」的。

ol標籤

和無序列表同樣，有序列表也是能夠嵌套的哦

ol和ul就是語義不同，怎麼使用都是同樣的

ol裏面只能有li，li必須被ol包裹。li是容器級。

（3）常見問題：

如何去除黑點

（4）解決方案：

list-style-type: none;

（5）編碼實戰：

寫上list-style-type: none;這個就是直接清楚黑點的樣式了

（6）拓展思考：

如何去修改li標籤的其餘樣式呢？

咱們知道li標籤是存在於ol或者ul裏面的

咱們能夠在裏面設置屬性

list-style-type: square;

（7）參考文獻：

博客

b站視頻

（8）更多討論：

Q1：提問人：問題？

1.京東官網的哪部分是用了ul標籤去作的呢？

A1：答

1.官網左邊的物品欄和導航欄部分都是用ul標籤作的

Q2：提問人：問題？

2.還有什麼網站是用到了Ul標籤和定義列表dl標籤呢？

A2：答

2.淘寶網站，和噹噹網都有的，只要有導航欄的地方

Q3：提問人：問題？

3.dt、dd都是容器級標籤，想放什麼均可以因此用什麼標籤是由什麼來決定的呢？

A3：答

3.而是語義（語義本質上是結構）。

（9）鳴謝：

感謝王剛師兄，此教程是在他們以前技術分享的基礎上完善而成。

（10）結束語：

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~