2020年8月19日星期三

004 HTML5入門經典 第一篇 基礎知識篇 第4章 让珍珠串起来——列表

申明本站飛宇網 https://feiyetopro.blogspot.com/自網路收集整理之書籍文章影音僅供預覽交流學習研究,其[書籍、文章、影音]情節內容, 評論屬其個人行為, 與本網站無關。版權歸原作者和出版社所有,請在下載 24 小時內刪除,不得用作商業用途;如果您喜歡其作品,請支持訂閱購買[正版]謝謝!





 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"
liPHP部</li
liASP.NET部</li
liC#/li
liJAVA/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>兩個標記以及typestart兩個屬性。
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>名詞1dd>解釋1
dt>名詞2dd>解釋2
dt>名詞3dd>解釋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
dtA:穿越時光術</dt><dd>你的時間都浪費在發呆、胡思亂想、做白日夢:這類型的人個性很被動,想法天馬行空,可是都只限於想而不實際行動。</dd><br/
dtB:隱形透明術</dt><dd>你的時間都浪費在看電視、上網瞎看一通:這類型的人個性內向不喜歡跟人有實際上的接觸,凡事都跟人保持距離,不喜歡成為注目的焦點,寧願躲在一邊自己做自己的事情,但是都跟正事無關。</dd><br/
dtC:神秘讀心術</dt><dd>你的時間都浪費在打牌、講電話、閒聊八卦:這類型的人好奇心很強,喜歡吸收不同的資訊,包括八卦,是一個小型的廣播電臺,而且很喜歡到處哈拉,常常跟朋友講八卦講到電話線都快燒掉了,要注意,你的電話費可能常常會暴增喔!/dd><br/
dtD:青春不老術</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"></fontQuestion:當你趕路累了,一好心的女巫說送你到以下哪或者誰家裡休息</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"></fontAnswer:</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
liSQL Server/li
liMySQL/li
liOracle/li
/ul
/li
li
網頁開發
ul
li
網頁製作
ul
lihtml網站開發</li
liHTML+CSS/li
liCSS/li
/ul
/li
li
語言
ul
liC語言</li
liPHP語言</li
liJAVA語言</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
ddphp開發寶典
ddjava開發寶典
dt
u>網站開發</u
ddHTML網頁製作
dddiv佈局
/dl
/body
/html


4.8.3 ol列表的使用
題目描述
通過<ol>元素創建一個圖書銷量排名清單,並添加選項清單中的內容。再添加一個設置開始值和一個確定按鈕,將開始值填入文字方塊中,按一下確定按鈕,將以文字方塊中的值為清單項起始編號,顯示圖書銷量排名,效果如圖4.16所示。
圖 4.16 <ol>列表的使用
技術指導
ol>元素用於頁面中有序列表的創建,HTML5中新增了兩個屬性為startresversedstart用於自訂列表項開始的編號,resnersed用於設置列表是否進行反向排序。本上機實踐的關鍵代碼參考如下:


html
head
meta charset="utf-8"/
titleol列表的使用</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
liphp開發寶典</li
lijava從入門到實踐</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 留言:

發佈留言