什么是無(wú)序列表？怎樣創(chuàng)建無(wú)序列表？

更新時(shí)間:2022-04-18 來(lái)源:黑馬程序員瀏覽量:

無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間為并列關(guān)系，沒(méi)有順序級(jí)別之分。例如傳智播客官網(wǎng)的導(dǎo)航欄結(jié)構(gòu)清晰，各列表項(xiàng)之間(如“網(wǎng)頁(yè)平面”與“java培訓(xùn)”)排序不分先后，這個(gè)導(dǎo)航欄就可以看做一個(gè)無(wú)序列表。定義無(wú)序列表的基本語(yǔ)法格式如下：

<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
......
</ul>

在上面的語(yǔ)法中，<ul></ul>標(biāo)記用于定義無(wú)序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。值得一提的是，<ul>和<li>都擁有type屬性，用于指定列表項(xiàng)目符號(hào)。在無(wú)序列表中type屬性的常用值有三個(gè)，它們呈現(xiàn)的效果不同，具體如下圖的表格所示。

表-無(wú)序列表的常用type屬性值

解了無(wú)序列表的基本語(yǔ)法和type屬性，下面來(lái)創(chuàng)建一個(gè)無(wú)序列表：

<!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>無(wú)序列表</title>
</head>
<body>
<h2>衣服</h2>
<ul type="circle">                   <!--對(duì)ul應(yīng)用type=circle-->
    <li>T恤</li>
    <li>連衣裙</li>
    <li>褲子</li>
</ul>
<h2>傳智播客學(xué)科</h2>
<ul>
        <li>網(wǎng)頁(yè)平面</li>             <!--不定義type屬性-->
        <li type="square">Java</li>  <!--對(duì)li應(yīng)用type=square-->
        <li type="disc">PHP</li>     <!--對(duì)li應(yīng)用type=disc-->
    </ul>
</body>
</html>

創(chuàng)建了兩個(gè)無(wú)序列表，并通過(guò)type屬性為它們定義列表項(xiàng)目符號(hào)。在第一個(gè)無(wú)序列表中，對(duì)標(biāo)記應(yīng)用type屬性，在第二個(gè)列表中對(duì)其子列表項(xiàng)應(yīng)用type屬性。運(yùn)行上述demo。