HTML 列表

TML 支持有序、無序和定義列表:

HTML 列表

有序列表

第一個列表項
第二個列表項
第三個列表項

無序列表

列表項
列表項
列表項

本例演示無序列表。無序列表

有序列表

本例演示有序列表。

HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進(jìn)行標(biāo)記。

無序列表使用 <ul> 標(biāo)簽

<ul>

<li>Coffee</li>

</ul>

瀏覽器顯示如下：

Coffee
Milk

HTML 有序列表

同樣，有序列表也是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li> 標(biāo)簽。

列表項項使用數(shù)字來標(biāo)記。

<ol>

<li>Coffee</li>

</ol>

瀏覽器中顯示如下：

Coffee
Milk

HTML 自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

瀏覽器顯示如下：

Coffee
- black hot drink
Milk
- white cold drink

注意事項 - 有用提示

提示: 列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

更多實例

不同類型的有序列表

本例演示不同類型的有序列表。

不同類型的無序列表

本例演示不同類型的無序列表。

嵌套列表

本例演示如何嵌套列表。

嵌套列表 2

本例演示更復(fù)雜的嵌套列表。

自定義列表

本例演示一個定義列表。

HTML 列表標(biāo)簽

標(biāo)簽	描述
<ol>	定義有序列表
<ul>	定義無序列表
<li>	定義列表項
<dl>	定義定義列表
<dt>	自定義列表項目
<dd>	定義自定列表項的描述

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

篇介紹了html 中文本格式及段落等標(biāo)簽，今天說下列表，什么是列表？它就是一種數(shù)據(jù)排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：

無序列表
有序列表
定義列表

無序列表 —— ul

無序列表在每行開始位置顯示一個符號，語法如下：

<html>
<body>
<h4>一個無序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

顯示效果：

無序列表的符號可以通過在ul 標(biāo)簽上設(shè)置 type 屬性顯示不同的符號，比如：

1、disc —— 實心圓點 (默認(rèn)類型)
2、circle —— 空心圓圈
3、square —— 實心方塊

實例代碼：

<html>
<body>
<h4>一個無序列表：</h4>
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>

顯示效果：

有序列表 —— ol

有序列表使用數(shù)字或字母符號排列，表示文本按一定順序顯示，語法如下：

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

效果如下：

同無序列表一樣，在ol上通過type 屬性設(shè)置使用那種符號表示順序，有以下幾種：

1、1，表示數(shù)字 1、2、3..... （默認(rèn)數(shù)字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....

顯示效果如下：

html代碼：

<!DOCTYPE html>
<html>
<body>
數(shù)字
<ol type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫字母
<ol type="a">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫字母
<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

有序列表還可以通過start 屬性設(shè)置起始數(shù)組，如下：

<ol  start="3">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

顯示效果：

定義列表——dl

不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細(xì)地解釋文字，語法如下：

<html>
<body>
<h2>一個定義列表：</h2>
<dl>
   <dt>計算機(jī)</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>

顯示效果：

第一行<dt>是要解釋的名詞，第二行標(biāo)簽<dd>是解釋文本，會自動縮進(jìn)。

列表的嵌套

以上三種列表是可以嵌套使用的，看如下示例：

<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果：

每嵌套一層，它的符號是不一樣的，你可以試試再嵌套一層看看效果。

當(dāng)然，不同列表類型也可互相嵌套，根據(jù)顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：

<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ol>
      <li>中國茶</li>
      <li>非洲茶</li>
      </ol>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果如下：

總結(jié)

列表是網(wǎng)頁制作中經(jīng)常會使用的標(biāo)簽，比如在制作網(wǎng)頁導(dǎo)航欄菜單時會經(jīng)常用到ul列表，以后會講如何通過ul標(biāo)簽制作一個下拉菜單，感謝您閱讀及關(guān)注，祝你學(xué)習(xí)愉快。

上篇：前端入門——html 文字格式、標(biāo)題與段落

下篇：前端入門——html 超鏈接

序列表

經(jīng)過之前關(guān)于表格、表單的學(xué)習(xí)后，再來學(xué)習(xí)列表，就顯得非常的簡單和容易理解了。

學(xué)習(xí)是構(gòu)建知識體系的過程，沒有形成體系的知識學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時間允許的話，請務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。

列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標(biāo)簽，在這個標(biāo)簽中添加內(nèi)容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁面效果如下：

通過修改<ol>標(biāo)簽中的type屬性我們可以改變序號顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。

step1.點擊"輸入方式"

step2.點擊"特殊符號"后選擇數(shù)字序號，找到羅馬數(shù)字即可

除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語中的片假名表示序號)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁面效果如圖所示：

是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。

有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無序為unorder，無序列表為unorder list，縮寫為ul。

無序列表<ul>標(biāo)簽的type屬性用來控制列表前的標(biāo)記顯示演示。

示例代碼如下：

<h>無序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁面效果如下：

通過圖片我們可知，無序列表默認(rèn)的列表標(biāo)識就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。

與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計算機(jī)</dt> 
  <dd>用來計算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

頁面效果如下：

今天的內(nèi)容結(jié)束了！

列表嵌套列表的測試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！

如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：從程序猿到產(chǎn)品總監(jiān)，我的成長歷程
下一篇：javascript 獲取網(wǎng)頁各種寬度

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 列表

無序列表 —— ul

有序列表 —— ol

定義列表——dl

列表的嵌套

總結(jié)

HTML完整學(xué)習(xí)目錄

您的項目需求