目錄
列表概述
列表類型與標記符號
無序列表
語法：
語法說明：
無序列表標記的 type 屬性及其說明
代碼解釋
有序列表
基本語法
屬性說明
1、列表 o1標記的屬性
2、列表項li標記的屬性
有序列表 o1標記的屬性、值
代碼解釋?
列表嵌套
基本語法：
代碼解釋：
定義列表
基本語法
語法說明
列表概述
列表能對網頁中的相關信息進行合理的布局，將項目有序或無序地羅列在一起，便于用戶瀏覽和操作。列表分為無序列表、有序列表、定義列表、菜單列表和目錄列表共五種。但常用列表有三種，分別是無序列表、有序列表、定義列表。
列表類型與標記符號
| 列表類型 | 標 記 符號 | 備注 |
| 無序列表 | <ul>...</ul> | 常用 |
| 菜單列表 | <menu>...</menu> | 不常用 |
| 目錄列表 | <dir>...</dir> | 不常用 |
| 有序列表 | <ol>...</ol> | 常用 |
| 定義列表 | <dl>...</dl> | 常用 |
無序列表
無序列表ul(Unordered List)標記是成對標記，<ul>是開始標記，</ul>是結束標記兩者之間插入若干個列表項li(List Items)標記，完成無序列表的插入。
語法：
<ul type=""><li type="">項目名稱</li><li type="">項目名稱</1i>……
</ul>語法說明：
ul 標記的 type 屬性有三個值，如表 4-2 所示。列表項l 標記的 type 屬性取值與 ul 標記相同。設置u標記的type 屬性會使其所包含的列表項按統一風格顯示，設置其中某一列表項的 type 屬性值時只會影響它自身的顯示風格，其他列表項按原樣顯示。
無序列表標記的 type 屬性及其說明
| 屬 性值 | 說明 |
| disc | 實現圓形 |
| circle | 空心圓形 |
| square | 實心正方形 |
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>csdn-jingyu飛鳥-web前端-無序列表</title></head></body><h4>Disc項目符號列表:</h4><ul type="disc"><1i>計算機科學與技術專業</li><1i>軟件工程專業</1i><li type="circle">信息管理與信息系統專業</1i></ul><h4>Circle項目符號列表:</h4><ul type-"circle"><1i>計算機科學與技術專業</1i><li type="square">軟件工程專業</li><li>信息管理與信息系統專業</1i></ul><h4>Square 項目符號列表:</h4><ul type="square"><1i>計算機科學與技術專業</1i><1i>軟件工程專業</1i><1i>信息管理與信息系統專業</1i></ul></body>
</html>
代碼解釋
代碼中第 9~13行列表符號為實心圓形，除第12行定義了列表項的type 屬性值為"circle"，所以此項前面顯示空心圓;第15~19?行列表符號為空心圓形，除第 17?行定義了列表項的 type 屬性值為"square"，所以此項前面顯示實心正方形;第 21~25?行列表符號為實心正方形。通過設置type屬性值來改變列表項前面的符號。
有序列表
有序列表 ol(Ordered List)標記是成對標記，以<ol>為起始標記，以</ol>為結束標記，在其間使用<li></i>標記完成有序列表項目的插入。
基本語法
<ol type="" start=""><li type="" value="n">項目名稱</li><li type-"" value="n">項目名稱</li>……
</ol>在<o1>、</ol>標記之間必須使用<li></li>標記來添加列表項值。
屬性說明
1、列表 o1標記的屬性
- type:列表項前面的編號，編號是有序的，有五種不同類型。
- start;定義有序列表起始編號，默認值為1。設置其為非1時，列表項前編號起始位置會發生改變，如 start="5",當 type="1"時,表示從第5個開始編號;當 type="A"表示從E開始編號，以此類推。
2、列表項li標記的屬性
- type:只影響當前列表項前面編號類型，后續列表項前面編號類型依舊遵循o1標記的 type 屬性的取值。
- value:改變當前列表項前編號的值，并影響其后所有列表項編號的值。
有序列表 o1標記的屬性、值
| 屬性 | 值 | 說明 |
| type | 1 | 定義有序列表中列表項前面的編號為數字列表 |
| A | 定義有序列表中列表項前面的編號為大寫字母列表 | |
| a | 定義有序列表中列表項前面的編號為小寫字母列表 | |
| I | 定義有序列表中列表項前面的編號為大寫羅馬字母列表 | |
| i | 定義有序列表中列表項前面的編號為小寫羅馬字母列表 | |
| start | 數值 | 有序列表中列表項的起始數字 |
例如：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>csdn-jingyu飛鳥-Web前端開發-有序列表</title></head><body><h4>1數字編號:</h4><ol><li>計算機科學與技術專業</li><li>軟件工程專業</li><li>信息管理與信息系統專業</li><li>電子信息工程專業</li></ol><h4>A字母編號:</h4><ol type="A"><li>計算機科學與技術專業</li><li>軟件工程專業</li><li>信息管理與信息系統專業</li><li>電子信息工程專業</li></ol><h4>aI混合編號:</h4><ol type="a"><li>計算機科學與技術專業</li><li type="I"value="5">軟件工程專業</li><li>信息管理與信息系統專業</li><li>電子信息工程專業</li><li>電子科學與技術專業</li><li>物聯網工程專業</li></ol></body>
</html>
代碼解釋?
代碼中第 9~14?行實現數字編號的有序列表;第16~21?行實現大寫字母編號的有序列表，第23~30行實現小寫字母和大寫羅馬混合編號的有序列表，由于第25行設置了列表項的 type 屬性為"I"、value 屬性為"5"，致使當前列表項前的編號變成大寫羅馬字母，開始順序為"V"，大寫羅馬字母中第5個正好是V。從第3個列表項開始向后所有列表項的編號順序隨之發生改變，順序從第6個小寫字母f開始向后連續編號，分別是f、g、h、i。
列表嵌套
在一個列表中嵌入另一個列表，作為此列表的一部分，叫列表嵌套。有序列表、無序列表可以混合嵌套，瀏覽器都能夠自動地嵌套排列。
使用列表嵌套不僅使網頁的內容布局更加合理美觀，而且使其內容看起來更加簡潔。列表嵌套的方式分無序列表的嵌套、有序列表的嵌套，還可以是無序列表和有序列表的混合嵌套。列表嵌套不能交叉嵌套。如<ul><ol><ul></ol>就是錯誤的嵌套。當然定義列表也可以與無序列表、有序列表進行嵌套。
基本語法：
<ul> <!-- 無序列表中嵌套有序列表 --><li>項目名稱<ol> <!-- 有序列表中又嵌套無序列表--><li>項目名稱</li><li>項目名稱<ul><li>項目名稱</li><li>項目名稱</li>……</ul></li><li>項目名稱</li>……</ol></li><1i>項目名稱</li><li>項目名稱</li>
</ul>例如：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>有序列表和無序列表嵌套</title></head><body><h4>csdn-jingyu飛鳥-Web前端開發</h4><ol type="1"><li><h4>計算機與電子信息</h4><ol type="A"><li>數據庫</li><li>電子信息</li><li>計算機組成與原理</li><li>計算機基礎<ul type="disc"><li>計算機文化基礎</li><li>公共基礎</li><li>軟件技術基礎</li><li>計算機導論</li><li>計算思維</li></ul></li></ol></li><li><h4>理工</h4></li><li><h4>經管與人文</h4></li></ol></body>
</html>
代碼解釋：
代碼中第 9~28?行定義有序列表，第 11~24?行在有序列表中嵌套了1個有序列表第16~22行又在有序列表中嵌套了1個無序列表。
定義列表
定義列表 dl(definition list)標記是成對標記，以<dl>為首標記，以</dl>為尾標記。定義列表由 dt(definition term)標記和 dd(definition description)標記組成。定義列表中每一個元素的標題使用<dt>...</dt>標記定義;后面跟隨<dd>...</dd>標記，用于描述列表中元素的內容。
基本語法
<d1><dt>項目1</dt><dd>描述1</dd><dd>描述2</dd><dd>描述3</dd>
<dt>項目2</dt><dd>描述1</dd><dd>描述2</dd>…… <dt>項目n</dt>
</dl>語法說明
在網頁中每一個 dt 標記可由一個或多個 dd 標記組成。這兩個標記只能在 l 標記中使用。定義列表的每一列表項前面既沒有符號，也沒有編號。
例如：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>定義列表</title></head><body><h4>定義列表展示聯系人信息</h4><dl><dt>聯系人:</dt><dd>jingyu飛鳥</dd><dd>電話:010-11011011</dd><dd>E-mail-csdn-jingyu飛鳥@sina.com</dd><dt>聯系地址:</dt><dd>csdn-jingyu飛鳥</dd><dt>郵政編碼:</dt><dd>162610</dd></dl></body>
</html>
代碼解釋
代碼中第 9~18?行定義了定義列表，第 10?行、第 14?行、第 16?行定義了列表項的標題，第 11~13?行、第 15?行、第 17?行定義了列表項的描述。
