任務(wù)1：列表教學(xué)視頻

Web前端開發(fā)技術(shù)授課教師：馬蕾第六章列表和超鏈接移動應(yīng)用開發(fā)專業(yè)資源庫列表任務(wù)1目錄contentCSS控制列表任務(wù)2超鏈接任務(wù)3CSS控制超鏈接任務(wù)4綜合案例任務(wù)5目標(biāo)/TARGET1會使用無序列表實(shí)現(xiàn)數(shù)據(jù)展示2會使用有序列表實(shí)現(xiàn)數(shù)據(jù)展示3會使用定義列表實(shí)現(xiàn)數(shù)據(jù)展示4會使用CSS控制列表設(shè)計5會使用超鏈接進(jìn)行頁面設(shè)計6會使用CSS控制超鏈接設(shè)計重點(diǎn)重點(diǎn)重點(diǎn)難點(diǎn)難點(diǎn)思維導(dǎo)圖列表無序列表由<ul>和<li>標(biāo)簽組成CSS控制列表樣式list-style-type屬性，設(shè)置無序和有序列表的項目符號list-style-image屬性，為各個列表設(shè)置項目圖像list-style-position屬性，控制列表項目符號的位置list-style簡寫屬性，控制列表項有序列表定義列表嵌套列表由<ol>和<li>標(biāo)簽組成由<di>、<dt>和<dd>標(biāo)簽組成由前述三種列表組合組成超鏈接外部鏈接href="外部URL"CSS控制超鏈接訪問后超鏈接的狀態(tài)——a:visited{CSS樣式規(guī)則}未訪問時超鏈接的狀態(tài)——a:link{CSS樣式規(guī)則}鼠標(biāo)點(diǎn)擊不動時超鏈接的狀態(tài)——a:active{CSS樣式規(guī)則}s鼠標(biāo)經(jīng)過、懸停時超鏈接的狀態(tài)——a:hover{CSS樣式規(guī)則}內(nèi)部鏈接空鏈接錨點(diǎn)鏈接href="內(nèi)部文件相對路勁"href="#"href="#錨點(diǎn)ID"任務(wù)一列表移動應(yīng)用開發(fā)專業(yè)資源庫能力目標(biāo)1了解列表在網(wǎng)頁中的應(yīng)用以及列表分類2熟悉各種列表標(biāo)簽的基本語法3能夠熟練地創(chuàng)建不同種類的列表4能夠搭配使用列表標(biāo)簽創(chuàng)建嵌套列表什么是列表在制作網(wǎng)頁時，經(jīng)常使用列表。通過列表標(biāo)記，將相關(guān)資料以條目的形式有序或者無序排列。有序列表無序列表列表的分類1無序列表2有序列表3定義列表4嵌套列表列表的分類定義列表1無序列表2有序列表3定義列表4嵌套列表<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>......</ul><ul></ul>標(biāo)簽用于定義無序列表<li></li>標(biāo)簽用于描述具體的列表項

無序列表的各個列表項之間是并列關(guān)系。1無序列表<ul><li>桔子</li><li>香蕉</li><li>蘋果</li></ul>聲明無序列表聲明列表項每對<ul></ul>中至少應(yīng)包含一對<li></li>。1無序列表桔子香蕉蘋果無序列表演示示例2：無序列表的類型取值說明disc項目符號顯示為實(shí)體圓心,默認(rèn)值square項目符號顯示為實(shí)體方心circle項目符號顯示為空心圓1無序列表無序列表的類型type取值<ultype="circle"><li>桔子</li><li>香蕉</li><li>蘋果</li></ul>項目符號設(shè)置為空心圓1無序列表桔子香蕉蘋果無序列表<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol><li></li>標(biāo)簽用于描述具體的列表項<ol></ol>標(biāo)簽用于定義有序列表有序列表的各個列表項之間有先后排列順序。1無序列表<ol><li>桔子</li><li>香蕉</li><li>蘋果</li></ol>聲明列表項聲明有序列表每對<ol></ol>中至少應(yīng)包含一對<li></li>。2有序列表桔子香蕉蘋果有序列表演示示例4：有序列表的類型取值說明1使用數(shù)字作為項目符號A/a使用大寫/小寫字母作為項目符號I/i使用大寫/小寫羅馬數(shù)字作為項目符號2有序列表有序列表的類型type取值<oltype="A"><li>桔子</li><li>香蕉</li><li>蘋果</li></ol>項目符號設(shè)置為大寫字母列表2有序列表桔子香蕉蘋果有序列表定義列表包括列表項以及對列表項的描述<dl><dt>列表項1</dt><dd>列表項1描述</dd><dt>列表項2</dt><dd>列表項2描述</dd></dl><dl></dl>標(biāo)簽用于聲明定義列表<dt></dt>聲明列表項<dd></dd>用于對列表項進(jìn)行解釋和描述3定義列表一個dl可以包含零個或多個dt一個dt可以包含零個或多個dd<dl><dt>水果</dt><dd>榴蓮</dd><dd>山竹</dd><dt>蔬菜</dt><dd>白菜</dd></dl>聲明定義列表聲明列表項定義列表項內(nèi)容3定義列表水果榴蓮山竹蔬菜白菜定義列表<dl><dt>水果</dt><dd>榴蓮</dd><dt>茶葉</dt><dd>分類<ul><li>Greentea<ol><li>China</li><li>Africa</li></ol></li><li>Redtea</li> </ul> </dd></dl>定義列表無序列表有序列表4嵌套列表水果榴蓮茶葉分類Greentea1.China2.AfricaRedtea嵌套列表類型說明項目符號無序列表以<ul>標(biāo)簽來實(shí)現(xiàn)以<li>標(biāo)簽表示列表項通過type屬性設(shè)置項目符號disc（默認(rèn)）、square和circle有序列表以<ol>標(biāo)簽來實(shí)現(xiàn)以<li>標(biāo)簽表示列表項通過type屬性設(shè)置項目順序1(數(shù)字，默認(rèn))、A（大寫字母）、a（小寫字母）、I（大寫羅馬數(shù)字）和i（小寫羅馬數(shù)字）定義類表以<dl>標(biāo)簽是實(shí)現(xiàn)以<dt>標(biāo)簽定義列表項以<dd>標(biāo)簽定義內(nèi)容無項目