課時30 無序列表(掌握)

2022-08-18 03:06:10 字數 955 閱讀 9880

1.什麼是列表標籤?

列表標籤的作用:給一堆資料新增列表語義,也就是告訴搜尋引擎,告訴瀏覽器這一堆資料是乙個整體

2.html列表標籤的分類

2.1無序列表(企業開發中用到最多)(unordered list)

2.2有序列表  (企業開發中用的最少)  (ordered list)

2.3定義列表  (企業開發中用的其次多)   (definition list)

3.無序列表作用:

給一堆資料新增列表語義,並且這一堆資料中所有的資料都沒有先後之分

什麼叫有先後之分?

例如:排行榜

什麼叫沒有先後之分?

例如:中國有哪些城市

4.無序列**式

li其實是英文list item的縮寫

list是列表的意思,item是條目的意思,所以結合起來就是列表條目的意思

5.注意點

一定要記住ul標籤是用來給一堆資料新增列表語義的,而不是用來給它們新增小圓點的

因為有序列錶能做的無序列表也能做,如在無序列表中新增序號:

2.ul標籤和li標籤是乙個整體,是乙個組合,所以一般情況下ul標籤和li標籤都是一起出現,不會單個出現,也就是說不會單獨使用乙個ul標籤或者單獨使用乙個li標籤,都是結合在一起使用。

3.由於ul標籤和li標籤是乙個組合,所以ul標籤中不推薦包含其它標籤,也就是說以後你在ul標籤中只會看到li標籤。

這種寫法是不提倡的

新聞列表

商品列表

導航條有人說導航條是橫著的,列表是豎著的,無法出現這種效果,其實是可以的,但是需要用到css,在之間寫

li {

float:left;

background-color:yellow;

width:150px;

height:50px;

text-align:center;

line-height:50px;

無序列表排版

用無序列表排版的一些問題 1.在div套ul時如果div的樣式沒有設寬度,那ul中margin設定就無法生效。div的樣式要設有寬度,內的ul樣式margin才生效 2.在建表項 li 時,預設為垂直排列,但有時會繼承上人樣式,而使其為水平排列。11 為使以垂直排列,應在il樣式中新增顯示為塊 di...

有序列表 無序列表 巢狀列表

無序列表 有序列表 coffee teamilk coffee teamilk 不同型別的有序列表 編號列表 bananas lemons oranges 大寫字母列表 bananas lemons oranges 小寫字母列表 bananas lemons oranges 羅馬數字列表 banan...

前端 13 無序列表

什麼是有序列表?有序列表的作用 給一堆資料新增列表語義,並且這一堆資料中所有的資料都有先後之分 有序列 式 其它用法和ul都差不多,也就是應用場景 注意點都和ul差不多 1.定義列表的作用 1.1給一堆資料新增列表語義 1.2先通過dt標籤定義列表中的所有標題,然後再通過dd標籤給每個標題新增描述資...