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

更新時間:2022-04-18 來源:黑馬程序員瀏覽量:

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

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

在上面的語法中，<ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對<ul></ul>中至少應(yīng)包含一對<li></li>。值得一提的是，<ul>和<li>都擁有type屬性，用于指定列表項(xiàng)目符號。在無序列表中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屬性為它們定義列表項(xiàng)目符號。在第一個無序列表中，對標(biāo)記應(yīng)用type屬性，在第二個列表中對其子列表項(xiàng)應(yīng)用type屬性。運(yùn)行上述demo。