第5章常用Web元素副標(biāo)題教學(xué)目標(biāo)了解特殊符號(hào)的使用方法熟練掌握?qǐng)D像、超鏈接、列表、表格元素的使用方法熟悉figure和iframe元素的使用5.1添加特殊符號(hào)5.2圖像高質(zhì)量的圖片一般用TIFF格式保存，但其圖片體積過大，不太適合網(wǎng)絡(luò)傳輸。不同的圖片格式會(huì)表現(xiàn)出不同的顏色分辨率和顏色標(biāo)準(zhǔn)，當(dāng)然也會(huì)影響其體積的大小。網(wǎng)頁中常用的圖片格式有圖像格式（如GIF、JPEG、PNG）和圖形格式（如SVG）。5.2.1圖像標(biāo)簽一般在網(wǎng)頁設(shè)計(jì)中選擇的圖片盡量控制在20KB以下，如果使用的服務(wù)器足夠好也可以適當(dāng)放寬，如必須選用較大圖片時(shí)，可先將其分成若干小圖片，顯示時(shí)再通過表格將這些小圖片拼合起來。如果在同一文件中多次使用相同的圖片時(shí)，最好使用相對(duì)路徑查找該圖片?；菊Z法：<imgsrc="url"alt="">說明：1）img元素向網(wǎng)頁中嵌入一幅圖像。但從技術(shù)上講，<img>標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像，<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。其中src是其必須的屬性；src屬性的功能是指定圖像源，即圖像的URL路徑；alt屬性規(guī)定圖像的替代文本。2）src屬性用來指定圖像源，即圖像的URL路徑。該路徑可以是相對(duì)路徑，也可以是絕對(duì)路徑。3）alt屬性用于對(duì)圖像信息進(jìn)行描述。如果圖片在Web瀏覽器不支持圖像顯示、用戶關(guān)閉圖像、網(wǎng)速慢還未下載完等情況下無法顯示時(shí)用來替代圖像的說明文字，也是個(gè)必需的屬性。5.2.2圖像的寬高、間距與邊框默認(rèn)情況下，在HTML頁面中顯示的是圖像的原始大小。要顯示自己指定的圖像大小，可以使用CSS的width和height屬性來代替<img>的寬高屬性。使用CSS的邊距margin來代替<img>標(biāo)簽的hspace和vspace屬性，指定圖像的水平間距和垂直間距，默認(rèn)值為0。使用CSS的border屬性來實(shí)現(xiàn)圖片的邊框，默認(rèn)沒有邊框。5.2.3圖像的對(duì)齊方式使用CSS來實(shí)現(xiàn)圖片的垂直對(duì)齊相對(duì)復(fù)雜一點(diǎn)，一定要注意的是圖像的對(duì)齊方式是設(shè)在其塊級(jí)（block）父元素上，不是設(shè)在img本身。5.2.4figure<figure>標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等），比如文檔中插圖，figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不應(yīng)對(duì)文檔流產(chǎn)生影響。figure元素內(nèi)一般還會(huì)用到<figcaption>標(biāo)簽，它定義figure元素的標(biāo)題（caption）。figcaption元素應(yīng)該被置于figure元素的第一個(gè)或最后一個(gè)子元素的位置。5.3超鏈接網(wǎng)頁文件的最大魅力是超越各個(gè)文件的空間，通過超鏈接相互連接構(gòu)成一個(gè)紛繁復(fù)雜的互聯(lián)網(wǎng)世界。超鏈接（hyperlink）是一個(gè)網(wǎng)站的精髓，超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，它是一種允許一個(gè)網(wǎng)頁同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行鏈接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。超文本具有的鏈接能力，層層鏈接相關(guān)文件，這種具有超級(jí)鏈接能力的特性，即稱為超鏈接。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動(dòng)畫等，通過它們可以將網(wǎng)站建設(shè)成一個(gè)豐富多彩的多媒體世界。5.3.1創(chuàng)建超鏈接語法：<ahref=""title=""target="">超鏈接內(nèi)容</a>說明：1）<a>表示一個(gè)鏈接的開始，</a>表示鏈接的結(jié)束。2）href屬性規(guī)定鏈接的目標(biāo)地址，可以鏈接到網(wǎng)頁或其它文件地址，比如一個(gè)pdf等其它文檔。既可以是一個(gè)絕對(duì)地址，也可以是一個(gè)相對(duì)地址。3）target屬性用于指定打開鏈接的目標(biāo)窗口，僅在href屬性存在時(shí)使用，其默認(rèn)方式是原窗口，具體值如下：_blank：在新窗口中打開被鏈接文檔，如無特殊需要請(qǐng)勿濫用。_self：在被點(diǎn)擊的同一框架中打開被鏈接文檔（默認(rèn)）。_parent：在父框架集中打開被鏈接文檔。_top：在窗口主體中打開被鏈接文檔。framename：在指定的框架中打開被鏈接文檔。不再推薦。_self、_parent和_top這三個(gè)值大多數(shù)時(shí)候與iframe一起使用。4）title屬性用于指定指向鏈接時(shí)所顯示的提示信息。5）超鏈接內(nèi)容是指鏈接目標(biāo)資源的文字顯示說明，單擊“超鏈接內(nèi)容”，就會(huì)鏈接到指定URL的資源。1.超鏈接路徑（1）絕對(duì)路徑（2）相對(duì)路徑（3）根路徑2.內(nèi)部鏈接3.外部鏈接所謂外部鏈接，指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其它網(wǎng)站中頁面或其它元素之間的鏈接關(guān)系。這種鏈接的URL地址一般要用絕對(duì)路徑（以http://、ftp://等開頭），要有完整的URL地址。5.3.2鏈接對(duì)象1.圖片鏈接語法：<ahref="url"target=""><imgsrc=""></a>2.書簽鏈接<ahref="#書簽名稱">鏈接標(biāo)題</a><ahref="URL地址#書簽名稱"target="窗口名稱">鏈接標(biāo)題</a><aname="書簽名稱">鏈接內(nèi)容</a>，建議使用：<aid="書簽名稱">鏈接內(nèi)容</a>3.電子郵件鏈接語法：<ahref="mailto:E-mail地址[?subject=郵件主題[&參數(shù)=參數(shù)值]]">鏈接內(nèi)容</a>4.FTP鏈接語法：<ahref="ftp://…/路徑/文件名">鏈接內(nèi)容</a>5.下載文件的鏈接語法：<ahref="url">鏈接內(nèi)容</a>5.3.3網(wǎng)頁鏈接屬性設(shè)置一個(gè)便于記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母：LVHA。實(shí)際上用“就近原則”很好理解，或者你記住正確的順序：a:link、a:visited、a:hover、a:active。5.3.4圖像映射圖像映射就是在圖像上先劃分出不同的區(qū)域，然后定義哪個(gè)目標(biāo)與圖像的哪個(gè)區(qū)域?qū)?yīng)，但單擊圖像的某一區(qū)域，就會(huì)把用戶帶到一個(gè)目標(biāo)，單擊另一區(qū)域，又會(huì)把用戶帶到另外的目標(biāo)。語法：

