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

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

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

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

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

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