XHTML入門學(xué)習(xí)教程:XHTML網(wǎng)頁圖片應(yīng)用
2024-08-26 00:10:32
供稿：網(wǎng)友
合理的添加圖片可以使一個網(wǎng)頁更加的美觀。圖片標(biāo)簽<img>
<img>標(biāo)簽用于在網(wǎng)頁里插入圖片。<img>標(biāo)簽有一個重要的屬性"src"，它的屬性值就是圖片的地址。下面我們就在我們的index.html里插入一個圖片。打開”index.html“文件，在</body>前加上如下代碼：
<p><img src="http://m.survivalescaperooms.com/images/logo.gif" alt="技術(shù)支持"/></p>
保存后瀏覽網(wǎng)，請確認(rèn)您的網(wǎng)頁與該頁面相同。
我們注意到<img>是一個空標(biāo)簽，需要在結(jié)尾加上一個"/"以符合XHTML的要求。這里的例子除src外還有一個屬性alt，我們把它叫做做替換屬性，當(dāng)圖片由于某種原因而無法顯示的時候，alt的屬性值就會代替圖片出現(xiàn)；而當(dāng)圖片正常顯示時，只要把鼠標(biāo)停在圖片上就會看到alt屬性的屬性值。用圖片作為鏈接
我們在之前的教程中曾經(jīng)學(xué)習(xí)過創(chuàng)建超級鏈接，下面我們打開“index.html”并且將剛插入的代碼改為下面這段：
<p><a href="http://m.survivalescaperooms.com/"><img src="http://m.survivalescaperooms.com/images/logo.gif"alt="技術(shù)支持"/></a></p>
保存后瀏覽網(wǎng)頁，請再次確認(rèn)您的網(wǎng)頁與這個網(wǎng)頁相同。看看圖片是不是變成了超級鏈接，點擊一下圖片就會進(jìn)入菜鳥吧的主頁了。關(guān)于XHTML的效驗
從本節(jié)開始我們就不再修改"index.html"這個網(wǎng)頁的外觀了，現(xiàn)在將我們制作的網(wǎng)頁送交權(quán)威機構(gòu)檢驗一下。首先進(jìn)入：http://validator.w3.org/，該頁面就是一個XHTML效驗工具，它用來檢驗我們制作的網(wǎng)頁是否符合XHTML的標(biāo)準(zhǔn)。您可以選擇用網(wǎng)址效驗，也可以上傳文件效驗。您可以選擇文件上傳效驗，方法如下：
在”Validate by File Upload“有“Local File”一欄，點擊瀏覽，找到并選中之前保存的"index.html"，然后點擊“check”按鈕。您的結(jié)果應(yīng)該與我們通過網(wǎng)址效驗的結(jié)果一樣。返回如下錯誤信息：
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.
難道我們的網(wǎng)頁不符合XHTML標(biāo)準(zhǔn)嗎？請繼續(xù)看下一節(jié)的內(nèi)容。
