前言
在上一篇文章中，我們學(xué)習(xí)了下圖所示的幾個(gè)文本格式標(biāo)簽，分別是加粗、斜體、下劃線、刪除線、下標(biāo)和上標(biāo)，忘記了的小伙伴可以回去再看看哦。
在網(wǎng)頁中，我們也會(huì)經(jīng)?？吹搅斜恚热缒迟Y訊網(wǎng)頁的信息列表，某購物網(wǎng)頁的商品列表等等。那么在HTML中，列表用什么標(biāo)簽來表示呢？其實(shí)就是列表標(biāo)簽，在HTML中，列表可以大致分為三類，分別是無序列表、有序列表和自定義列表。其實(shí)對應(yīng)到我們經(jīng)常用的word中，就是下圖所示的幾個(gè)列表。
無序列表
無序列表顧名思義就是沒有特定順序的列表，也叫做項(xiàng)目列表，對應(yīng)word中的第一個(gè)列表。無序列表的標(biāo)簽代碼是:
<ul>
<li></li>
</ul>
<ul></ul>標(biāo)簽其實(shí)就是unordered lists的首字母縮寫，表示無順序的列表，當(dāng)你想要使用無序列表的時(shí)候，就可以使用<ul></ul>這個(gè)標(biāo)簽，告訴瀏覽器我這是一個(gè)無序列表，然后再用嵌套在這個(gè)標(biāo)簽里面的子元素<li></li>標(biāo)簽，來表示這個(gè)列表里的每一個(gè)列表項(xiàng)。
這里要注意的是，<ul></ul>這個(gè)標(biāo)簽里面必須且只能包裹<li></li>標(biāo)簽作為它的一級(jí)子元素，就是說ul必須有兒子標(biāo)簽，不然他自己一個(gè)人是不生效的。然后他的兒子標(biāo)簽只能是<li></li>標(biāo)簽，你要是把<p></p>標(biāo)簽當(dāng)做<ul></ul>的兒子標(biāo)簽，這會(huì)導(dǎo)致報(bào)錯(cuò)的。
讓我們來試試看，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>列表標(biāo)簽-水泥學(xué)習(xí)</title>
<meta charset="UTF-8">
</head>
<body>
<h1>無序列表</h1>
<ul>
<li>寶總</li>
<li>汪小姐</li>
<li>玲子</li>
</ul>
</body>
</html>
看看效果：
<li></li>標(biāo)簽相對就沒有那么多規(guī)矩了，它里面可以直接包裹文本，也可以包裹圖片標(biāo)簽、超鏈接標(biāo)簽等，包容性就很強(qiáng)了。
在無序列表中，<li></li>包裹的各個(gè)列表項(xiàng)之間是沒有先后順序的區(qū)分的，而且在每個(gè)列表項(xiàng)前面會(huì)有一個(gè)小符號(hào)，也叫項(xiàng)目符號(hào)。這個(gè)項(xiàng)目符號(hào)是可以通過<ul></ul>標(biāo)簽的type屬性進(jìn)行配置的，但是在html5（就是最新一代的html語法規(guī)范）中已經(jīng)摒棄了這種配置方式，都是使用CSS的list-style來代替。后續(xù)等我們學(xué)習(xí)了css，還可以自定義自己喜歡的項(xiàng)目符號(hào)。
不過這里我們還是簡單了解一下type屬性有哪幾個(gè)可配置的值：
1、disc（實(shí)心圓點(diǎn)）
2、circle（空心圓點(diǎn)）
3、square（實(shí)心方塊）
4、none（無項(xiàng)目符號(hào)）
大家可以跟著下面試試：
有序列表
有序列表就是各個(gè)列表項(xiàng)之間有明確順序的列表，有序列表的標(biāo)簽代碼是：
<ol>
<li></li>
</ol>
<ol></ol>標(biāo)簽和無序列表標(biāo)簽<ul></ul>一樣，里面都必須也只能包裹<li></li>標(biāo)簽來作為其一級(jí)子標(biāo)簽，形成父子標(biāo)簽才可以進(jìn)行使用。嵌套在<ol></ol>標(biāo)簽里面的<li></li>標(biāo)簽是有順序的，一般是利用阿拉伯?dāng)?shù)字進(jìn)行對每個(gè)列表項(xiàng)進(jìn)行排序，每個(gè)<li></li>標(biāo)簽里面也同樣可以包裹文本、圖片、超鏈接等內(nèi)容。
<ol></ol>標(biāo)簽也有幾個(gè)屬性，分別是type、start屬性。type屬性就是用來配置每個(gè)列表項(xiàng)前面的排序序號(hào)，可以設(shè)置為整數(shù)、大小字母和羅馬字母幾種。start屬性是用來重置列表項(xiàng)開始項(xiàng)的序號(hào)值的，比如設(shè)置為“5”，那這個(gè)列表第一項(xiàng)序號(hào)就是從5開始。
有序列表的<li></li>標(biāo)簽也有一個(gè)屬性value可以配置，該屬性是用來重定義某個(gè)列表項(xiàng)的序號(hào)值的。
讓我們來試試看，代碼如下：
<h1>有序列表</h1>
<ol>
<li>至真園</li>
<li>金美林</li>
<li>紅鷺</li>
</ol>
看看效果：
自定義列表
除了有序列表和無序列表外，我們還可以自定義列表。
自定義列表的標(biāo)簽是三件套：
<dl>
<dt></dt>
<dd></dd>
</dl>
自定義列表中的<dl></dl>標(biāo)簽說明這是一個(gè)自定義的列表，然后同樣的這個(gè)標(biāo)簽里面必須也只能跟著<dt></dt>和<dd></dd>，其他的不能直接放在<dl></dl>標(biāo)簽里面。這種列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，其中<dt></dt>是用來定義一個(gè)術(shù)語或者名詞，而<dd></dd>則是對這個(gè)名詞的解釋和說明。
讓我們來試試看，代碼如下：
<h1>自定義列表</h1>
<dl>
<dt>寶總</dt><dd>黃河路牛逼人物</dd>
<dt>汪小姐</dt><dd>27號(hào)外貿(mào)公司職員</dd>
<dt>玲子</dt><dd>夜東京老板娘</dd>
</dl>
看看效果：
嵌套列表
當(dāng)然，列表也可以不中規(guī)中矩，咱們可以循環(huán)嵌套！有序列表里面可以嵌套有序列表，也可以嵌套無序列表。反過來也一樣！嵌套怎么嵌套呢？上面我們說到<li></li>標(biāo)簽包容萬物。所以我們可以在<li></li>標(biāo)簽里面再嵌套一個(gè)列表標(biāo)簽，比如嵌套一個(gè)無序列表<li><ul></ul></li>。
嵌套的列表的列表項(xiàng)的項(xiàng)目符號(hào)都會(huì)默認(rèn)與外層的列表不一樣的，具體大家可以多試試，看看效果。
代碼：
<h1>嵌套列表</h1>
<ul>
<li>這是頂層列表第一項(xiàng)
<ul>
<li>儂試試這個(gè)嵌套</li>
<li>這個(gè)嵌套很靈活</li>
</ul>
</li>
<li>這是頂層列表第二項(xiàng)
<ul>
<li>儂試試這個(gè)嵌套</li>
<li>這個(gè)嵌套很靈活</li>
</ul>
</li>
</ul>
運(yùn)行效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-823184.html
結(jié)語
本篇內(nèi)容介紹了HTML常用的列表標(biāo)簽，大家有空可以跟著敲一敲，自己也可以調(diào)整標(biāo)簽參數(shù)試試看不同的效果，另外有興趣的同學(xué)可以去了解一下css設(shè)置列表布局、格式等，后續(xù)我們也會(huì)針對css進(jìn)行介紹學(xué)習(xí)。文章來源地址http://www.zghlxwxcb.cn/news/detail-823184.html
到了這里，關(guān)于HTML小白入門學(xué)習(xí)-列表標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
