合理的添加圖片可以使一個(gè)網(wǎng)頁(yè)更加的美觀(guān)。
<img>標(biāo)簽用于在網(wǎng)頁(yè)里插入圖片。<img>標(biāo)簽有一個(gè)重要的屬性”src”，它的屬性值就是圖片的地址。下面我們就在我們的index.html里插入一個(gè)圖片。打開(kāi)”index.html“文件，在</body>前加上如下代碼：
| <p><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.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://www.webjx.com/”><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.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è)了。
從本節(jié)開(kāi)始我們就不再修改”index.html”這個(gè)網(wǎng)頁(yè)的外觀(guān)了，現(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. |
難道我們的網(wǎng)頁(yè)不符合XHTML標(biāo)準(zhǔn)嗎？請(qǐng)繼續(xù)看下一節(jié)的內(nèi)容。
]]>什么是HTML?
簡(jiǎn)單點(diǎn)說(shuō)：HTML是用來(lái)做網(wǎng)頁(yè)的。它很簡(jiǎn)單，在接下來(lái)的1~2分鐘之內(nèi)你就會(huì)跟著我用HTML做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。
復(fù)雜點(diǎn)說(shuō)：HTML（HyperTextMarkupLanguage的縮寫(xiě)），即超文本鏈接標(biāo)記語(yǔ)言。它是在互聯(lián)網(wǎng)發(fā)布超文本文件(通常所說(shuō)的網(wǎng)頁(yè))的通用語(yǔ)言。
什么是XHTML?更先進(jìn)難懂的技術(shù)？
簡(jiǎn)單點(diǎn)說(shuō)：X是嚇唬人的，其實(shí)XHTML就是嚴(yán)謹(jǐn)而準(zhǔn)確的HTML。如果說(shuō)HTML是漢語(yǔ)，那么XHTML就是標(biāo)準(zhǔn)普通話(huà)。對(duì)于現(xiàn)在才剛剛開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的朋友，直接學(xué)習(xí)XHTML是最佳的選擇。
復(fù)雜點(diǎn)說(shuō)：XHTML是HTML的“升級(jí)”產(chǎn)品。事實(shí)上它也屬于HTML家族，對(duì)比以前各個(gè)版本的HTML，它具有更嚴(yán)格的書(shū)寫(xiě)標(biāo)準(zhǔn)、更好的跨平臺(tái)能力。由于某些需要，XHTML將以前版本的HTML能夠?qū)崿F(xiàn)的一些功能交給了CSS，這意味著你將需要學(xué)習(xí)兩種技術(shù)。但是這確實(shí)是Web未來(lái)發(fā)展的潮流。X代表“可以擴(kuò)展的”。
學(xué)習(xí)XHTML的基礎(chǔ)
學(xué)習(xí)XHTML不需要任何基礎(chǔ)。相反，XHTML是學(xué)習(xí)學(xué)多其他知識(shí)的必要基礎(chǔ)。有些人可能聽(tīng)說(shuō)需要學(xué)習(xí)完HTML才可以學(xué)XHTML，事實(shí)并非如此，菜鳥(niǎo)吧(cainiao8.com)的XHTML教程就是面向沒(méi)有任何基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)新手的。如果你已經(jīng)熟練的掌握了HTML，就不必看我們的入門(mén)教程了，我們?yōu)橐呀?jīng)熟悉了HTML的站長(zhǎng)準(zhǔn)備了從HTML到XHTML。
學(xué)習(xí)XHTML的方法
閱讀XHTML教程以及其中的實(shí)例當(dāng)然是學(xué)習(xí)XHTML的好辦法，但是僅僅如此是絕對(duì)不夠的。在學(xué)習(xí)的過(guò)程中，你可以找一些你以前比較喜歡瀏覽的站點(diǎn)，看看他們?cè)趯?shí)際的網(wǎng)站設(shè)計(jì)過(guò)程中是如何使用XHTML的。你只需要點(diǎn)擊瀏覽器工具欄上的“查看”按鈕，再選擇“查看源文件”，就可以看到該頁(yè)的代碼了。
好了，關(guān)于XHTML的介紹就說(shuō)到這里，下面就讓我們開(kāi)始學(xué)習(xí)XHTML吧。
用一分鐘制作自己的第一個(gè)網(wǎng)頁(yè)：
下面我們來(lái)試著做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，希望您能跟著我們操作，這只會(huì)花費(fèi)您一分鐘時(shí)間?，F(xiàn)在您也許不知道那些尖括號(hào)“<>”和里面的字母究竟是些什么東西，不要擔(dān)心，我們會(huì)在后面的教程中向您介紹。
首先請(qǐng)運(yùn)行記事本，或在任意位置新建一個(gè)文本文檔，在記事本內(nèi)輸入如下內(nèi)容：
| 以下為引用的內(nèi)容： <html> <head> <title>我是這個(gè)網(wǎng)頁(yè)的標(biāo)題</title> </head> <body> <p>這是我的第一個(gè)網(wǎng)頁(yè)。</p> </body> </html> |
輸入完畢后將文件保存，命名為“index.html”。(點(diǎn)擊“文件”―>“另存為”。在“文件名”一欄填入“index.html”，在“保存類(lèi)型”一欄選擇”所有文件”，然后點(diǎn)擊“保存按鈕”)
保存之后，雙擊該文件，瀏覽器就會(huì)自動(dòng)打開(kāi)這個(gè)網(wǎng)頁(yè)了。請(qǐng)確認(rèn)一下你的網(wǎng)頁(yè)是否與該頁(yè)面相同，如果相同，那么你就成功地完成了自己的第一個(gè)比較簡(jiǎn)陋的網(wǎng)頁(yè)。
請(qǐng)注意，這只是一個(gè)簡(jiǎn)單的頁(yè)面，雖然它在語(yǔ)法上符合XHTML的標(biāo)準(zhǔn)，但是如果要作為一個(gè)完整的、符合W3C標(biāo)準(zhǔn)的XHTML網(wǎng)頁(yè)，它還缺少一些內(nèi)容。相關(guān)內(nèi)容將在后面的教程中介紹。這個(gè)網(wǎng)頁(yè)僅僅是用來(lái)講解一些基礎(chǔ)的XHTML知識(shí)。
基礎(chǔ)知識(shí)講解
我們剛剛制作的網(wǎng)頁(yè)以<html>開(kāi)頭，以</html>結(jié)尾，它們分別代表網(wǎng)頁(yè)文件的開(kāi)始和結(jié)束。
英文中head是頭的意思，body是身體的意思。網(wǎng)頁(yè)的<head></head>和<body>< /body>兩部分就分別代表了網(wǎng)頁(yè)的“頭”和“身子”。也許你注意到了，我們網(wǎng)頁(yè)的“頭”里面“有一個(gè)<title>< /title>。title一詞是標(biāo)題的意思，網(wǎng)頁(yè)的標(biāo)題(title)將會(huì)顯示在瀏覽器上方的標(biāo)題欄中。而網(wǎng)頁(yè)的身子，也就是< body>與</body>標(biāo)簽中間的內(nèi)容將作為正文被顯示在瀏覽器中。
這個(gè)網(wǎng)頁(yè)很單薄，head和body中都沒(méi)有什么內(nèi)容。我們會(huì)在以后的教程中逐漸豐富網(wǎng)頁(yè)的內(nèi)容。但是現(xiàn)在請(qǐng)您記住一個(gè)概念：網(wǎng)頁(yè)的頭(head)是為瀏覽器寫(xiě)的，它將不會(huì)顯示在頁(yè)面上，而身子(body)是為網(wǎng)站的用戶(hù)寫(xiě)的，是瀏覽器將要顯示的內(nèi)容。
菜鳥(niǎo)惡搞XHTML之錯(cuò)誤示例
打開(kāi)下面這兩個(gè)錯(cuò)誤示例看看。它們的代碼都存在十分嚴(yán)重的錯(cuò)誤，但是瀏覽器卻會(huì)準(zhǔn)確無(wú)誤地顯示這兩個(gè)網(wǎng)頁(yè)。
| 示例1――身子長(zhǎng)在腦袋里 <html> <head> <title>我是這個(gè)網(wǎng)頁(yè)的標(biāo)題</title> <p>這是我的第一個(gè)網(wǎng)頁(yè)。</p> </head> <body> </body> </html> |
看看上面這個(gè)網(wǎng)頁(yè)，<head>和</head>之間的內(nèi)容正常的顯示在頁(yè)面上了。但是這是滑稽的錯(cuò)誤，把身子放在腦袋里了。
| 示例二――腦袋長(zhǎng)在脖子下 <html> <head> </head> <body> <title>我是這個(gè)網(wǎng)頁(yè)的標(biāo)題</title> <p>這是我的第一個(gè)網(wǎng)頁(yè)。</p> </body> </html> |
瀏覽器的適應(yīng)能力實(shí)在是令人佩服，即使你將腦袋放在身子里它也認(rèn)得出來(lái)?？纯礃?biāo)題欄，標(biāo)題完全正常顯示。
好了，在實(shí)際應(yīng)用的時(shí)候請(qǐng)不要犯上面這種低級(jí)錯(cuò)誤。這會(huì)造成嚴(yán)重的后果：搜索引擎可能不收錄你的網(wǎng)站；使用手機(jī)或者其他移動(dòng)設(shè)備瀏覽你網(wǎng)站的朋友可能遇到未知錯(cuò)誤。下面就趕快讓我們來(lái)進(jìn)入XHTML的核心內(nèi)容吧。
]]>