更新時間:2022-04-18 來源:黑馬程序員 瀏覽量:
無序列表是網(wǎng)頁中最常用的列表,之所以稱為“無序列表”,是因為其各個列表項之間為并列關(guān)系,沒有順序級別之分。例如傳智播客官網(wǎng)的導(dǎo)航欄結(jié)構(gòu)清晰,各列表項之間(如“網(wǎng)頁平面”與“java培訓(xùn)”)排序不分先后,這個導(dǎo)航欄就可以看做一個無序列表。定義無序列表的基本語法格式如下:
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
在上面的語法中,<ul></ul>標(biāo)記用于定義無序列表,<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中,用于描述具體的列表項,每對<ul></ul>中至少應(yīng)包含一對<li></li>。值得一提的是,<ul>和<li>都擁有type屬性,用于指定列表項目符號。在無序列表中type屬性的常用值有三個,它們呈現(xiàn)的效果不同,具體如下圖的表格所示。
表-無序列表的常用type屬性值
解了無序列表的基本語法和type屬性,下面來創(chuàng)建一個無序列表:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無序列表</title> </head> <body> <h2>衣服</h2> <ul type="circle"> <!--對ul應(yīng)用type=circle--> <li>T恤</li> <li>連衣裙</li> <li>褲子</li> </ul> <h2>傳智播客學(xué)科</h2> <ul> <li>網(wǎng)頁平面</li> <!--不定義type屬性--> <li type="square">Java</li> <!--對li應(yīng)用type=square--> <li type="disc">PHP</li> <!--對li應(yīng)用type=disc--> </ul> </body> </html>
創(chuàng)建了兩個無序列表,并通過type屬性為它們定義列表項目符號。在第一個無序列表中,對標(biāo)記應(yīng)用type屬性,在第二個列表中對其子列表項應(yīng)用type屬性。運(yùn)行上述demo。
無序列表效果展示
可以看出,不定義type屬性時,列表項目符號顯示為默認(rèn)的“●”,為<ul>或<li>定義type屬性時,列表項目符號則按定義的樣式顯示。
注意:
1、不贊成使用無序列表的type屬性,一般通過CSS樣式屬性替代。
2、與之間相當(dāng)于一個容器,可以容納所有的元素。但是中只能嵌套,直接在標(biāo)記中輸入文字的做法是不被允許的。