1.3.1資源路徑所謂路徑就是能夠從當(dāng)前工作目錄找到目標(biāo)資源的目錄結(jié)構(gòu)。分為兩種路徑：一種是絕對路徑，另一種是相對路徑。絕對路徑是完整的URL地址，加上站內(nèi)地址，如果是磁盤文件，則是從盤符開始，一直到資源文件所在的位置所經(jīng)過的所有目錄連接而成。絕對路徑缺乏靈活性，所以一般采用相對路徑進(jìn)行表示。相對路徑有三種不同的表示方法，分別表示不同的路徑（注意下面的路徑表示均不包括雙引號“”）[2]：◆“./”或者“資源名”——表示當(dāng)前目錄；◆“../”——表示上一層目錄；◆“/”——表示根目錄。假定有以下結(jié)構(gòu)的目錄結(jié)構(gòu)，如下圖所示。圖

E盤上的目錄結(jié)構(gòu)在上述目錄結(jié)構(gòu)中，如果Listing1-7.html要訪問Listing1-6.html，則可以使用如下的相對路徑：<ahref="Listing1-6.html">清單1-6</a>或者<ahref="./Listing1-6.html">清單1-6</a>即訪問當(dāng)前目錄中的文件。如果Listing1-7.html要訪問images目錄下的flower.jpg文件，則使用如下的相對路徑：<imgsrc="images/flower.jpg"/>

即訪問當(dāng)前目錄下的某個目錄中的文件。假如在test.html中要訪問E盤根目錄下的images文件夾中的flower.jpg文件，則可以使用如下的相對路徑：<imgsrc="/images/flower.jpg"></img>

即訪問根目錄下某個文件夾中的文件。需要說明的是，無論使用哪種相對路徑，都是以當(dāng)前文件所在的目錄——即工作目錄——為出發(fā)點的！如test.html訪問根目錄下images目錄中的flower.jpg文件，因為test.html文件在E盤的某個目錄下，所以根目錄就是指的E盤根目錄，而不是其他盤中的根目錄。相對路徑對于網(wǎng)頁制作有著十分重要的意義，它涉及能否有效訪問資源的問題。請各位讀者要仔細(xì)理解并掌握這部分內(nèi)容。1.3.2a標(biāo)記HTML本身就是一種超文本鏈接語言，鏈接標(biāo)記a是十分重要的。它可以是文本，也可以是一幅圖像，只要單擊這個文本或圖像就可以鏈接到新的網(wǎng)頁，使得用戶可以在多個相關(guān)的網(wǎng)頁之間進(jìn)行跳轉(zhuǎn)瀏覽。使用a標(biāo)記創(chuàng)建超級鏈接，可以包含3個屬性：href屬性、name屬性和target屬性?！飄ref屬性用于指向鏈接的目標(biāo)地址；★name屬性也用于指向鏈接的目標(biāo)地

址，不過是本網(wǎng)頁內(nèi)部的一個位置，可以稱為錨點；★target屬性用于指標(biāo)目標(biāo)頁面的打開位置target屬性可選的屬性值有以下幾個，如表1-4所示。表1-4target屬性值屬性值說明_self在本窗口打開，為默認(rèn)值。_blank在新的瀏覽器窗口打開。_parent將目標(biāo)文件載入到父框架中。_top將目標(biāo)文件載入到頂層窗口，并刪除所有框架。由于現(xiàn)代網(wǎng)頁設(shè)計不推薦使用框架，所以后兩個屬性值使用的比較少。target屬性為可選屬性，即創(chuàng)建超級鏈接時可以沒有該屬性，此時目標(biāo)頁面在本窗口中打開。創(chuàng)建超級鏈接的語法非常簡單：<ahref=”目標(biāo)地址”>鏈接文本或圖像</a>或者<aname=”錨點名稱”>提示信息</a>其中，目標(biāo)地址即可以站內(nèi)地址，也可以是站外地址。錨點即可以本網(wǎng)頁內(nèi)的位置也可以是其他網(wǎng)頁中的指定位置。下面我們通過一個例子說明如何創(chuàng)建各種超級鏈接。示例代碼如清單1-7所示。從該實例開始，為了節(jié)約篇幅，只給出關(guān)鍵代碼，完整代碼可在源代碼中找到（下同）。清單1-7各種超級鏈接<ahref="Listing1-6.html"accesskey="a">清單1-6</a><ahref="/html/html_links.asp#tips">其他網(wǎng)頁中的錨點</a><ahref="/" target="_blank">HTML可參考w3school</a><aname="top"></a><divstyle="border:1pxsolidred;height:2048px"></div><ahref="#top">返回頂端</a><ahref="mailto:454817856@">郵件鏈接</a><ahref="javascript:alert('確定要刪除嗎？')">刪除</a>代碼說明如下圖：第一個“清單1-6”的超級鏈接是指向站內(nèi)的鏈接，由于沒有指定target屬性，所以采用默認(rèn)的_self屬性值，因此單擊該鏈接，會在當(dāng)前窗口中打開Listing1-6.html文件，即目標(biāo)文件把原來的網(wǎng)頁取而代之。需要說明的是，此處的Listing1-6.html和當(dāng)前網(wǎng)頁應(yīng)該在同一目錄下，否則找不到目標(biāo)網(wǎng)頁Listing1-6.html。言外之意也就是說，站內(nèi)的超級鏈接之間引用的路徑必須正確，站外鏈接的域名和路徑都必須正確，否則將找不到目標(biāo)網(wǎng)頁。所有需要訪問資源的地方都會涉及路徑問題，以后不再提示，下同。第二個鏈接是指向其他網(wǎng)頁中錨點的鏈接，注意它的href的寫法，是把#號加在URL的后面，再加上錨點的名字。第三個是站外鏈接，同時設(shè)置了target屬性，目標(biāo)網(wǎng)頁在新窗口中打開。第四個鏈接定義了本網(wǎng)頁內(nèi)的錨點，并在第五個鏈接中指向它。最后兩個鏈接分別是郵件鏈接和帶有動作的鏈接，單擊這兩種鏈接會附帶一定的功能。單擊郵件鏈接可以打開本地的電子郵件程序，如Outlook；單擊帶動作的鏈接會觸發(fā)一定的動作。在本例中會彈出一警告框“確定要刪除嗎？”。1.3.2img標(biāo)記Img標(biāo)記用于在網(wǎng)頁中插入一幅圖像，對于只有文字的網(wǎng)頁來說，適當(dāng)插入幾幅圖像無疑是非常精彩的。但是顯示圖像的前提條件是從服務(wù)器上加載圖像，所以網(wǎng)頁中如果圖片太多勢必會造成巨大的網(wǎng)絡(luò)流量，影響網(wǎng)頁加載速度，所以盡量慎用圖像，做到畫龍點睛就好。Img不僅僅是在當(dāng)前網(wǎng)頁中顯示圖像，還可以結(jié)合map和area標(biāo)記制作HTML熱點地圖，也就是一種圖像鏈接，可以實現(xiàn)更好的視覺效果。Img定義圖像的語法如下：<imgsrc="圖片的url地址"alt="替換文本">src屬性是必選屬性，指定要顯示圖片的URL地址。Alt屬性為可選屬性，用于在無法顯示圖像時，顯示的替代文本。當(dāng)然，img還有其他的屬性，如寬度width，高度height等，為了遵從“內(nèi)容、樣式和動作相分離”的原則，這部分內(nèi)容不在此進(jìn)行討論，而放在CSS基礎(chǔ)中加以說明。下面分別說明img圖像標(biāo)記的幾種用法