<imgsrc="URL"usemap="id/name"><mapname="name"id="id"><areashape=""coords=""href="URL"></map>說明：1）shape說明映射區(qū)域的形狀，取值可以是：rect（矩形）、circle（圓形）、poly（多邊形）、default（整個(gè)圖像區(qū)域）。2）coords用于標(biāo)識(shí)映射區(qū)域的邊界。它有四個(gè)“坐標(biāo)”值，分別表示區(qū)域左邊緣距離圖像左邊緣的距離、區(qū)域上邊緣距離圖像上邊緣的距離、區(qū)域右邊緣距離圖像左邊緣的距離、區(qū)域下邊緣距離圖像上邊緣的距離。3）map標(biāo)記符中，name屬性的取值必須與img標(biāo)記符中usemap屬性的取值相同，只是usemap屬性的值前面多了一個(gè)#。5.4列表列表（List）是指在網(wǎng)頁中將相關(guān)資料以條目的形式有序或者無序排列而形成的表。常用的列表有無序列表（ul）、有序列表（ol）和定義列表（dl）三種。另外，還有不太常用的目錄列表（dir）和菜單列表（menu）。5.4.1無序列表無序列表（UnorderedList）是一個(gè)沒有特定順序的列表項(xiàng)的集合，也稱為項(xiàng)目列表基本語法：<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li>

