申明: 本站飛宇網 https://feiyetopro.blogspot.com/。自網路收集整理之書籍、文章、影音僅供預覽交流學習研究,其[書籍、文章、影音]情節內容, 評論屬其個人行為, 與本網站無關。版權歸原作者和出版社所有,請在下載 24 小時內刪除,不得用作商業用途;如果您喜歡其作品,請支持訂閱購買[正版]。謝謝!
第4章 讓珍珠串起來——列表
HTML5入門經典
第一篇 基礎知識篇
第4章 讓珍珠串起來——列表
視頻講解:33分
清單(List)是一種非常有用的資料排列方式,它以條列的模式來顯示資料,使讀者能夠一目了然。在HTML中有3種列表,分別是無序列表(Unordered Lists)、有序列表(Ordered Lists)和定義列表(Definition Lists)。
通過學習本章,讀者可以達到以下學習目的:
❑瞭解3種列表的設計;
❑掌握定義清單標記dl;
❑掌握功能表清單標記menu;
❑掌握目錄清單dir;
❑熟悉列表的高級應用;
❑瞭解列表的嵌套。
4.1 有條不紊——清單標記
列表分為兩種類型,一是有序列表,一是無序列表。前者用專案符號來記錄無序的專案,而後者則使用編號來記錄專案的順序。
所謂有序,指的是按照數位或字母等順序排列清單專案,如圖4.1所示的列表。
圖 4.1 有序列表
所謂無序,是指以●、〇、■等開頭的,沒有順序的清單專案,如圖4.2所示的列表。
圖 4.2 無序列表
清單的主要標記如表4.1所示。
4.2 欠缺規範——無序列表
在無序列表中,各個清單項之間沒有順序級別之分,它通常使用一個專案符號作為每個清單項的首碼。無序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>幾個標記和type屬性。
4.2.1 無序列表標記——ul
無序列表的特徵在於提供一種不編號的清單方式,而在每一個專案文字之前,以符號作為分項標識。
語法:
<ul>
<li>第1項</li>
<li>第2項</li>
...
</ul>
在該語法中,使用<ul></ul>標記表示這一個無序列表的開始和結束,而<li>則表示這是一個列表項的開始。在一個無序列表中可以包含多個列表項。
【例4.1】使用ul標記來顯示無序列表,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.1
<html>
<head>
<title>創建無序列表</title>
</head>
<body>
<font size="+3"
color="#0066FF">程式設計詞典的模式分類:</font><br/><br/>
<ul>
<li>入門模式</li>
<li>初級模式</li>
<li>中級模式</li>
</ul>
</body>
</html>
運行這段代碼,可以看到視窗中建立了一個無序列表,該列表共包含3個列表項,如圖4.3所示。
圖 4.3 創建無序列表
4.2.2 無序列表的類型——type
預設情況下,無序列表的專案符號是●,而通過type參數可以調整無序列表的專案符號,避免清單符號的單調。
語法:
<ul type=符號類型>
<li>第1項</li>
<li>第2項</li>
...
</ul>
在該語法中,無序列表其他的屬性不變,type屬性則決定了清單項開始的符號。它可以設置的值有3個,如表4.2所示。其中disc是預設的屬性值。
【例4.2】使用type類型來設置無序列表,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.2
<html>
<head>
<title>創建無序列表</title>
</head>
<body>
<font size="+3"
color="#00FF99">明日科技部門分佈:</font><br/><br/>
<ul type="circle">
<li>圖書開發部</li>
<li>軟體發展部</li>
<li>品質部</li>
<li>財務部</li>
</ul>
<hr color="#3300FF"
size="2"/>
<font size="+3"
color="#00FFFF">圖書開發部分佈:</font><br/><br/>
<ul type="disc">
<li>PHP部</li>
<li>ASP.NET部</li>
<li>C#</li>
<li>JAVA</li>
</ul>
</body>
</html>
運行這段代碼,可以看到除了預設的清單項符號之外,還顯示了另外一種清單專案符號的效果,如圖4.4所示。
圖 4.4 設置無序列表專案符號
無序列表的類型定義也可以在<li>項中,其語法是<li type=符號類型>,這樣定義的結果是對單個項目進行定義。實例代碼如下:
<html>
<head>
<title>創建無序列表</title>
</head>
<body>
<font size="+3"
color="#00FF99">明日科技部門分佈:</font><br/>
<ul>
<li type="circle">圖書開發部</li>
<li type="disc">軟體發展部</li>
<li type="square">品質部</li>
</ul>
</body>
</html>
運行這段代碼,效果如圖4.5所示。
圖 4.5 設置不同的專案符號
4.3 井井有條——有序列表
有序列表使用編號而不是專案符號來編排專案。清單中的專案採用數位或英文字母開頭,通常各專案間有先後的順序性。在有序列表中,主要使用<ol>和<li>兩個標記以及type和start兩個屬性。
4.3.1 有序列表標記——ol
有序列表中,各個列表項使用編號而不是符號來進行排列。清單中的專案通常都有先後順序性,一般採用數位或者字母作為順序號。
語法:
<ol>
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
...
</ol>
在該語法中,<ol>和</ol>標記標誌著有序列表的開始和結束,而<li>標記表示這是一個清單項的開始。預設情況下,採用數位序號進行排列。
【例4.3】使用ol來設置有序列表,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.3
<html>
<head>
<title>創建有序列表</title>
</head>
<body>
<font size="+4"
color="#CC6600">江雪</font><br/>
<ol>
<li>千山鳥飛絕</li>
<li>萬徑人蹤滅</li>
<li>孤舟蓑笠翁</li>
<li>獨釣寒江雪</li>
</ol>
</body>
</html>
運行這段代碼,可以看到序列前面包含了順序號,如圖4.6所示。
圖 4.6 有序列表
4.3.2 有序列表的類型——type
預設情況下,有序列表的序號是數位的,通過type屬性可以調整序號的類型,例如將其修改成字母等。
語法:
<ol type=序號類型>
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
....
</ol>
在該語法中,序號類型可以有5種,如表4.3所示。
【例4.4】使用type類型來設置有序列表,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.4
<html>
<head>
<title>創建有序列表</title>
</head>
<body>
<font size="+3"
color="#00FFCC">測試:你懂得享受生活嗎?</font><br/><br/>
家裡裝修完畢,又新添置一套高級音響,你會把豪華漂亮的音響放在哪裡?<br/>
<ol type="A">
<li>臥室</li><br/>
<li>客廳</li><br/>
<li>餐廳</li><br/>
<li>浴室</li><br/>
</ol>
<hr size="2"
color="#0099FF">
<ol type="I">
<li>臥室:喜歡擁有自己的私人空間,生活的快樂更多來自於內心世界</li><br/>
<li>客廳:喜歡熱鬧,異性緣佳</li><br/>
<li>餐廳:享受親情,家庭始終放在你的第一位,任何快樂的事,你都希望能和家人一起分享。</li><br/>
<li>浴室:對生活細節極度迷戀,生活即享受的觀點早已深入你心。</li><br/>
</ol>
</body>
</html>
運行這段代碼,可以實現有序列表用不同類型的序號排列,如圖4.7所示。
圖 4.7 有序列表的序號類型
4.3.3 有序列表的起始數值——start
預設情況下,有序列表的清單項是從數位1開始的,通過start參數可以調整起始數值。這個數值可以對數字起作用,也可以作用于英文字母或者羅馬數字。
語法:
<ol start=起始數值>
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
...
</ol>
在該語法中,不論清單編號的類型是數位、英文字母還是羅馬數字,起始數值只能是數位。
【例4.5】使用start來設置有序列表的起始數值,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.5
<html>
<head>
<title>有序列表的起始值</title>
</head>
<body>
<font size="4"
color="#00FFFF">長春的旅遊景點:</font><br/>
<ol start="3">
<li>長春淨月潭森林公園</li><br/>
<li>長春偽皇宮博物館</li><br/>
<li>長影世紀城</li><br/>
</ol>
<hr size="4"
color="#3300FF">
<font size="+3"
color="#0099FF">每週的安排</font><br/>
<ol type="A"
start="4">
<li>週四煮一頓大餐</li><br/>
<li>週五看一場電影</li><br/>
<li>週六回家陪父母吃飯</li><br/>
</ol>
</body>
</html>
運行這段代碼,效果如圖4.8所示,其中顯示了不同的起始編號的效果。
圖 4.8 設置有序列表的起始編號
4.4 定義清單標記——dl
定義清單是一種兩個層次的清單,用於解釋名詞的定義,名詞為第一層次,解釋為第二層次,並且不包含專案符號。定義清單也稱為字典清單,因為它與字典具有相同的格式。在定義列表中,每個列表項帶有一個縮進的定義欄位,就好像字典對文字進行解釋一樣。
語法:
<dl>
<dt>名詞1<dd>解釋1
<dt>名詞2<dd>解釋2
<dt>名詞3<dd>解釋3
...
</dl>
在該語法中,<dl>標記和</dl>標記分別定義了定義清單的開始和結束,<dt>後面就是要解釋的名詞,而在<dd>後面則添加該名詞的具體解釋。作為解釋的內容在顯示時會自動縮進,有些像字典中的詞語解釋。
【例4.6】使用dl來定義清單標記,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.6
<html>
<head>
<title>創建定義列表</title>
</head>
<body>
<font color="#00FFCC">如果可以讓你有一種超能力,你會想要有哪一種?</font><br/>
<ol type="A">
<li>穿越時光術</li><br/>
<li>隱形透明術</li><br/>
<li>神秘讀心術</li><br/>
<li>青春不老術</li><br/>
</ol>
<hr color="#00FFCC"
size="3"/>
<dl>
<dt>A:穿越時光術</dt><dd>你的時間都浪費在發呆、胡思亂想、做白日夢:這類型的人個性很被動,想法天馬行空,可是都只限於想而不實際行動。</dd><br/>
<dt>B:隱形透明術</dt><dd>你的時間都浪費在看電視、上網瞎看一通:這類型的人個性內向不喜歡跟人有實際上的接觸,凡事都跟人保持距離,不喜歡成為注目的焦點,寧願躲在一邊自己做自己的事情,但是都跟正事無關。</dd><br/>
<dt>C:神秘讀心術</dt><dd>你的時間都浪費在打牌、講電話、閒聊八卦:這類型的人好奇心很強,喜歡吸收不同的資訊,包括八卦,是一個小型的廣播電臺,而且很喜歡到處哈拉,常常跟朋友講八卦講到電話線都快燒掉了,要注意,你的電話費可能常常會暴增喔!</dd><br/>
<dt>D:青春不老術</dt><dd>你的時間都浪費在逛街、照鏡子、保養身材:這類型的人非常的自戀,他認為把自己打扮得美美的是一件很開心的事情,而且認為自己真的就是這麼的美麗,永遠保持美貌感覺是很棒的,根據很多統計喜歡自拍、喜歡照鏡子等等,這類型的占蠻多數的。</dd><br/>
</dl>
</body>
</html>
運行這段代碼,可以實現如圖4.9所示的定義列表效果。
圖 4.9 定義列表
4.5 功能表清單標記——menu
功能表清單主要用於設計單列的功能表清單。功能表清單在流覽器中的顯示效果和無序列表是相同的,因此它的功能也可以通過無序列表來實現。
語法:
<menu>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
</menu>
在該語法中,<menu>和</menu>標誌著菜單清單的開始和結束。
【例4.7】使用<menu>標記來設置功能表清單,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.7
<html>
<head>
<title>創建菜單清單</title>
</head>
<body>
<font size="+3"
color="#3300FF">本章中介紹的列表主要包括:</font><br/>
<menu>
<li>無序列表</li>
<li>有序列表</li>
<li>定義列表</li>
<li>菜單清單</li>
<li>目錄清單</li>
</menu>
</body>
</html>
運行這段代碼,效果如圖4.10所示。
圖 4.10 菜單清單的效果
4.6 目錄清單——dir
目錄清單用於顯示檔內容的目錄大綱,通常用於設計一個壓縮窄列的清單,用於顯示一系列的清單內容,例如字典中的索引或單詞表中的單詞等。
語法:
<dir>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項2</li>
……
</dir>
在目錄清單中,使用<dir>作為目錄清單的聲明,使用<li>作為每一個專案的起始標記。
【例4.8】使用<dir>來設置目錄清單,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.8
<html
<head>
<title>建立目錄清單</title>
</head>
<body>
<font size="+2"
color="#FF9900">文學世界:</font>
<dir>
<li>散文精選</li>
<li>小說天地</li>
<li>詩詞歌賦</li>
</dir>
</body>
</html>
運行這段代碼,效果如圖4.11所示。
圖 4.11 目錄清單
4.7 一層又一層——嵌套列表
嵌套清單指的是多於一級層次的清單,一級專案下面可以存在二級項目、三級項目等。項目列表可以進行嵌套,以實現多級項目列表的形式。
4.7.1 定義列表的嵌套
定義清單是一種兩個層次的清單,用於解釋名詞的定義,名詞為第一層次,解釋為第二層次,並且不包含專案符號。
語法:
<dl>
<dt>名詞一</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
<dd>解釋3</dd>
<dt>名詞二</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
<dd>解釋3</dd>
...
</dl>
在定義清單中,一個<dt>標記下可以有多個<dd>標記作為名詞的解釋和說明,以實現定義列表的嵌套。
【例4.9】定義列表的嵌套,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.9
<html>
<head>
<title>定義列表嵌套</title>
</head>
<body>
<font color="#00FF00"
size="+2">古詩介紹</font><br/><br/>
<dl>
<dt>贈孟浩然</dt><br/>
<dd>作者:李白</dd><br/>
<dd>詩體:五言律詩</dd><br/>
<dd>吾愛孟夫子,風流天下聞。<br/>
紅顏棄軒冕,白首臥松雲。<br/>
醉月頻中聖,迷花不事君。<br/>
高山安可仰?徒此挹清芬。<br/>
</dd>
<dt>蜀相</dt><br/>
<dd>作者:杜甫</dd><br/>
<dd>詩體:七言律詩</dd><br/>
<dd>丞相祠堂何處尋?錦官城外柏森森,<br/>
映階碧草自春色,隔葉黃鸝空好音。<br/>
三顧頻煩天下計,兩朝開濟老臣心。<br/>
出師未捷身先死,長使英雄淚滿襟。<br/>
</dd>
</body>
</html>
運行這段代碼,效果如圖4.12所示。
圖 4.12 定義列表的嵌套
4.7.2 無序列表和有序列表的嵌套
最常見的清單嵌套模式就是有序列表和無序列表的嵌套,可以重複使用<ol>和<ul>標記組合實現。
【例4.10】無序列表和有序列表的嵌套,代碼如下。
實例位置:光碟\MR\源碼\第4章\4.10
<html>
<head>
<title>有序與無序列表的嵌套</title>
</head>
<body>
<font color="#3333FF"
size="+2">輕鬆一刻:心理測試</font>
<ul type="square">
<li><font size="+1" color="#FF9900"></font>Question:當你趕路累了,一好心的女巫說送你到以下哪或者誰家裡休息</li>
</ul>
<ol type="1">
<li>紅磨坊</li><br/>
<li>七個小矮人</li><br/>
<li>美人魚</li><br/>
<li>一休</li><br/>
<li>餅屋</li><br/>
<li>茱利葉</li><br/>
<li>附近親戚家</li><br/>
<li>不理她</li><br/>
</ol>
<ul type="square">
<li><font size="+1" color="#FF9900"></font>Answer:</li>
</ul>
<ol type="1">
<li>花心</li><br/>
<li>純情</li><br/>
<li>對愛充滿幻想</li><br/>
<li>心如止水</li><br/>
<li>實在</li><br/>
<li>渴望浪漫悲壯的愛情</li><br/>
<li>順從父母之命媒妁之言</li><br/>
<li>暫時不想談戀愛</li><br/>
</ol
</body>
</html>
運行這段代碼,效果如圖4.13所示。
圖 4.13 有序列表與無序列表的嵌套
4.8 上機實踐
4.8.1 列表之間的嵌套
題目描述
在本章介紹了列表的使用方法,在使用列表時,無論是有無序列表還是有序列表,列表之間都可以嵌套使用,本上機實踐要求實現一個無序列表的嵌套,在實現無序列表的嵌套時,不同層次的清單使用的專案符號不同,效果如圖4.14所示。
圖 4.14 使用列表進行嵌套
技術指導
在實現列表的嵌套時,可以重複使用<ol>和<ul>標記組合實現。例如,要嵌套無序列表可以重複使用<ul>標記來實現。本上機實踐的關鍵代碼參考如下:
<html>
<head>
<title>程式設計詞典</title>
</head>
<body>
<h2>程式設計詞典</h2>
<ul>
<li>
資料庫
<ul>
<li>SQL Server</li>
<li>MySQL</li>
<li>Oracle</li>
</ul>
</li>
<li>
網頁開發
<ul>
<li>
網頁製作
<ul>
<li>html網站開發</li>
<li>HTML+CSS</li>
<li>CSS</li>
</ul>
</li>
<li>
語言
<ul>
<li>C語言</li>
<li>PHP語言</li>
<li>JAVA語言</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
4.8.2 定義列表的使用
題目描述
定義清單是一種兩個層次的清單,用於解釋名詞的定義,名詞為第一層次,解釋為第二層次,並且不包含專案符號,效果如圖4.15所示。
圖 4.15 定義列表的使用
技術指導
在定義清單中,一個<dt>標記下可以有多個<dd>標記作為名詞的解釋和說明。本上機實踐的關鍵代碼參考如下:
<html>
<head>
<title>定義列表</title>
</head>
<body>
<h2>圖書開發</h2>
<dl>
<dt>
<u>程式設計詞典</u>
<dd>php開發寶典
<dd>java開發寶典
<dt>
<u>網站開發</u>
<dd>HTML網頁製作
<dd>div佈局
</dl>
</body>
</html>
4.8.3 ol列表的使用
題目描述
通過<ol>元素創建一個圖書銷量排名清單,並添加選項清單中的內容。再添加一個“設置開始值”和一個“確定”按鈕,將開始值填入文字方塊中,按一下“確定”按鈕,將以文字方塊中的值為清單項起始編號,顯示圖書銷量排名,效果如圖4.16所示。
圖 4.16 <ol>列表的使用
技術指導
<ol>元素用於頁面中有序列表的創建,HTML5中新增了兩個屬性為start和resversed,start用於自訂列表項開始的編號,resnersed用於設置列表是否進行反向排序。本上機實踐的關鍵代碼參考如下:
<html>
<head>
<meta charset="utf-8"/>
<title>ol列表的使用</title>
<link href="Css/css1.css"
rel="stylesheet" type="text/css">
<script
type="text/javascript" async="true">
function
click1(){
var
num=document.getElementById("te").value;
var
div=document.getElementById("list");
div.setAttribute("start",num);
}
</script>
</head>
<body>
<h3>各類圖書銷量排名</h3>
<ol id="list">
<li>程式設計詞典</li>
<li>php開發寶典</li>
<li>java從入門到實踐</li>
</ol>
<h5>設置開始值</h5>
<input type="text"
id="te" class="tt" style="width:60px"/>
<input type="button"
value="確定" class="bb"
onClick="click1();">
</body>
</html>
4.9 小結
本章主要介紹了3種清單,並以實例的形式對3種列表進行了詳細介紹。讀者學習完本章後,可以對HTML的列表有一個詳細的瞭解。熟練地掌握這3種列表,可以對網頁的佈局有一定的幫助。清單是一種非常實用的資料排列方式,它以條列式的模式顯示資料,使使用者能夠一目了然。
4.10 習題
1.下列HTML標記中,屬於非成對標記的是(____)。
A.<li>
B.<ul>
C.<p>
D.<font>
2.下面的標記表示的是無序列表的是(____)。
A.<li>與</li>
B.<d l>與</d l>
C.<u l>與</u l>
D.以上都不是
3.有序列表的起始數值是用(____)表示。
A.type
B.start
C.Lists
D.以上都是
4.下麵是功能表清單標記的是(____)。
A.dl
B.ul
C.menu
D.以上都不是
5.能用於顯示檔內容的目錄大綱標記的是(____)。
A.dl
B.ul
C.dir
D.li



















0 留言:
發佈留言