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