這裡是修真院前端小課堂,每篇分享文從
八個方面深度解析前端知識/技能,本篇分享的是:
【html中dl、ul、ol用哪個比較好?】
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;
部落格q1:提問人:問題?
1.京東官網的哪部分是用了ul標籤去做的呢?
a1:答
1.官網左邊的物品欄和導航欄部分都是用ul標籤做的
q2:提問人:問題?
2.還有什麼**是用到了ul標籤和定義列表dl標籤呢?
a2:答
2.****,和當當網都有的,只要有導航欄的地方
q3:提問人:問題?
3.dt、dd都是容器級標籤,想放什麼都可以所以用什麼標籤是由什麼來決定的呢?
a3:答
3.而是語義(語義本質上是結構)。
(9)鳴謝:
感謝王剛師兄,此教程是在他們之前技術分享的基礎上完善而成。
(10)結束語:
HTML中DL UL OL用哪個比較好?
這裡是修真院前端小課堂,每篇分享文從 八個方面深度解析前端知識 技能,本篇分享的是 html中dl ul ol用哪個比較好?ul,ol,dl標籤是css網頁布局中常用的列表元素。列表將具有相似特徵或先後順序的內容按照從上到下的順序排列起來 1.ul標籤 無序列表始於 u l 標籤。每個列表項始於l ...
HTML中dl ul ol用哪個比較好?
ul,ol,dl標籤是css網頁布局中常用的列表元素。列表將具有相似特徵或先後順序的內容按照從上到下的順序排列起來。1.ul標籤 無序列表始於 u l 標籤。每個列表項始於l i標籤,此列專案預設使用粗體圓點 典型的小黑圓圈 進行標記。2.ol標籤 有序列表始於ol標籤,每個列表項始於li標籤,列表...
HTML 列表中的dl,ul,ol區別及應用
無序列表是乙個專案的列表,此列專案使用粗體圓點 通常 進行標記。無序列表始於 ul 標籤。每個列表項始於 li 有序列表也是一列專案,列表專案使用數字進行標記。有序列表始於 ol 標籤。每個列表項始於 li 標籤。自定義列表不僅僅是一列專案,而是專案及其注釋的組合。自定義列表以 dl 標籤開始。每個...