HTML提供了3種列表模式:1、有序列表,使用“<ol>”和“<li>”標簽創(chuàng)建,有序列表之間的內容有先后順序之分;2、無序列表,使用“<ul>”和“<li>”標簽創(chuàng)建;3、定義列表,使用“<dl>”、“<dt>”和“<dd>”標簽創(chuàng)建。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML 列表(List)可以將若干條相關的內容整理起來,讓內容看起來更加有條理。在列表內您可以放置文本、圖像、鏈接等,也可以在一個列表中定義另一個列表(列表嵌套)。
HTML 為我們提供了三種不同形式的列表:
- 有序列表,使用 <ol> + <li> 標簽
- 無序列表,使用 <ul> + <li> 標簽
- 定義列表,使用 <dl> + <dt> + <dd> 標簽
1. 有序列表
在 HTML 中, <ol> 標簽用來表示有序列表。有序列表之間的內容有先后順序之分,例如菜譜中的一系列步驟,這些步驟需要按順序完成,這時就可以使用有序列表。
我們來看一個簡單的實例:
<!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> 標簽:
- <ol> 是 order list 的簡稱,表示有序列表,它可以為列表的每一項進行編號,默認從數(shù)字 1 開始。
- <li> 是 list item 的簡稱,表示列表的每一項,<ol> 中有多少個 <li> 就表示有多少條內容。列表項中可以包含文本、圖片、鏈接等,甚至還可以是另外一個列表。
注意,<ol> 一般和 <li> 配合使用,不會單獨出現(xiàn),而且不建議在 <ol> 中直接使用除 <li> 之外的其他標簽。
2. 無序列表
HTML 使用 <ul> 標簽來表示無序列表。無序列表和有序列表類似,都是使用 <li> 標簽來表示列表的每一項,但是無序列表之間的內容沒有順序。例如,早飯的種類不需要表明順序,這時就可以使用無序列表。
我們來看一個簡單的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML無序列表</title> </head> <body> <p>早餐的種類:</p> <ul> <li>雞蛋</li> <li>牛奶</li> <li>面包</li> <li>生菜</li> </ul> </body> </html>
瀏覽器運行結果如圖所示:
無序列表需要使用 <ul> 和 <li> 標簽:
- <ul> 是 unordered list 的簡稱,表示無序列表。
- <ul> 和 <ol> 中的 <li> 一樣,都表示列表中的每一項。默認情況下,無序列表的每一項都使用
●
符號表示。
注意,<ul> 一般和 <li> 配合使用,不會單獨出現(xiàn),而且不建議在 <ul> 中直接使用除 <li> 之外的其他標簽。
3. 定義列表
在 HTML 中,<dl> 標簽用于創(chuàng)建定義列表。定義列表由標題(術語)和描述兩部分組成,描述是對標題的解釋和說明,標題是對描述的總結和提煉。
定義列表具體語法格式如下:
<dl> <dt>標題1<dt> <dd>描述文本2<dd> <dt>標題2<dt> <dd>描述文本2<dd> <dt>標題3<dt> <dd>描述文本3<dd> </dl>
定義列表需要使用 <dl>、<dt> 和 <dd> 標簽:
- <dl> 是 definition list 的簡稱,表示定義列表。
- <dt> 是 definition term 的簡稱,表示定義術語,也就是我們說的標題。
- <dd> 是 definition description 的簡稱,表示定義描述 。
可以認為 <dt> 定義了一個概念(術語),<dd> 用來對概念(術語)進行解釋。
注意,<dt> 和 <dd> 是同級標簽,它們都是 <dl> 的子標簽。一般情況下,每個 <dt> 搭配一個 <dd>,一個 <dl> 可以包含多對 <dt> 和 <dd>。
我們來看一個簡單的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML定義列表</title> </head> <body> <dl> <dt>HTML</dt> <dd>HTML 是一種專門用來開發(fā)網(wǎng)頁的標記語言,您可以轉到《<a href="http://www.php.cn/course/list/11.html" target="_blank">HTML教程</a>》了解