……<li>列表項(xiàng)n</li></ul>語法說明：1）在HTML文件中，可以利用成對(duì)的<ul></ul>標(biāo)記來插入無序列表，中間的列表項(xiàng)（list-items）標(biāo)簽<li></li>用來定義列表項(xiàng)序列。2）使用無序列表標(biāo)簽ul的type屬性（使用CSS的list-style來代替），用戶可以指定出現(xiàn)在列表項(xiàng)前的項(xiàng)目符號(hào)的樣式，其取值以及相對(duì)應(yīng)的符號(hào)樣式如下：Disc、circle、square、none5.4.2有序列表有序列表（OrderedList）又叫編號(hào)列表，它是一個(gè)有特定順序的列表項(xiàng)的集合。在有序列表中，各個(gè)列表項(xiàng)有先后順序之分，它們之間以編號(hào)來標(biāo)記。1.編號(hào)樣式基本語法：<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li>

…… <li>列表項(xiàng)n</li></ol>語法說明：1）在HTML文件中，可以利用成對(duì)的<ol></ol>標(biāo)記來插入有序列表，其中間的列表項(xiàng)標(biāo)記<li></li>用來定義列表項(xiàng)順序。2）有序列表標(biāo)記的type屬性也應(yīng)該用CSS的list-style來代替，用戶可以指定出現(xiàn)在列表項(xiàng)前的項(xiàng)目編號(hào)的樣式，其取值以及相對(duì)應(yīng)的編號(hào)樣式如下：Decimal、lower-alpha、upper-alpha、lower-roman、upper-roman、none2.編號(hào)起始值通常，在指定列表的編號(hào)樣式后，瀏覽器會(huì)從“1”、“a”或“A”、“i”或“I”開始自動(dòng)編號(hào)。而在使用有序列表標(biāo)記的start屬性后，用戶則可改變編號(hào)的起始值。start屬性值是一個(gè)整數(shù)，表示從哪一個(gè)數(shù)字或字母開始編號(hào)。例如，設(shè)置start="3"，則有序列表的列表項(xiàng)編號(hào)將從“3”、“c”、“C”、“ⅲ”或“Ⅲ”開始編號(hào)。3.列表項(xiàng)樣式列表項(xiàng)標(biāo)記<li></li>的type屬性（也請(qǐng)使用CSS來實(shí)現(xiàn)），用戶可以指定單個(gè)列表項(xiàng)的符號(hào)（對(duì)于無序列表而言）或編號(hào)（對(duì)于有序列表而言）。在列表標(biāo)簽<ol>的list-style和列表項(xiàng)標(biāo)簽<li>的list-style發(fā)生沖突的情況下，所指定的單個(gè)列表項(xiàng)遵循<li>的list-style進(jìn)行顯示。4.列表項(xiàng)編號(hào)列表項(xiàng)標(biāo)簽<li>的list-style只能改變列表項(xiàng)的符號(hào)或編號(hào)的樣式，并不會(huì)改變其值的大小。而使用列表項(xiàng)標(biāo)標(biāo)簽<li>的value屬性，可以改變當(dāng)前列表項(xiàng)的編號(hào)大小，并會(huì)影響其后所有列表項(xiàng)的編號(hào)大小。但該屬性只適用于有序列表。5.4.3嵌套列表列表還可以嵌套使用，也就是一個(gè)列表中還可以包含有多層子列表。在網(wǎng)頁文件中，對(duì)于內(nèi)容層次較多的情況，使用嵌套列表不僅使網(wǎng)頁的內(nèi)容布局更加合理美觀，而且使其內(nèi)容看起來更加清晰明了。嵌套的列表可以是無序列表的嵌套，也可以是有序列表的嵌套，還可以是無序列表和有序列表的混合嵌套。5.4.4定義列表在HTML文件中，只要在適當(dāng)?shù)牡胤讲迦?lt;dl></dl>標(biāo)記，即可自動(dòng)生成定義列表（DefinitionList）?；菊Z法：<dl><dt>…</dt>

<dd>…</dd>…<dt>…</dt>

<dd>…</dd>…</dl>語法說明：1）<dl>標(biāo)簽用來創(chuàng)建定義列表。2）dt是用來創(chuàng)建列表中的每個(gè)元素標(biāo)題，它只能在dl元素中使用。<dt>標(biāo)簽定義的內(nèi)容將左對(duì)齊顯示。3）dd用來創(chuàng)建列表元素的內(nèi)容描述，它也只能在dl元素中使用。<dd>標(biāo)簽定義的內(nèi)容將相對(duì)于<dt>標(biāo)簽定義的內(nèi)容向右縮進(jìn)顯示。5.4.5菜單列表菜單列表（MenuList）通常用于顯示一個(gè)簡單的單列列表，一般不做嵌套。目錄列表（DirectoryList）通常用于顯示一個(gè)多列的文件列表，可做嵌套。他們的使用與無序列表類似，并且可以看著是無序列表的一種特殊形式。旱期Web標(biāo)準(zhǔn)不建議使用此兩項(xiàng)列表（menu和dir），但在新的Web標(biāo)準(zhǔn)HTML5中重新定義了menu元素，用于排列表單控件?；菊Z法：<menu>

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

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

