Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第3章 3.1- 列表

Web前端基礎(chǔ)技術(shù)CSSJSHTML第3章3.1-列表Contents目錄無序列表有序列表列表嵌套定義列表綜合案例1.列表概述列表分類一般作用：簡要的列出數(shù)據(jù)項(xiàng)；局部布局。無序列表有序列表定義列表更多用途【局部布局】：結(jié)合CSS->導(dǎo)航；商品列表2.無序列表(UnOrderList，符號(hào)列表)<ultype=“符號(hào)類型”><litype=“符號(hào)類型”>列表項(xiàng)</li><li>列表項(xiàng)</li>……</ul>ul：列表項(xiàng)容器；除了列表項(xiàng)標(biāo)記，不要放置其他任何標(biāo)記；li：列表項(xiàng)(塊標(biāo)記，容器)，可以放置其他HTML標(biāo)記，如文本、標(biāo)題、段落、圖片等，注意所有這些內(nèi)容必須放在li之間type符號(hào)類型屬性：type=none(無符號(hào))

|disc（實(shí)心圓,默認(rèn)）|circle（空心圓）|square（正方形）語法格式示例：無序列表應(yīng)用-實(shí)現(xiàn)如下效果素材：爬行動(dòng)物飛禽類動(dòng)物魚類動(dòng)物家禽類動(dòng)物<ul><li>爬行動(dòng)物</li><li>飛禽類動(dòng)物</li><li>魚類動(dòng)物</li><li>家禽類動(dòng)物</li></ul><ultype="circle"><li>爬行動(dòng)物</li><li>飛禽類動(dòng)物</li><li>魚類動(dòng)物</li><li>家禽類動(dòng)物</li></ul><ultype="circle"><li>爬行動(dòng)物</li><litype=“square">飛禽類動(dòng)物</li><litype=“square">魚類動(dòng)物</li><li>家禽類動(dòng)物</li></ul>abc3.有序列表(OrderList,編號(hào)列表)<oltype=“編號(hào)類型”start=“數(shù)字”><litype=“編號(hào)類型”value=“數(shù)字”>列表項(xiàng)</li><li>列表項(xiàng)</li>……</ol>ol：列表項(xiàng)容器；除了列表項(xiàng)標(biāo)記，不要放置其他任何標(biāo)記；li：塊標(biāo)記，可以放置其他HTML標(biāo)記，如標(biāo)題、段落等屬性：type=none|1（默認(rèn)，數(shù)字列表）|A|a|I|i單獨(dú)設(shè)置列表項(xiàng)屬性（很少使用，了解）：start，數(shù)字，表示列表項(xiàng)的起始位置；value：當(dāng)前項(xiàng)的起始編號(hào)，注意，將改變后續(xù)編號(hào)。語法格式示例4-2：有序列表應(yīng)用-實(shí)現(xiàn)如下效果---閱讀理解，了解<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ol><oltype="A"start="1"><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ol><oltype="A"start="1"><litype="I"value="2">列表項(xiàng)1(value=2)</li><li>列表項(xiàng)2</li><litype="1"value="1">列表項(xiàng)3(value=1)</li><li>列表項(xiàng)4</li></ol>abc4.嵌套列表任何一個(gè)列表項(xiàng)，都可以包含其他類型的列表(有序/無序列表);注意：只能在列表項(xiàng)LI中嵌套其他列表。列表1（標(biāo)題項(xiàng)）5.定義列表（DefinitionList）<dl><dt>項(xiàng)標(biāo)題</dt><dd>描述項(xiàng)</dd>…<dl>特點(diǎn)：去掉符號(hào)/編號(hào)；標(biāo)題不縮進(jìn)，描述項(xiàng)縮進(jìn)，用以列出一組分類信息dl：定義列表definitionlistdt：標(biāo)題項(xiàng)definitiontitle(term)dd：描述項(xiàng)definitiondata(description)語法格式示例

定義列表的應(yīng)用

<dl><dt>學(xué)校名稱</dt><dd>廣州交通大學(xué)</dd><dt>學(xué)校地址</dt><dd>廣州黃埔區(qū)紅山三路101號(hào)</dd><dt>聯(lián)系電話</dt><dd>lt;/dd><dd>lt;/dd>

<dt>相關(guān)院校</dt><dd>上海海事大學(xué)</dd><dd>大連海事大學(xué)</dd><dd>集美航海學(xué)院</dd></dl>素材學(xué)校名稱廣州交通大學(xué)學(xué)校地址廣州黃埔區(qū)紅山三路101號(hào)聯(lián)系電話020-12345678020-87654321相關(guān)院校上海海事大學(xué)大連海事大學(xué)集美航海學(xué)院練習(xí)：使用嵌套列表（有序/無須均可）和定義列表實(shí)現(xiàn)。思路：每一大的部分都先作為列表項(xiàng)，保留標(biāo)題，在標(biāo)題下插入新列表。練習(xí)時(shí)刻素材樸樸超市是一家30分鐘即時(shí)配送的移動(dòng)互聯(lián)網(wǎng)購物平臺(tái)。蔬菜豆制品類肉禽類豬肉排骨瘦肉豬肚雞肉鴨肉牛肉海鮮水產(chǎn)類樸樸客服全國免費(fèi)熱線:400-777-1313工作時(shí)間：周一~周日8：00-22：00練習(xí)一、填空1.列表有三種類型，分別是_________,________和___________。2.ul是_____________列表標(biāo)記，有序列表的標(biāo)記是_________。3.ul的type屬性表示列表項(xiàng)的符號(hào)類型，取值有______、______、______和______。4.ol中的type屬性表示列表項(xiàng)的編號(hào)類型，start表示起始編號(hào)。5.dl是_______列表，包含子標(biāo)記_______和_________。

二、判斷1.無序列表和有序列表的標(biāo)記之間只能包含列表項(xiàng)標(biāo)記（√）。2.列表項(xiàng)是一個(gè)容器標(biāo)記，可以包含文本、圖片、標(biāo)題和段落等其他標(biāo)記（√）。3.當(dāng)type屬性取值為none時(shí)，有序列表和無序列表效果相同（√）。4.無序列表中的列表項(xiàng)可以使用與其他列表項(xiàng)不同的符號(hào)（√）。5.無序列表中的列表項(xiàng)可以改變當(dāng)前編號(hào)，其后續(xù)的列表