3.2　超鏈接標(biāo)記小案例：做一個(gè)個(gè)人博客主頁(yè)

首先，從一個(gè)簡(jiǎn)單的博客網(wǎng)頁(yè)開(kāi)始學(xué)習(xí)一下超鏈接標(biāo)記的用法。

任務(wù)描述：個(gè)人博客主頁(yè)中，有文字和圖片，還能打開(kāi)文章的鏈接，進(jìn)而打開(kāi)鏈接一篇具體文章的頁(yè)面，效果如圖3.2所示。

圖片素材準(zhǔn)備：準(zhǔn)備一張頭像圖片myAvatar.jpg，將其保存在根目錄test/imgs文件夾下。

操作步驟：在test文件夾中，右擊打開(kāi)Notepad++，新建01.html，并輸入如圖3.3所示的代碼，輸入完畢后保存。最后，用Chrome瀏覽器打開(kāi)，查看網(wǎng)頁(yè)效果。

思考時(shí)間

停一下，給自己2分鐘時(shí)間，找找HTML代碼與網(wǎng)頁(yè)內(nèi)容的對(duì)應(yīng)關(guān)系。

時(shí)間到，相信聰明的你很容易就找到對(duì)應(yīng)關(guān)系了，每一塊內(nèi)容都由一對(duì)或單個(gè)＜標(biāo)記名＞包圍，由于這是你的第一個(gè)網(wǎng)頁(yè)，所以還是先跟著我來(lái)看一下每一行代碼的含義。如果你已經(jīng)很熟悉HTML，則可以跳過(guò)該節(jié)。

代碼行1：＜!doctype html＞這是對(duì)HTML版本的聲明，所有HTML5版本的網(wǎng)頁(yè)，必須在文檔的第一行聲明，這里大小寫(xiě)都可以。

代碼行2：＜html＞是對(duì)HTML文檔的定義標(biāo)簽，它也是雙標(biāo)記。它的作用是包圍網(wǎng)頁(yè)相關(guān)的所有代碼。

代碼行3-6：＜head＞是HTML文檔的頭部聲明區(qū)，該區(qū)一般用于定義文檔內(nèi)容的字符集格式，聲明CSS樣式，定義網(wǎng)頁(yè)的標(biāo)題＜title＞等。這里字符集為utf-8，表示支持中文內(nèi)容的顯示，關(guān)于CSS樣式的聲明和引入之后的章節(jié)再細(xì)聊。＜head＞內(nèi)的所有內(nèi)容都不會(huì)出現(xiàn)在網(wǎng)頁(yè)主體中，它只是會(huì)影響整個(gè)HTML文檔中內(nèi)容的格式和樣式。

代碼行7：＜body＞是正文部分，它是HTML文檔的重中之重，因?yàn)榕c網(wǎng)頁(yè)中內(nèi)容相關(guān)的代碼都在這里。

代碼行8：＜h1＞一級(jí)標(biāo)題標(biāo)簽，文字會(huì)被加粗且字號(hào)變大，align=“center”是文字居中的屬性。相關(guān)的標(biāo)題標(biāo)簽實(shí)際有6級(jí)，從h1到h6，標(biāo)題文字的大小依次變小，并且標(biāo)題行之間的間距也越來(lái)越小。

代碼行9：＜img＞是圖片標(biāo)簽，又稱單標(biāo)記，也可以寫(xiě)作＜img/＞。為了顯示圖片，我們需要告訴瀏覽器圖片的存儲(chǔ)路徑，而它是通過(guò)src屬性來(lái)定義的。類似的，width和height也是img標(biāo)簽的屬性，負(fù)責(zé)定義圖片顯示的寬度和高度，單位是像素（px）。

代碼行10-11：＜p＞是段落標(biāo)簽，表示開(kāi)啟一個(gè)段落的內(nèi)容。＜b＞是將文字加粗顯示。

代碼行12-13：＜a＞超鏈接標(biāo)簽，href是超鏈接的跳轉(zhuǎn)地址屬性。

代碼行14：一定要記得在html中，很多標(biāo)記都是成對(duì)出現(xiàn)的；因此，一定不要忘記＜body＞對(duì)應(yīng)的結(jié)束標(biāo)簽＜/body＞。

代碼行15：＜/html＞是＜html＞標(biāo)簽的結(jié)束標(biāo)記。

至此，就完成了第一個(gè)網(wǎng)頁(yè)的開(kāi)發(fā)，你的網(wǎng)頁(yè)是否實(shí)現(xiàn)了如圖3.3所示的效果呢？如果是，那么恭喜你了。如果不是，最可能出問(wèn)題的就是圖片的顯示問(wèn)題。

圖片無(wú)法正常顯示

首先，需要排除標(biāo)簽的拼寫(xiě)錯(cuò)誤，常見(jiàn)的錯(cuò)誤是將src寫(xiě)成scr。如果確認(rèn)無(wú)誤，則要查看圖片的存放位置，在test文件下，有一個(gè)01.html和imgs文件夾，圖片應(yīng)該在imgs文件夾下。如果都沒(méi)有問(wèn)題，則仔細(xì)檢查圖片名稱是否寫(xiě)對(duì)，建議圖片名稱最好用英文，且通過(guò)重命名后復(fù)制的方式獲取，以避免手動(dòng)拼寫(xiě)錯(cuò)誤。

這個(gè)小案例雖然簡(jiǎn)單，卻涵蓋了一個(gè)HTML文檔應(yīng)有的基本框架，包括文檔聲明、＜html＞、＜head＞、＜body＞等標(biāo)簽。在以后的任務(wù)中，為了節(jié)省空間，將不會(huì)再介紹和展示基本框架代碼。

網(wǎng)頁(yè)出現(xiàn)亂碼怎么辦？

問(wèn)：在Notepad++中運(yùn)行01.html，卻發(fā)現(xiàn)網(wǎng)頁(yè)中顯示一堆亂碼？

答：不要著急，這是由于Notepad++的默認(rèn)設(shè)置問(wèn)題，你可以按照?qǐng)D3.4修改設(shè)置。即在工具欄中找到“設(shè)置”→“首選項(xiàng)設(shè)置”，將新建文檔的編碼格式由默認(rèn)的ANSI改為UTF-8，這個(gè)問(wèn)題就可以迎刃而解了。