1、在網(wǎng)頁中插入圖片

這是img標(biāo)記最簡單的應(yīng)用，只需要在src屬性中指定要顯示圖像的url地址即可。如下面的代碼所示。<imgsrc="images/flower.jpg"alt="鮮花"/>2、制作圖像超鏈接

有時候只有單一的文本超鏈接是不能滿足用戶需求的，適當(dāng)?shù)募尤雸D像或者圖像文本混合使用的超鏈接，可以美化網(wǎng)頁，滿足用戶多性化的需求。只需要將img標(biāo)記嵌入a標(biāo)記內(nèi)部就可以了。示例代碼如下：<ahref="#"><imgsrc="images/delete.jpg"/></a>3、制作HTML熱點地圖

這是一種更形象的圖像導(dǎo)航方式，即把圖像劃分成若干個區(qū)域，每個區(qū)域?qū)?yīng)一個鏈接地址，單擊這個區(qū)域就可以到達(dá)鏈接的網(wǎng)頁。這種導(dǎo)航形象直觀，受到大多數(shù)用戶的青睞。生成HTML熱點地圖的代碼結(jié)構(gòu)如下：<imgsrc="../images/face.jpg"usemap="#face"/>

<mapname="face">

<areashape="rect"coords="100,200,250,305"href="eye.html"target="_blank"/> <!—其他area標(biāo)記的定義–>

</map>制作熱點地圖的格式稍微有點復(fù)雜，我們來解釋一下。首先，是在img標(biāo)記中添加了usemap屬性，用于指定用于生成地圖的map，usemap屬性的值與map標(biāo)記的name屬性值保持一致（不含#號）。其次，map用于制作與圖像相關(guān)的熱點區(qū)域，包括若干個area標(biāo)記，一個area標(biāo)記代表地圖中的一個熱點，單擊這一熱點就可以導(dǎo)航到相應(yīng)的網(wǎng)址。area的shape屬性用于指定熱點區(qū)域的形狀，有三個值可選，分別是圓形（circ或circle）、多邊形（poly或polygon）和矩形（rect或rectangle）。Coords屬性用于指定區(qū)域的各頂點坐標(biāo)。矩形需要指定左上角點坐標(biāo)和右下角點坐標(biāo)；圓形需要指定圓心坐標(biāo)和半徑；多邊形最復(fù)雜，需要指定各個頂點的坐標(biāo)。Href屬性和target屬性與超級鏈接的屬性相同，在此不再介紹。幾種用法例子的完整清單1-8所示。清單1-8img的幾種用法<imgsrc="../images/flower.jpg"alt="鮮花"/><br/><ahref="#"> <imgsrc="../images/delete.jpg"/></a><br/><imgsrc="../images/face.jpg"usemap="#face"/><mapname="face"> <areashape="rect"coords="100,200,250,305"href="eye.html"target="_blank"/><areashape="rect"coords="280,200,420,305"href="eye.html