網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景3-1 列表及其應(yīng)用

網(wǎng)頁(yè)設(shè)計(jì)與制作列表元素講解授課教師：胡文利JavaScriptCSSHTMLHTML目錄CONTENTS12學(xué)習(xí)目標(biāo)知識(shí)講解3小結(jié)學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01無(wú)序列表學(xué)習(xí)目標(biāo)03自定義列表學(xué)習(xí)目標(biāo)02有序列表02知識(shí)點(diǎn)講解1、認(rèn)識(shí)列表元素在瀏覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常看到網(wǎng)頁(yè)中具有相關(guān)連的信息會(huì)以列表的形式排在一起，有的是以阿拉伯?dāng)?shù)字排列，有的是以某種小圖標(biāo)排列，以此來(lái)增加內(nèi)容的條理性和邏輯性。HTML中，提供了如下3種列表元素：A無(wú)序列表B有序列表C自定義列表2、無(wú)序列表無(wú)序列表，即列表的項(xiàng)目是沒(méi)有順序的。無(wú)序列表是塊級(jí)元素，它定義了列表的每一項(xiàng)前綴均顯示為圖標(biāo)符號(hào)，在HTML中使用<ul>標(biāo)簽來(lái)定義無(wú)序列表，并結(jié)合使用<li>標(biāo)簽定義每一個(gè)列表項(xiàng)。語(yǔ)法格式如下：<ul><li></li>…</ul>語(yǔ)法解釋?zhuān)涸谏厦娴恼Z(yǔ)法中，<ul></ul>標(biāo)記用于定義無(wú)序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。3、無(wú)序列表案例運(yùn)行效果4、無(wú)序列表常用屬性無(wú)序列表是一個(gè)沒(méi)有特定順序的列表項(xiàng)的集合，也稱(chēng)為項(xiàng)目列表。在無(wú)序列表中，各個(gè)列表之間屬于并列關(guān)系，沒(méi)有先后順序之分，它們之間以一個(gè)項(xiàng)目符合來(lái)標(biāo)記。使用無(wú)序列表標(biāo)簽ul的type屬性，用戶可以指定出現(xiàn)在列表項(xiàng)前的項(xiàng)目符號(hào)的樣式，主要有：disc（實(shí)心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（實(shí)心方塊）、none（無(wú)項(xiàng)目符號(hào)）。type屬性的取值如下表所示：屬性屬性值描述typedisc前導(dǎo)符為●（默認(rèn)前導(dǎo)符）circle前導(dǎo)符為○square前導(dǎo)符為■5、無(wú)序列表屬性使用案例運(yùn)行效果6、有序列表有序列表，即列表的項(xiàng)目是有順序的。有序列表是塊級(jí)元素，它定義了列表的每一項(xiàng)前綴是某一種序號(hào)（默認(rèn)阿拉伯?dāng)?shù)字），和無(wú)序列表的使用方法是一樣的。在HTML中使用<ol>標(biāo)簽來(lái)定義有序列表，并結(jié)合使用<li>標(biāo)簽定義列表項(xiàng)。語(yǔ)法格式如下：<ol><li></li>…</ol> 語(yǔ)法解釋?zhuān)涸谏厦娴恼Z(yǔ)法中，<ol></ol>標(biāo)記用于定義有序列表，<li></li>為具體的列表項(xiàng)，和無(wú)序列表類(lèi)似，每對(duì)<ol></ol>中也至少應(yīng)包含一對(duì)<li></li>。7、有序列表案例運(yùn)行效果列表項(xiàng)前面的編號(hào)我們稱(chēng)為前導(dǎo)符，默認(rèn)情況下，前導(dǎo)符是從1開(kāi)始的阿拉伯?dāng)?shù)字。前導(dǎo)符可通過(guò)有序列表的type屬性來(lái)修改。8、有序列表常用屬性type屬性的取值如下表所示：屬性屬性值描述type1前導(dǎo)符為數(shù)字1、2、3…，默認(rèn)值a前導(dǎo)符為小寫(xiě)字母a、b、c…A前導(dǎo)符為大寫(xiě)字母A、B、C…i前導(dǎo)符為小寫(xiě)羅馬數(shù)字i、ii、iii…I前導(dǎo)符為大寫(xiě)羅馬數(shù)字I、Ⅱ、Ⅲ…9、有序列表屬性使用案例運(yùn)行效果10、自定義列表自定義列表，在網(wǎng)頁(yè)的一些導(dǎo)航中通常會(huì)使用自定義列表實(shí)現(xiàn)，自定義列表可以理解是標(biāo)題及其內(nèi)容的組合，類(lèi)似于有問(wèn)有答的貼吧形式。在HTML中，自定義列表以<dl>標(biāo)簽開(kāi)始，每個(gè)自定義列表標(biāo)題以<dt>開(kāi)始，每個(gè)自定義列表標(biāo)題的描述以<dd>開(kāi)始。其中父元素為dl元素，可以包含一個(gè)或多個(gè)dt元素，以及一個(gè)或多個(gè)dd元素。語(yǔ)法格式如下：<dl><dt></dt><dd></dd>……</dl>在上面的語(yǔ)法中，<dl></dl>標(biāo)記用于指定定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中，一對(duì)<dt></dt>標(biāo)記用于指定術(shù)語(yǔ)名詞，<dd></dd>標(biāo)記用于進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即可以對(duì)一個(gè)名稱(chēng)進(jìn)行多項(xiàng)解釋。11、自定義列表案例11、自定義列表案例運(yùn)行效果【練一練】你知道四座古代著名樓閣的四大名樓是指哪四個(gè)嗎？【練一練】中國(guó)抗疫戰(zhàn)中的四大英雄是哪四位？【練一練】北京冬奧會(huì)小知識(shí)你知道嗎？03小結(jié)小結(jié)本節(jié)內(nèi)容講解了列表種類(lèi)及其屬性的設(shè)置，通過(guò)專(zhuān)業(yè)知識(shí)與中國(guó)傳統(tǒng)文化、防疫抗疫情英雄、冬奧小知識(shí)的練習(xí)，掌握在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)