溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“HTML提供了哪些列表模式”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
HTML提供了3種列表模式：1、有序列表，使用“<ol>”和“<li>”標(biāo)簽創(chuàng)建，有序列表之間的內(nèi)容有先后順序之分；2、無(wú)序列表，使用“<ul>”和“<li>”標(biāo)簽創(chuàng)建；3、定義列表，使用“<dl>”、“<dt>”和“<dd>”標(biāo)簽創(chuàng)建。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML 列表（List）可以將若干條相關(guān)的內(nèi)容整理起來(lái)，讓內(nèi)容看起來(lái)更加有條理。在列表內(nèi)您可以放置文本、圖像、鏈接等，也可以在一個(gè)列表中定義另一個(gè)列表（列表嵌套）。
HTML 為我們提供了三種不同形式的列表：
有序列表，使用 <ol> + <li> 標(biāo)簽
無(wú)序列表，使用 <ul> + <li> 標(biāo)簽
定義列表，使用 <dl> + <dt> + <dd> 標(biāo)簽
在 HTML 中， <ol> 標(biāo)簽用來(lái)表示有序列表。有序列表之間的內(nèi)容有先后順序之分，例如菜譜中的一系列步驟，這些步驟需要按順序完成，這時(shí)就可以使用有序列表。
我們來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML有序列表</title> </head> <body> <p>煮米飯的步驟：</p> <ol> <li>將水煮沸</li> <li>加入一勺米</li> <li>攪拌均勻</li> <li>繼續(xù)煮10分鐘</li> </ol> </body> </html>
有序列表需要使用 <ol> 和 <li> 標(biāo)簽：
<ol> 是 order list 的簡(jiǎn)稱(chēng)，表示有序列表，它可以為列表的每一項(xiàng)進(jìn)行編號(hào)，默認(rèn)從數(shù)字 1 開(kāi)始。
<li> 是 list item 的簡(jiǎn)稱(chēng)，表示列表的每一項(xiàng)，<ol> 中有多少個(gè) <li> 就表示有多少條內(nèi)容。列表項(xiàng)中可以包含文本、圖片、鏈接等，甚至還可以是另外一個(gè)列表。
注意，<ol> 一般和 <li> 配合使用，不會(huì)單獨(dú)出現(xiàn)，而且不建議在 <ol> 中直接使用除 <li> 之外的其他標(biāo)簽。
HTML 使用 <ul> 標(biāo)簽來(lái)表示無(wú)序列表。無(wú)序列表和有序列表類(lèi)似，都是使用 <li> 標(biāo)簽來(lái)表示列表的每一項(xiàng)，但是無(wú)序列表之間的內(nèi)容沒(méi)有順序。例如，早飯的種類(lèi)不需要表明順序，這時(shí)就可以使用無(wú)序列表。
我們來(lái)看一個(gè)簡(jiǎn)單的例子：
復(fù)制純文本復(fù)制
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML無(wú)序列表</title> </head> <body> <p>早餐的種類(lèi)：</p> <ul> <li>雞蛋</li> <li>牛奶</li> <li>面包</li> <li>生菜</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML無(wú)序列表</title> </head> <body> <p>早餐的種類(lèi)：</p> <ul> <li>雞蛋</li> <li>牛奶</li> <li>面包</li> <li>生菜</li> </ul> </body> </html>
瀏覽器運(yùn)行結(jié)果如圖所示：
無(wú)序列表需要使用 <ul> 和 <li> 標(biāo)簽：
<ul> 是 unordered list 的簡(jiǎn)稱(chēng)，表示無(wú)序列表。
<ul> 和 <ol> 中的 <li> 一樣，都表示列表中的每一項(xiàng)。默認(rèn)情況下，無(wú)序列表的每一項(xiàng)都使用●符號(hào)表示。
注意，<ul> 一般和 <li> 配合使用，不會(huì)單獨(dú)出現(xiàn)，而且不建議在 <ul> 中直接使用除 <li> 之外的其他標(biāo)簽。
在 HTML 中，<dl> 標(biāo)簽用于創(chuàng)建定義列表。定義列表由標(biāo)題（術(shù)語(yǔ)）和描述兩部分組成，描述是對(duì)標(biāo)題的解釋和說(shuō)明，標(biāo)題是對(duì)描述的總結(jié)和提煉。
定義列表具體語(yǔ)法格式如下：
<dl> <dt>標(biāo)題1<dt> <dd>描述文本2<dd> <dt>標(biāo)題2<dt> <dd>描述文本2<dd> <dt>標(biāo)題3<dt> <dd>描述文本3<dd> </dl>
定義列表需要使用 <dl>、<dt> 和 <dd> 標(biāo)簽：
<dl> 是 definition list 的簡(jiǎn)稱(chēng)，表示定義列表。
<dt> 是 definition term 的簡(jiǎn)稱(chēng)，表示定義術(shù)語(yǔ)，也就是我們說(shuō)的標(biāo)題。
<dd> 是 definition description 的簡(jiǎn)稱(chēng)，表示定義描述 。
可以認(rèn)為 <dt> 定義了一個(gè)概念（術(shù)語(yǔ)），<dd> 用來(lái)對(duì)概念（術(shù)語(yǔ)）進(jìn)行解釋。
注意，<dt> 和 <dd> 是同級(jí)標(biāo)簽，它們都是 <dl> 的子標(biāo)簽。一般情況下，每個(gè) <dt> 搭配一個(gè) <dd>，一個(gè) <dl> 可以包含多對(duì) <dt> 和 <dd>。
我們來(lái)看一個(gè)簡(jiǎn)單的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML定義列表</title> </head> <body> <dl> <dt>HTML</dt> <dd>HTML 是一種專(zhuān)門(mén)用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，您可以轉(zhuǎn)到《<a href="http://www.kemok4.com/course/list/11.html" target="_blank">HTML教程</a>》了解更多。</dd> <dt>CSS</dt> <dd>CSS 層疊樣式表可以控制 HTML 文檔的顯示樣式，用來(lái)美化網(wǎng)頁(yè)，您可以轉(zhuǎn)到《<a href="http://www.kemok4.com/course/list/12.html" target="_blank">CSS教程</a>》了解更多。</dd> <dt>JavaScript</dt> <dd>JavaScript 簡(jiǎn)稱(chēng) JS，是一種用來(lái)開(kāi)發(fā)網(wǎng)站（包括前端和后臺(tái)）的腳本編程語(yǔ)言，您可以轉(zhuǎn)到《<a href="http://www.kemok4.com/course/list/2.html" target="_blank">JS教程</a>》了解更多。</dd> </dl> </body> </html>
<dt> 和 <dd> 雖然是同級(jí)標(biāo)簽，但是它們的默認(rèn)樣式不同，<dd> 帶有一段縮進(jìn)，而 <dt> 頂格顯示，這樣層次更加分明。
“HTML提供了哪些列表模式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
