第五章列表與超鏈接

第五章列表與超鏈接列表標(biāo)記超鏈接標(biāo)記列表樣式的控制CSS偽類2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)25.1列表標(biāo)記5.2CSS控制列表樣式5.3超鏈接標(biāo)記5.4鏈接偽類控制超鏈接5.5階段案例-制作新聞列表2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)35.1.1無序列表ul無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。其基本語法格式如下：<ul>

<li>列表項(xiàng)1</li>

<li>列表項(xiàng)2</li>

<li>列表項(xiàng)3</li>

......

</ul>5.1列表標(biāo)記<ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)45.1列表標(biāo)記ul和li都有type屬性無序列表中type屬性的常用值有三個(gè)，它們呈現(xiàn)的效果不同，具體如下表所示。具體實(shí)例example01注意:不贊成使用無序列表的type屬性，一般通過CSS樣式屬性替代。<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)記中輸入文字的做法是不被允許的。type屬性值顯示效果disc（默認(rèn)值）●circle○square■2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)55.1列表標(biāo)記5.1.2有序列表ol有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語法格式如下：<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>......</ol><ol></ol>標(biāo)記用于定義有序列表，<li></li>為具體的列表項(xiàng)，和無序列表類似，每對(duì)<ol></ol>中也至少應(yīng)包含一對(duì)<li></li>。2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)65.1列表標(biāo)記在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性為<li>定義value屬性，它們決定有序列表的項(xiàng)目符號(hào)，其取值和含義如下表所示。具體實(shí)例如example02注意:各瀏覽器對(duì)有序列表的type和value屬性的解析不同。不贊成使用<ol><li>的type、start和value屬性，可通過CSS樣式替代。屬性屬性值描述type

1（默認(rèn)）項(xiàng)目符號(hào)顯示為數(shù)字123…a或A項(xiàng)目符號(hào)顯示為英文字母abcd…或ABC…i或I項(xiàng)目符號(hào)顯示為羅馬數(shù)字iiiiii…或IIIIII…start數(shù)字規(guī)定項(xiàng)目符號(hào)的起始值value數(shù)字規(guī)定項(xiàng)目符號(hào)的數(shù)字2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)75.1列表標(biāo)記5.1.3定義列表dl定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。其基本語法如下：<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>...<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>...</dl>2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)85.1列表標(biāo)記<dl></dl>標(biāo)記用于指定定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中，<dt></dt>標(biāo)記用于指定術(shù)語名詞，<dd></dd>標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即可以對(duì)一個(gè)名詞進(jìn)行多項(xiàng)解釋。example03用于圖文混排example042023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)95.1列表標(biāo)記5.1.4列表的嵌套應(yīng)用在使用列表時(shí)，列表項(xiàng)中可能包含若干子列表項(xiàng)。要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套。example05完成案例1完成案例22023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)105.2CSS控制列表樣式5.2.1list-style-type屬性list-style-type屬性用于控制無序和有序列表的項(xiàng)目符號(hào)，其取值有多種，如下表所示。列表類型屬性值顯示效果無序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯?dāng)?shù)字1、2、3......upper-alpha大寫英文字母A、B、C......lower-alpha小寫英文字母a、b、c......upper-roman大寫羅馬數(shù)字I、II、III......lower-roman小寫羅馬數(shù)字i、ii、iii......<ul>、<ol>公共屬性none不顯示任何符號(hào)2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)115.2CSS控制列表樣式5.2.1list-style-type屬性注意:在實(shí)際網(wǎng)頁制作過程中，各個(gè)瀏覽器對(duì)list-style-type屬性的解析不同。example062023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)125.2CSS控制列表樣式5.2.2list-style-image屬性list-style-image屬性的取值為圖像的url（地址）。使用list-style-image屬性可以為各個(gè)列表項(xiàng)設(shè)置項(xiàng)目符號(hào)圖像，使列表的樣式更加美觀。example072023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)135.2CSS控制列表樣式5.2.3list-style-position屬性list-style-position屬性用于控制列表項(xiàng)目符號(hào)的位置，其取值如下所示：inside：列表項(xiàng)目符號(hào)位于列表文本以內(nèi)。outside：列表項(xiàng)目符號(hào)位于列表文本以外（默認(rèn)值）。example082023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)145.2CSS控制列表樣式5.2.4list-style屬性列表樣式也是一個(gè)復(fù)合屬性:list-style:列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)的位置列表項(xiàng)目圖像;使用復(fù)合屬性list-style時(shí)，通常按上面語法格式中的順序書寫，各個(gè)樣式之間以空格隔開，不需要的樣式可以省略。example09在實(shí)際網(wǎng)頁制作過程中，為了更高效地控制列表項(xiàng)目符號(hào)，通常將list-style的屬性值定義為none，然后通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)不同的列表項(xiàng)目符號(hào)。example10案例32023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)155.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接創(chuàng)建超鏈接用<a></a>標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可，其基本語法格式如下：<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)165.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接href：用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時(shí)它就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，_blank為在新窗口中打開方式exmaple112023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)175.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接注意:暫時(shí)沒有確定鏈接目標(biāo)時(shí)，通常將<a>標(biāo)記的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)18注意創(chuàng)建圖像超鏈接時(shí)，在某些瀏覽器中如（IE），圖像會(huì)添加邊框效果，影響頁面的美觀。example12為了不影響頁面的美觀，通常需要去掉圖像的邊框效果，使圖像正常顯示。將圖像的邊框定義為0，代碼如下所示：<ahref="#"><imgsrc="images/logo.gif"border="0"/></a>2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)195.3超鏈接標(biāo)記5.3.2錨點(diǎn)鏈接通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接分為兩步：使用“<ahref=”#id名“>鏈接文本</a>”創(chuàng)建鏈接文本。使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。example13案例42023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)205.4鏈接偽類控制超鏈接在CSS中，通過鏈接偽類可以實(shí)現(xiàn)不同的鏈接狀態(tài)。偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標(biāo)記名、類名或id名加“：”構(gòu)成。超鏈接標(biāo)記<a>的偽類有4種具體如下表所示。超鏈接標(biāo)記<a>的偽類含義a:link{CSS樣式規(guī)則;}未訪問時(shí)超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標(biāo)經(jīng)過、懸停時(shí)超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標(biāo)點(diǎn)擊不動(dòng)時(shí)超鏈接的狀態(tài)2023/2/4計(jì)算機(jī)學(xué)院web基礎(chǔ)215.4鏈接偽類控制超鏈接注意:同時(shí)使用鏈接的4種偽類時(shí)，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。除了文本樣式之外，鏈接偽類還常常用于控制超鏈接的背景、邊框等樣式。example14案例5案例6202