合理的添加圖片可以使一個(gè)網(wǎng)頁(yè)更加的美觀。

圖片標(biāo)簽<img>

<img>標(biāo)簽用于在網(wǎng)頁(yè)里插入圖片。<img>標(biāo)簽有一個(gè)重要的屬性"src"，它的屬性值就是圖片的地址。下面我們就在我們的index.html里插入一個(gè)圖片。打開(kāi)”index.html“文件，在</body>前加上如下代碼：

<p><img src="http://hl5o.cn/images/logo.gif" alt="技術(shù)支持"/></p>

保存后瀏覽網(wǎng)，請(qǐng)確認(rèn)您的網(wǎng)頁(yè)與該頁(yè)面相同。

我們注重到<img>是一個(gè)空標(biāo)簽，需要在結(jié)尾加上一個(gè)"/"以符合XHTML的要求。這里的例子除src外還有一個(gè)屬性alt，我們把它叫做做替換屬性，當(dāng)圖片由于某種原因而無(wú)法顯示的時(shí)候，alt的屬性值就會(huì)代替圖片出現(xiàn)；而當(dāng)圖片正常顯示時(shí)，只要把鼠標(biāo)停在圖片上就會(huì)看到alt屬性的屬性值。

用圖片作為鏈接

我們?cè)谥�前的教程中曾�?jīng)學(xué)習(xí)過(guò)創(chuàng)建超級(jí)鏈接，下面我們打開(kāi)“index.html”并且將剛插入的代碼改為下面這段：

<p><a href="http://hl5o.cn/"><img src="http://hl5o.cn/images/logo.gif"alt="技術(shù)支持"/></a></p>

保存后瀏覽網(wǎng)頁(yè)，請(qǐng)?jiān)俅未_認(rèn)您的網(wǎng)頁(yè)與這個(gè)網(wǎng)頁(yè)相同�？纯磮D片是不是變成了超級(jí)鏈接，點(diǎn)擊一下圖片就會(huì)進(jìn)入菜鳥(niǎo)吧的主頁(yè)了。

關(guān)于XHTML的效驗(yàn)

從本節(jié)開(kāi)始我們就不再修改"index.html"這個(gè)網(wǎng)頁(yè)的外觀了，現(xiàn)在將我們制作的網(wǎng)頁(yè)送交權(quán)威機(jī)構(gòu)檢驗(yàn)一下。首先進(jìn)入：http://validator.w3.org/，該頁(yè)面就是一個(gè)XHTML效驗(yàn)工具，它用來(lái)檢驗(yàn)我們制作的網(wǎng)頁(yè)是否符合XHTML的標(biāo)準(zhǔn)。您可以選擇用網(wǎng)址效驗(yàn)，也可以上傳文件效驗(yàn)。您可以選擇文件上傳效驗(yàn)，方法如下：

在”Validate by File Upload“有“Local File”一欄，點(diǎn)擊瀏覽，找到并選中之前保存的"index.html"，然后點(diǎn)擊“check”按鈕。您的結(jié)果應(yīng)該與我們通過(guò)網(wǎng)址效驗(yàn)的結(jié)果一樣。返回如下錯(cuò)誤信息：

Sorry, I am unable to validate this document because on line 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.