…</menu>5.4.6圖像列表除了特定的list-style-type屬性設(shè)置列表符號(hào)的樣式外，利用css（list-style-image）還可以把列表項(xiàng)的符號(hào)設(shè)置成自己喜歡的圖片。基本語法：list-style-image:url|none語法說明：url是指定要載入的圖片路徑，在使用上與插入圖片<img>的用法差不多；none表示不使用圖片式的列表符號(hào)。5.4.7列表符號(hào)位置list-style-position屬性主要是設(shè)置每個(gè)列表項(xiàng)目的符號(hào)或圖片，是否向外凸出。基本語法：list-style-position:inside|outside語法說明：inside表示列表符號(hào)不向外凸出，也可以理解成列表項(xiàng)上的第二行文字與列表符號(hào)對(duì)齊；outside表示列表符號(hào)向外凸出，也是默認(rèn)值。5.5表格表格在網(wǎng)站應(yīng)用中非常廣泛，幾乎所有的Web頁面中都或多或少地采用表格，網(wǎng)頁內(nèi)容多數(shù)都存儲(chǔ)在數(shù)據(jù)庫中，表格用于在網(wǎng)頁上顯示二維表格式數(shù)據(jù)是最佳方式。5.5.1表格元素<table><tr><td><caption><th><thead><tbody><tfoot>1.表格標(biāo)簽在HTML語法中，表格主要通過3個(gè)標(biāo)簽來構(gòu)成：<table>、<tr>、<td>?；菊Z法：<table><tr><td>…</td>…</tr><tr><td>…</td>…</tr>…</table>語法說明：1）<table>代表表格的開始，</table>代表表格的結(jié)束。2）<tr>代表行的開始，</tr>代表行的結(jié)束。3）<td></td>之間是單元格的內(nèi)容，可以是文字，也可以是元素。4）在一個(gè)表格中，<tr>的個(gè)數(shù)代表表格的行數(shù)，每對(duì)<tr></tr>之間<td>的個(gè)數(shù)代表該行單元格數(shù)。2.表格標(biāo)題表格標(biāo)題一般放在表格的上面，是對(duì)表格內(nèi)容的簡單說明，用<caption>標(biāo)簽實(shí)現(xiàn)。<caption>標(biāo)簽必須緊隨<table>標(biāo)簽之后。基本語法：<caption>…</caption>語法說明：<caption>標(biāo)記之間就是標(biāo)題的內(nèi)容。3.表格表頭表頭是指表格的第一行或第一列對(duì)表格內(nèi)容的說明，文字樣式為居中、加粗顯示，通過<th>標(biāo)簽實(shí)現(xiàn)?；菊Z法：<table><tr><th>…</th>…</tr><tr><td>…</td>…</tr>…</table>語法說明：1）<th>表頭標(biāo)記，包含在<tr>標(biāo)記中。2）在表格中，只要把標(biāo)記<td>改成<th>就可以實(shí)現(xiàn)表格的表頭。4.劃分表格結(jié)構(gòu)為了清楚區(qū)分表格結(jié)構(gòu)，將一個(gè)表格分三個(gè)部分在網(wǎng)頁上顯示出來，HTML語言規(guī)定了<thead>、<tbody>、<tfoot>三個(gè)標(biāo)簽分別對(duì)應(yīng)于表格的表首、表主體和表尾?；菊Z法：<thead>…</thead><tbody>…</tbody><tfoot>…</tfoot>5.5.2表格修飾5.5.3設(shè)置表格行屬性5.5.4設(shè)置單元格屬性1.設(shè)置單元格跨行單元格的rowspan屬性可實(shí)現(xiàn)單元格的跨行合并（縱向合并）?；菊Z法：<tdrowspan="">…</td>語法說明：rowspan的值為單元格跨越的行數(shù)。如果創(chuàng)建跨越兩行的單元格（即rowspan="2"），那么在下一行中就不用定義相應(yīng)的單元格，如果創(chuàng)建跨越三行的單元格（即rowspan="3"），那么在下兩行中就不用定義相應(yīng)的單元格，以此類推。2.設(shè)置單元格跨列colspan屬