- HTML+CSS網頁開發技術精解
- 吳玉中等編著
- 3766字
- 2018-12-30 14:34:30
第4章 列表的建立和使用
學前必讀：
列表元素是網頁設計中使用頻率非常高的元素，在傳統網站設計上，無論是新聞列表，還是產品或是其他內容，均需要以列表的形式來體現。通過列表標記的使用能使這些內容在網頁中條理清晰、層次分明、格式美觀地表現出來，本章將重點介紹列表標記的使用。
本章重點：
● 使用無序列表
● 使用有序列表
● 列表條目元素
● 定義列表元素
4.1 使用無序列表
所謂無序列表是指列表中的各個元素在邏輯上沒有先后順序的列表形式。在無序列表中，各個列表項之間沒有順序級別之分，它通常使用一個項目符號作為每個列表項的前綴。無序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>幾個標記和type屬性。
4.1.1 無序列表標記ul
無序列表（Unordered List）是一個沒有特定順序的相關條目（也稱為列表項）的集合，在無序列表中，各個列表項之間屬并列關系，沒有先后順序之分。ul用于設置無序列表，各個列表之間沒有順序級別之分。
基本語法：
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</ul>
語法介紹：
在該語法中，<ul>和</ul>標記表示無序列表的開始和結束，<li>則表示一個列表項的開始。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無序列表標記</title>
</head>
<body>
<p>
<b>云南特產</b>
</p>
<ul>
<li>大理 木雕工藝</li>
<li>大理 雕梅燉梅</li>
<li>怒江 獨龍毯</li>
<li>羅平小黃姜</li>
<li>猴頭菇</li>
<li>麗江 雞粽</li>
<li>麗江 銅器< /li>
<li>麗江 蜂糖梨</li>
</ul>
</body>
</html>
代碼分析：
在代碼中，加粗的標記用于設置無序列表，在瀏覽器中瀏覽效果如圖4.1 所示，可以看到列表之間沒有順序之分。
圖4.1 設置無序列表
提示：不能將數字列表作為一個無序列表的一部分或附屬列表，卻能夠使用嵌套列表項產生于數字列表項的下一層中。
4.1.2 無序列表的類型type
默認情況下，無序列表的項目符號是●，type屬性規定列表的項目符號的類型，避免列表符號的單調。
基本語法：
<ul type="符號類型">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</ul>
語法介紹：
在該語法中，無序列表其他的屬性不變，type屬性則決定了列表項開始的符號。它可以設置的值有3個，如表4.1所示。
表4.1 無序列表的序號類型
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設置無序列表的類型</title>
</head>
<body>
<p>
<b>云南特產</b>
</p>
<ul type="square">
<li>大理木雕工藝</li>
<li>大理雕梅燉梅</li>
<li>怒江 獨龍毯</li>
<li>羅平小黃姜</li>
<li>猴頭菇</li>
<li>麗江 雞粽</li>
<li>麗江 銅器< /li>
<li>麗江 蜂糖梨</li></ul>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記為設置無序列表類型為方塊，在瀏覽器中預覽可以看到效果，如圖4.2所示。
圖4.2 無序列表類型為方塊
4.1.3 菜單列表標記menu
<menu>標簽可以定義一個菜單列表。菜單列表在瀏覽器中的顯示效果和無序列表是相同的，menu標簽是成對出現的，以<menu>開始，</menu>結束。
基本語法：
<menu>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</menu>
語法介紹：
在該語法中，<menu>和</menu>標志著菜單列表的開始和結束。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜單列表標記</title>
</head>
<body>
<b>民族風情</b>
<menu>
<li>云南旅游布依族</li>
<li>云南旅景頗族</li>
<li>云南旅游瀘沽湖介紹</li>
<li>云南旅游傣族潑水節</li>
<li>石寶山歌會</li>
<li>普米族節日</li>
</menu>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是設置菜單列表，在瀏覽器中預覽效果，如圖4.3所示。
圖4.3 菜單列表
4.1.4 目錄列表dir
目錄列表用于顯示文件內容的目錄大綱，通常用于設計一個壓縮窄列的列表，用于顯示一系列的列表內容，例如字典中的索引或單詞表中的單詞等。列表中每項至多只能有20個字符。通過<dir>和<li>標記建立目錄列表。
基本語法：
<dir>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</dir>
語法介紹：
在該語法中，<dir>和</dir>標志著目錄列表的開始和結束。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目錄列表</title>
</head>
<body>
<p>列表</p>
<dir>
<li>無序列表</li>
<li>有序列表</li>
<li>目錄列表</li>
</dir>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記為設置目錄列表，在瀏覽器中預覽，可以看到目錄列表的效果，如圖4.4所示。
圖4.4 目錄列表效果
4.2 使用有序列表
有序列表使用編號而不是項目符號來編排項目。列表中的項目采用數字或英文字母開頭，通常各項目間有先后的順序性。在有序列表中，主要使用<ol>和<li>兩個標記以及type和start屬性。
4.2.1 有序列表標記ol
有序列表中各個列表項使用編號排列，列表中的項目有先后順序，一般采用數字或字母作為順序號。
基本語法：
<ol>
<li>有序列表項</li>
<li>有序列表項</li>
<li>有序列表項</li>
<li>有序列表項</li>
<li>有序列表項</li>
…
</ol>
語法說明：
在該語法中，<ol>和</ol>標記標志著有序列表的開始和結束，而<li>和</li>標記表示這是一個列表項。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表標記</title>
</head>
<body> <b>各項工作也呈現出蒸蒸日上的好勢頭。主要表現在以下幾個方面：</b>
<ol>
<li>是爭創一流實現新突破。</li>
<li>是服務中心取得新成效。</li>
<li>是干部素質實現新提高。</li>
<li>是機關形象實現新改觀。</li>
</ol>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是有序列表標記，在瀏覽器中預覽，可以看到有序列表的序號，如圖4.5所示。
4.2.2 有序列表的類型type
在有序列表的默認情況下，使用數字序號作為列表的開始，可以通過type屬性將有序列表的類型設置為英文或羅馬字母。
圖4.5 有序列表效果
基本語法：
<ol type="序號類型">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</ol>
語法說明：
有序列表的序號類型如表4.2所示。
表4.2 有序列表的序號類型
實例說明：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表的類型</title>
</head>
<body>
<b>各項工作也呈現出蒸蒸日上的好勢頭。主要表現在以下幾個方面：</b>
<ol type="a">
<li>是爭創一流實現新突破。</li>
<li>是服務中心取得新成效。</li>
<li>是干部素質實現新提高。</li>
<li>是機關形象實現新改觀。</li>
</ol>
</body>
</html>
在代碼中，加粗的代碼標記將有序列表的序號類型設置為“a”，表示使用小寫英文字母編號，在瀏覽器中瀏覽，效果如圖4.6所示。
圖4.6 設置有序列表的類型
提示：羅馬數字不適合于數字較大的項目編號，不僅顯示空間需要調整，而且一般用戶很難直觀地把羅馬數字同阿拉伯數字聯系起來，因此大小寫羅馬數字編號一般用在20以內的編號中。
4.2.3 有序列表的起始數值start
在默認的情況下，有序列表從數字1開始記數，這個起始值通過start屬性可以調整，并且英文字母和羅馬字母的起始值也可以調整。
基本語法：
<ol start="起始數值">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
…
</ol>
代碼介紹：
在該語法中，起始數值只能是數字，但是同樣可以對字母和羅馬數字起作用。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表的起始數值</title>
</head>
<body>
<b>各項工作也呈現出蒸蒸日上的好勢頭。主要表現在以下幾個方面：</b>
<ol type="a" start="3">
<li>是爭創一流實現新突破</li>
<li>是服務中心取得新成效</li>
<li>是干部素質實現新提高</li>
<li>是機關形象實現新改觀</li>
</ol>
</body>
</html>
代碼分析：
在代碼中，加粗的代碼標記將有序列表的起始數值設置為從第3個小寫英文字母開始，在瀏覽器中瀏覽，效果如圖4.7所示。
圖4.7 設置有序列表的起始數值
4.3 列表條目元素<li>
除了對列表標記<ol></ol>進行屬性設置外，我們還可以對列表項標記<li></li>進行屬性設置。
4.3.1 項目符號的類型屬性type
使用列表項屬性標記<li></li>的type屬性，可以指定單個列表項的符號或編號，在列表標記<ol></ol>的type屬性和列表項標記<li></li>的type屬性發生沖突的情況下，所指定的單個列表項遵循<li></li>的type屬性進行顯示。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>項目符號的類型屬性</title>
</head>
<body>
<p><strong>享受待遇：</strong>
<ol type="A">
<li>終身享受一流的國際化專業銷售、管理等各項培訓；</li>
<li type="1">底薪+傭金+獎金+管理津貼+長期服務獎等多達20項收入+旅游等；</li>
<li>一旦錄用，將享受完善的福利待遇（意外保險、醫療保險等）；</li>
<li>廣闊的發展空間，公平、公開、透明的晉升制度。</li>
</ol>
<br />
</body>
</html>
代碼分析：
在代碼中，加粗的代碼標記type="1"，將第二個列表項的樣式變為阿拉伯數字“2”，在瀏覽器中瀏覽，效果如圖4.8所示。
圖4.8 項目符號的類型
4.3.2 條目編號屬性value
4.3.1節列表項標記的type屬性只能改變當前列表項的符號或編號的樣式，并不會改變其值的大小，而使用列表項標記<li></li>的Value屬性，可以改變當前列表項的編號大小，并會影響其后所有列表項的編號大小，但該屬性只適用于有序列表。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>條目編號屬性</title>
</head>
<body>
<p><strong>享受待遇：</strong>
<ol type="A">
<li>終身享受一流的國際化專業銷售、管理等各項培訓；</li>
<li value="4">底薪+傭金+獎金+管理津貼+長期服務獎等多達20項收入+旅游等；</li>
<li>一旦錄用，將享受完善的福利待遇（意外保險、醫療保險等）；</li>
<li>廣闊的發展空間，公平、公開、透明的晉升制度。</li>
</ol>
<br />
</body>
</html>
代碼分析：
在代碼中，加粗的代碼標記value="4"的值仍需取阿拉伯數字“4”，而不能取大寫英文字母“D”，此時盡管列表類型type="A"，第二個列表項以后從字母“D”開始編寫，在瀏覽器中瀏覽，效果如圖4.9所示。
圖4.9 條目編號屬性
4.4 定義列表元素<dl>
定義列表是一種兩個層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為第二層次，并且不包含項目符號。定義列表也稱為字典列表，因為它與字典具有相同的格式。在定義列表中，每個列表項帶有一個縮進的定義字段，就好像字典對文字進行解釋一樣。通過<dl>、<dt>、<dd>標記建立定義列表。
基本語法：
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
</dl>
語法說明：
<dl></dl>標記用來創建定義列表，<dt></dt>標記用來創建列表中的上層項目，此標記只能在<dl></dl>標記中使用，顯示時<dt></dt>標記定義的內容將左對齊。<dd></dd>標記用來創建列表中的下層項目，此標記也只能在<dl></dl>標記中使用，顯示時<dd></dd>標記定義的內容將相對于<dt></dt>標記定義的內容向右縮進。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定義列表元素</title>
</head>
<body>
<p><strong>公司招聘信息：</strong>
<dl>
<dt>職位要求：</dt>
<dd>女，158CM以上，五官端正，身體健康。</dd>
<dd>有一年以上工作經驗，愛崗敬業，作風正派，無不良嗜好，無犯罪前科。</dd>
<dd>實行8小時工作制，月休4天，本職位一經錄用，公司即提供具有競爭力的薪酬福利待遇。</dd>
<dt>享受待遇：</dt>
<dd>終身享受一流的國際化專業銷售、管理等各項培訓；</dd>
<dd>底薪+傭金+獎金+管理津貼+長期服務獎等多達20項收入+旅游等；</dd>
<dd>一旦錄用，將享受完善的福利待遇（意外保險、醫療保險等）；</dd>
<dd>廣闊的發展空間，公平、公開、透明的晉升制度。</dd>
</dl><br />
<br />
</body>
</html>
代碼分析：
在代碼中，加粗的部分用<dt></dt>標記定義了上層項目“職位要求”和“享受待遇”，并用<dd></dd>標記分別定義了其相應的下層項目，它們之間以縮進的形式使層次清晰，效果如圖4.10所示。
圖4.10 定義列表
4.5 課后習題
1.填空題
（1）無序列表標記<ul>的type屬性可以指定出現在列表前的項目符號的樣式，其取值可以是______、______和______3種。
（2）有序列表標記<ol>的type屬性可以指定出現在列表前的項目編號的樣式，其取值可以是______、______、______、______、______和______5種。
（3）使用有序列表標記的______屬性后，用戶則可以改變編號的起始值，該屬性值是一個______，表示從哪一個數字或字母開始編號。
（4）使用列表項標記<li></li>的______屬性，用戶可以指定單個列表項的符號（對于無序列表而言）或編號（對與有序列表而言）。
（5）使用列表項標記<li></li>的______屬性，可以改變當前列表項的編號大小，并會影響其后所有列表項的編號大小，但該屬性只適用于______中。
2.操作題
根據本章所學的知識，采用有序列表技術編寫出具有如圖4.11所示的運行效果的程序。
圖4.11 列表
- Android Wearable Programming
- ServiceNow Application Development
- Learning Cython Programming（Second Edition）
- GeoServer Cookbook
- Cassandra Design Patterns（Second Edition）
- 網店設計看這本就夠了
- HTML5從入門到精通（第4版）
- 軟件體系結構
- 超簡單：Photoshop+JavaScript+Python智能修圖與圖像自動化處理
- Visual Basic 程序設計實踐教程
- 從零開始學UI：概念解析、實戰提高、突破規則
- HTML5游戲開發實戰
- Getting Started with Windows Server Security
- Python 3.6從入門到精通（視頻教學版）
- Visual FoxPro數據庫程序設計