合理的添加圖片可以使一個網頁更加的美觀。
<img>標簽用于在網頁里插入圖片。<img>標簽有一個重要的屬性”src”，它的屬性值就是圖片的地址。下面我們就在我們的index.html里插入一個圖片。打開”index.html“文件，在</body>前加上如下代碼：
| <p><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif” alt=”技術支持”/></p> |
保存后瀏覽網，請確認您的網頁與該頁面相同。
我們注意到<img>是一個空標簽，需要在結尾加上一個”/”以符合XHTML的要求。這里的例子除src外還有一個屬性alt，我們把它叫做做替換屬性，當圖片由于某種原因而無法顯示的時候，alt的屬性值就會代替圖片出現；而當圖片正常顯示時，只要把鼠標停在圖片上就會看到alt屬性的屬性值。
我們在之前的教程中曾經學習過創建超級鏈接，下面我們打開“index.html”并且將剛插入的代碼改為下面這段：
| <p><a href=”http://www.webjx.com/”><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif”alt=”技術支持”/></a>< /p> |
保存后瀏覽網頁，請再次確認您的網頁與這個網頁相同。看看圖片是不是變成了超級鏈接，點擊一下圖片就會進入菜鳥吧的主頁了。
從本節開始我們就不再修改”index.html”這個網頁的外觀了，現在將我們制作的網頁送交權威機構檢驗一下。首先進入：http: //validator.w3.org/，該頁面就是一個XHTML效驗工具，它用來檢驗我們制作的網頁是否符合XHTML的標準。您可以選擇用網址效驗，也可以上傳文件效驗。您可以選擇文件上傳效驗，方法如下：
在”Validate by File Upload“有“Local File”一欄，點擊瀏覽，找到并選中之前保存的”index.html”，然后點擊“check”按鈕。您的結果應該與我們通過網址效驗的結果一樣。返回如下錯誤信息：
| 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. |
難道我們的網頁不符合XHTML標準嗎？請繼續看下一節的內容。
#p#副標題#e#
head和DTD盡管不會顯示在頁面上，但是卻是網頁的重要元素。
在上一節中我們我們在檢驗我們的網頁時得到了一段出錯信息，但是我們在整個網頁的制作過程中都是按照XHTML標準寫的啊。其實問題出在了網頁的“頭部”，下面我們就來解決這個問題。
在之前的教程中除了<title>標簽之外我們修改的都是<body>之間的內容，也就是顯示在頁面里的內容。那么 XHTML中的<head>部分是做什么的呢？其實在<head>部分我么可以加入許多瀏覽器可以“看得見”的信息。下面我們就介紹一些head部分常用的標簽。
注意：本節的標簽與屬性大多數難于記憶，事實上在我們在使用網頁制作軟件創建網頁的時候它們會自動生成。本節的目的是能夠了解這些標簽的含義，以在必要的時候可以做一些手工的修改。現在就打開我們的“index.html”，在<head></head>中間插入如下代碼：
| 1.<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ /> |
這段代碼告訴瀏覽器我們的網頁使用的是gb2312中文字符編碼，沒有該段<meta>信息正是上一次檢驗時出現問題的原因之一。
| 2.<meta name=”keywords” content=”小學生,欺負同學,寒暑假作業,家長” /> |
這段代碼是為搜索引擎寫的，content的內容就是index.html的關鍵詞。
請注意，<meta>標簽也是一個空標簽，別忘記加上/。<meta>標簽的作用還遠不只這些，不過在缺少實際應用的情況下，很難了解<meta>標簽的實際用處。如果想了解更多<meta>標簽的知識，可以到百度搜索相關知識。
正如之前所說的，<head>部分的內容并不是為瀏覽者寫的，而是為瀏覽器和搜索引擎寫的。因此<head>部分不應該含有任何在頁面中可視的的內容。
如果現在再次檢驗我們的網頁，仍然會得到出錯信息，提示找不到DTD文件，那么什么是DTD文件呢？簡單的說它就是在任何人（多數情況下是類似瀏覽器的軟件）想要讀取我們的文件之前告訴他我們文件是遵照哪一套規則來寫的。以檢驗過程為例子，如果我們使用HTML4.01的DTD呢，效驗器就會認為我們是使用的HTML4.01的規則編寫的網頁，然后按照相應的規則來一行一行的檢驗我們的代碼，最終返回檢驗結果。
我們制作的網頁是使用XHTML的規則，當然要使用XHTML的DTD。不過正如我們前面提到的，XHTML的DTD也分為相對松散的過渡期DTD 和要求相當嚴格的嚴格DTD。本教程中我們將要在網頁中聲明嚴格的DTD，如果您想了解更多關于DTD的內容需要學習XML，本教程中不做過多討論。
下面我們就為我們的網頁聲明DTD。打開之前保存的”index.html”，在第一行（<html>標簽之前）輸入如下代碼：
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> |
并且在<html>標簽里添加如下屬性：xmlns=”http://www.w3.org/1999/xhtml“。這個叫做命名空間屬性，屬于XML范疇，我們這里仍然不做過多的討論。
這段代碼的作用就是聲明我們的網頁是使用的xhtml1-strict.dtd。現在再將這個頁面提交給W3的效驗器，這次將返回一個“This Page Is Valid XHTML1.0 Strict!”的信息。這表示我們的代碼中沒有任何錯誤，完全符合XHTML1的strict(嚴格)標準。當然了，實際工作中情況可能不總是如此，在實際的網頁設計過程中，總會有各種原因造成我們寫出不規范的代碼。這時效驗器就會給出錯誤報告，我們只需要按照提示修改代碼即可。
#p#副標題#e#
表格是XHTML中處境尷尬的一個標簽，本節只做了解即可.
在CSS流行之前，table被廣泛應用于定位。在XHTML中，table不被推薦用來定位，W3C希望CSS可以取代< table>在定位方面的地位。不過事實上由于利用CSS布局常常需要大量的手寫代碼工作(常用的網頁設計軟件如Dreamweaver并不能完美支持P的顯示)，<table>仍被許多網站用語首頁布局，例如Google的More products頁面就利用了table來定位。不過我個人推薦您開始使用CSS來定位網頁，因為這是Web發展的方向。當然了，在初期用CSS取代table可能使您遇上很多的麻煩。
在XHTML中，創建表格的標簽是<table>，書寫代碼時，我們要先用<tr>標簽將表格分成一行一行，再用< td>標簽把每行分成一格一格。完全手寫代碼創建table是十分困難和低效的，而在網頁制作軟件中制作表格就如同Word一樣簡單，只需要選擇行列之類的簡單屬性即可。但是我們可能會遇到自動做出的表格不符合要求，而需要在代碼模式調整的可能，因此我們還是要大概了解XHTML表格標簽的具體寫法。
<table>標簽可以有border屬性。如果不設置border屬性的值，在默認情況下，瀏覽器將不顯示表格的邊框。
我們來建立一個四行兩列的標簽，代碼如下：
<table border=”1″>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
</table>
顯示結果如下：注意上面的代碼，一共有4對<tr>，對應著下面的4個行。而沒個<tr>（行）又有兩個<td>單元格。于是就成了一個4行2列的表格。
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
這樣的表格用來列出數據之類的信息足夠了，但是用來定位的表格通常要復雜一些。再次強調我們不推薦用table來定位，所以這里僅僅簡單地介紹了<table>。
#p#副標題#e#
框架結構可以讓幾個網頁同時顯示在瀏覽器的一個頁面內。我們不推薦您使用它來設計網站。
框架允許你在一個瀏覽器窗口內打開兩個乃至多個頁面。你可以這樣理解，<frameset>其實就是一個大<table>，只不過整個頁面是<table>的主體，而每一個單元格的內容都是一個獨立的網頁。
既然我們說框架結構可以被理解為一網頁為單元格的表格，那么就一定要分欄了。其中cols屬性將頁面分為幾列，而rows屬性則將頁面分為幾行。下面來看一個例子。
<html>
<frameset rows=”25%,75%”>
<frame src=”1.html”/>
<frame src=”3.html”/>
</frameset>
</html>
其中”rows=”25%,75%”表示該頁面共分為兩行，因為它有兩個屬性值，而他們的大小則分別為頁面高度的25%和75%。點擊這里查看以上代碼的顯示效果。框架標簽<frame>
上面的實例中已經用到了<frame>標簽，它的src屬性就是這個框架里將要顯示的內容。在本實例中的兩個框架是可以通過拖拽開改變大小比例的，如果你希望它們大小固定可以使用noresize=”noresize”屬性。
注意：<frame>標簽是空標簽，需要加上一個”/”以符合XHTML的要求。
該標簽只有當瀏覽器不支持框架結構時才會起到作用，由于現在幾乎所有網民的瀏覽器都支持框架結構，所以我們在這里就不介紹這個標簽了。如果你想了解相關內容，可以查閱網絡上的HTML手冊。
框架頁面的DTD與一般網頁不同。聲明方法如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
#p#副標題#e#
表單是用戶提交信息的重要渠道。本節就將介紹表單的基礎知識。
表單以一個<form>標簽開始。用戶注冊網站會員，投票等等都需要表單來實現。當然了，僅僅依靠XHTML是無法處理這些表單的，如果你想處理這些表但你需要使用一些類似PHP和ASP的網頁后臺技術。（順便說一下，小菜鳥自己的后臺目前還很菜。）
下面我們來介紹兩個常見的表單組成元素：
<form>姓名:<inputtype=”text”name=”user”/><br/></form>
姓名:
<form>姓名:<inputtype=”password”name=”pass”/><br/></form>
密碼:
可以看到，這兩個表單元素都用到了<input>標簽，但是密碼框里填寫的內容卻是不可見的。決定了他們類型不同的是< input>標簽的屬性“type”的屬性值。例如text就是文本框，而password則是密碼。你應該注意到了，<imput> 標簽也是一個空標簽。他沒有終止標簽。我們一定要記得在后面加上一個”/”以符合XHTML的要求。
常用的表單元素還有很多，比如單選和復選礦，不過既然我們現在無法處理表單，也就無法理解表單的含義。所以這里就不介紹了，大家以后如果繼續學習后臺技術的話，自然就會理解form在建站中所起到的作用了。
]]>什么是HTML?
簡單點說：HTML是用來做網頁的。它很簡單，在接下來的1~2分鐘之內你就會跟著我用HTML做一個簡單的網頁。
復雜點說：HTML（HyperTextMarkupLanguage的縮寫），即超文本鏈接標記語言。它是在互聯網發布超文本文件(通常所說的網頁)的通用語言。
什么是XHTML?更先進難懂的技術？
簡單點說：X是嚇唬人的，其實XHTML就是嚴謹而準確的HTML。如果說HTML是漢語，那么XHTML就是標準普通話。對于現在才剛剛開始學習網頁設計的朋友，直接學習XHTML是最佳的選擇。
復雜點說：XHTML是HTML的“升級”產品。事實上它也屬于HTML家族，對比以前各個版本的HTML，它具有更嚴格的書寫標準、更好的跨平臺能力。由于某些需要，XHTML將以前版本的HTML能夠實現的一些功能交給了CSS，這意味著你將需要學習兩種技術。但是這確實是Web未來發展的潮流。X代表“可以擴展的”。
學習XHTML的基礎
學習XHTML不需要任何基礎。相反，XHTML是學習學多其他知識的必要基礎。有些人可能聽說需要學習完HTML才可以學XHTML，事實并非如此，菜鳥吧(cainiao8.com)的XHTML教程就是面向沒有任何基礎的網頁設計新手的。如果你已經熟練的掌握了HTML，就不必看我們的入門教程了，我們為已經熟悉了HTML的站長準備了從HTML到XHTML。
學習XHTML的方法
閱讀XHTML教程以及其中的實例當然是學習XHTML的好辦法，但是僅僅如此是絕對不夠的。在學習的過程中，你可以找一些你以前比較喜歡瀏覽的站點，看看他們在實際的網站設計過程中是如何使用XHTML的。你只需要點擊瀏覽器工具欄上的“查看”按鈕，再選擇“查看源文件”，就可以看到該頁的代碼了。
好了，關于XHTML的介紹就說到這里，下面就讓我們開始學習XHTML吧。
用一分鐘制作自己的第一個網頁：
下面我們來試著做一個簡單的網頁，希望您能跟著我們操作，這只會花費您一分鐘時間。現在您也許不知道那些尖括號“<>”和里面的字母究竟是些什么東西，不要擔心，我們會在后面的教程中向您介紹。
首先請運行記事本，或在任意位置新建一個文本文檔，在記事本內輸入如下內容：
| 以下為引用的內容： <html> <head> <title>我是這個網頁的標題</title> </head> <body> <p>這是我的第一個網頁。</p> </body> </html> |
輸入完畢后將文件保存，命名為“index.html”。(點擊“文件”―>“另存為”。在“文件名”一欄填入“index.html”，在“保存類型”一欄選擇”所有文件”，然后點擊“保存按鈕”)
保存之后，雙擊該文件，瀏覽器就會自動打開這個網頁了。請確認一下你的網頁是否與該頁面相同，如果相同，那么你就成功地完成了自己的第一個比較簡陋的網頁。
請注意，這只是一個簡單的頁面，雖然它在語法上符合XHTML的標準，但是如果要作為一個完整的、符合W3C標準的XHTML網頁，它還缺少一些內容。相關內容將在后面的教程中介紹。這個網頁僅僅是用來講解一些基礎的XHTML知識。
基礎知識講解
我們剛剛制作的網頁以<html>開頭，以</html>結尾，它們分別代表網頁文件的開始和結束。
英文中head是頭的意思，body是身體的意思。網頁的<head></head>和<body>< /body>兩部分就分別代表了網頁的“頭”和“身子”。也許你注意到了，我們網頁的“頭”里面“有一個<title>< /title>。title一詞是標題的意思，網頁的標題(title)將會顯示在瀏覽器上方的標題欄中。而網頁的身子，也就是< body>與</body>標簽中間的內容將作為正文被顯示在瀏覽器中。
這個網頁很單薄，head和body中都沒有什么內容。我們會在以后的教程中逐漸豐富網頁的內容。但是現在請您記住一個概念：網頁的頭(head)是為瀏覽器寫的，它將不會顯示在頁面上，而身子(body)是為網站的用戶寫的，是瀏覽器將要顯示的內容。
菜鳥惡搞XHTML之錯誤示例
打開下面這兩個錯誤示例看看。它們的代碼都存在十分嚴重的錯誤，但是瀏覽器卻會準確無誤地顯示這兩個網頁。
| 示例1――身子長在腦袋里 <html> <head> <title>我是這個網頁的標題</title> <p>這是我的第一個網頁。</p> </head> <body> </body> </html> |
看看上面這個網頁，<head>和</head>之間的內容正常的顯示在頁面上了。但是這是滑稽的錯誤，把身子放在腦袋里了。
| 示例二――腦袋長在脖子下 <html> <head> </head> <body> <title>我是這個網頁的標題</title> <p>這是我的第一個網頁。</p> </body> </html> |
瀏覽器的適應能力實在是令人佩服，即使你將腦袋放在身子里它也認得出來。看看標題欄，標題完全正常顯示。
好了，在實際應用的時候請不要犯上面這種低級錯誤。這會造成嚴重的后果：搜索引擎可能不收錄你的網站；使用手機或者其他移動設備瀏覽你網站的朋友可能遇到未知錯誤。下面就趕快讓我們來進入XHTML的核心內容吧。
#p#副標題#e#
也許你在上一節就注意到了，XHTML文件與普通的純文本文件的最大不同在于一些用“<>”包含的東西，例如< body>。我們把他們叫做標簽。通常情況下XHTML標簽都是成對出現的，例如<html></html>。可以看到它們只相差一個“/”，我們把類似<html>的沒有“/”的標簽叫做起始標簽，而它對應的有“/”的</html>則叫終止標簽，終止標簽與起始標簽只相差一個”/”符號。當然了，XHTML也有一些標簽并不成對出現，它們沒有終止標簽，我們把這樣的標簽叫做“空標簽”。空標簽的內容在稍后的教程中將會提到。
以前各個版本HTML標簽并不區分大小寫，例如標簽<HTML>和標簽<html>是等效的。而在XHTML中，所有標簽均使用小寫。為了使自己的網站能夠符合XHTML標準，您應該養成良好的習慣，在制作網頁的過程中所有標簽一律使用小寫。
打開上一節教程中保存的html文件。將第六行的“這是我的第一個網頁。”改為“這是我的第一個<b>網頁</b>。”，然后保存修改后再次瀏覽網頁。你會發現網頁兩個字變成了粗體顯示，效果如下：
這是我的第一個網頁。
區別很明顯，網頁兩個字由于被“包”在了標簽<b></b>中而變成了粗體。<b>標簽的意思就是粗體顯示，而它只會影響到被它包含的內容。這就是XHTML標簽的作用方式。我們把被標簽“包住”的內容叫做元素。本例中“網頁”兩個字就是<b>標簽的元素。
<hr size=”1″>
我們可以為XHTML標簽設置一些屬性。請你注意上面的水平線，原本它的代碼是：<hr />。在XHTML中<hr>標簽就是一條水平分割線，我們可以為這條分割線添加一個屬性“size”（即分割線的大小），他的屬性值為1。那么它的完整代碼就是：
<hr size=”1″ />
類似的，為其他XHTML標簽添加屬性的方法也是在標簽的起始標簽中加入：屬性＝“屬性值”。需要注意的是，屬性值必須使用引號“括”起來。單引號或者雙引號都可以，但是雙引號比較常用。
添加屬性的格式： <起始標簽 屬性=”屬性值”> 實例－> <table border=”none”>
注意：普通的XHTML文件有兩個等級標準(不算框架標準)――過渡標準和嚴格標準，其中過渡標準主要針對那些習慣于使用HTML開發網站的站長。上面的代碼在過渡標準中是合法的，可是在嚴格標準中，size屬性將被視為非法屬性。XHTML不僅是更加標準更加嚴格的HTML，他還推崇一種構建網站的思路。那就是把網頁的內容與樣式分開，這在XHTML中是通過CSS來實現的。因此我們推薦您使用嚴格標準的XHTML，把定義樣式的任務完全交給 CSS。(關于XHTML標準的問題將在后面的教程中介紹)
也許你已經注意到了，這里我們沒有把分割線標簽寫成對稱的<hr></hr>，而是寫成<hr />。其實這正是我們在前面教程中提到的不成對出現的標簽，他只有起始標簽<hr>卻沒有終止標簽</hr>。由于它沒有元素，所以我們把這樣的標簽叫做空標簽。那么我們為什么要寫成<hr />而不是簡簡單單地寫成<hr>呢？這樣的書寫格式是為了滿足XHTML中任何標簽都需要“關閉”的規則。我們把在起始標簽的最后添加”/”的方法叫做標簽的自閉（或者自關閉、自終止等等，你喜歡怎么叫都行）。
所有空標簽的使用方法的自閉方法都是一致的，就是在起始標簽的“>”符號前加上一個空格和一個反斜杠“/”。空格不是必須的，但是個別的瀏覽器卻無法識別<hr/>，只能識別<hr />。這也正是我們添加空格的原因。（我至今沒有遇到不兼容的瀏覽器）
#p#副標題#e#
常用標簽
就像一篇文章一樣，我們的網頁也要段落分明，也需要重要程度不同的標題。本節就將介紹XHTML中實現標題、段落等功能的常用標簽..
定義標題，我們可以使用從<h1>到<h6>這幾個標簽，它們對應的終止標簽分別為</h1>到< /h6>，其中<h1>到<h6>字號順序減小，重要性也逐漸降低。瀏覽器將在標題的上面和下面自動各空出一行。
定義段落使用<p>和</p>，在<p>和</p>之間的內容會被識別為一個段落，它就類似我們通常所說的一個“自然段”。與標題類似，瀏覽器也會在段落的開始之前和結束之后各加一行空白。
當我們在想另起一行書寫文字卻又不希望另起一個自然段的時候，我們就可以應用<br />標簽了。<br>標簽也是一個空標簽，需要加上一個”/”以符合XHTML的要求。
實現水平分割線的標簽是<hr />。和<br>標簽一樣，<hr>也是一個空標簽，為了遵守XHTML的規則，需要加上一個”/”。(下面就是一條分割線)
合理利用上面介紹的四個標簽可以使瀏覽你網頁的用戶覺得網頁的層次清晰，而注釋則可以使你在閱讀自己的網頁源代碼時感覺層次清晰，不至于摸不著頭腦。在<!–和–>之間的東西就是注釋的內容，它們將不會在網頁上顯示。看看我們如何在下面的練習實例中插入注釋。
現在打開我們在上一節保存的網頁，練習一下本節學習的幾個重要標簽。將<body></body>中的“這是我的第一個<b>網頁</b>。”去掉，輸入以下內容：
| <h1>服務公告</h1><!–練習標題的使用，看看字號是不是變大了？ –> <hr /><!–水平分割線，別忘了那個”/” –> <h2>本人現面對全國的小學生及家長同志提供如下服務：</h2><!–2號標題，看看字號是不是比1號標題小 –> <h3>針對學生的服務</h3> <p> 代寫寒暑假作業（數學不保證沒有錯題，語文不保證沒有錯字，英語作業你找別人吧） <br />幫忙欺負四年級以下同學，特體須加收費用。 <br />家長會幫忙冒充家長。 </p><!–上面的內容是一個段落 –> <h3>VIP服務</h3> <p>凡購買所有三項服務者即自動升級為VIP。我們將免費為您制作個人主頁，完全符合W3C的XHTML標準和ISO2009~。</p> <!–這里網頁雖然層次還算比較分明，可是你是不是覺得界面實在是很難看和簡陋呢？比如說行與行之間沒有空隙，一號標題 太大了。關于定義網頁外觀的方法將在稍后的CSS教程中介紹。忘了說主要內容了，注釋不會出現在網頁上，所以 我們可以在這里打許多廢話。不過在以后網頁設計的過程中盡量寫一些有提示作用的注釋。–> |
保存修改后瀏覽網頁，確認一下你的網頁和這個頁面相同，完工。
#p#副標題#e#
本節介紹文字格式和特殊字符在XHTML中的實現方法。
在之前的教程中我們曾經用過一次<b>標簽，他使得包含在它之中的內容變成粗體顯示。例如“<b>菜鳥吧</b>”將顯示為菜鳥吧。我們把這種定義文字顯示方式的標簽叫做文字格式標簽（文字樣式標簽……）。與粗體標簽<b>類似的還有斜體標簽<i>和強調標簽 <em>等。我們推薦您使用CSS定義網頁的樣式，而不是類似<b>的XHTML標簽，這里介紹這些標簽的目的是讓您在閱讀別人網頁的源代碼時不至于糊涂。
在XHTML中“<”和“>”是比較特殊的字符，因為它們被用于識別標簽，而且在標簽中的”<“和“>”并不會出現在頁面上。那么如果我們想讓瀏覽器顯示這些特殊字符時該怎么做呢？這時我們就可以使用字符實體，例如小于號“<”在XHTML代碼中寫做“& lt;”。當然，在網頁設計軟件中，這項工作不需要我們手寫代碼來完成。因此我們只要了解這些特殊字符的顯示原理即可，而不需要記住每一個特殊字符的書寫代碼。
用記事本打開之前創建的”index.html”文件。對源文件做如下修改(紅字提示)，保存后看看之前之后有什么不同，請確認您的網頁與這個頁面相同。
下面再來練習一下使用字符實體。打開之前保存的“index.html”，在</body>標簽前輸入如下代碼：
保存修改并重新瀏覽網頁就可以看到如下的內容了：
“Copyright©2005-2006XXX版權沒有”。我們注意到源代碼中的“©”在瀏覽器中顯示為“@”。請再次確認您的網頁與這個頁面相同，完工。
學完了文字格式標簽你也許會想，如果我希望一個字同時以粗體和斜體顯示該怎么做呢？是不是簡單的為它加上雙層標簽<b>和<i>呢？沒錯。請看下面的例子：
<b><i>我被兩個標簽包圍啦！</i></b>
將在瀏覽器中顯示為我被兩個標簽包圍啦！
這里你唯一需要注意的是標簽的順序。如果你將上面的標簽順序寫成<b><i>我被兩個標簽包圍啦！</b></i>，一般的瀏覽器將不產生任何錯誤。但是這是不符合XHTML標準的寫法。請你一定要按順序關閉標簽。
#p#副標題#e#
毫不夸張的說，是超級鏈接把整個互聯網連接了起來。超級鏈接幾乎可以指向互聯網上的任何資源，例如另外一個網頁、一張圖片、一首MP3歌曲等等。而利用XHTML建立超級鏈接的語法卻非常簡單，只需要一對<a></a>標簽即可：
| <a href=”這個超級鏈接將要指向的網址”>頁面上將要顯示的文字或者圖片等</a> |
例如：
| <a href=”http://www.mxio.cn/”>設計之家</a> |
將會在瀏覽器中顯示為一個超級鏈接，點擊它就將進入設計之家（http://www.mxio.cn/）。效果如下：
其中<a>標簽中的href屬性就是這個超級鏈接所要指向的地址，她可以是一般的網址也可以是郵件的地址，在稍后的練習實例中我們將創建一個指向郵件地址的超級鏈接。<a>和</a>之間的內容（元素）將被作為超級鏈接顯示在網頁上。注意href屬性值為一般網址（絕對路徑）時，其”http://”是不可以省略的，否則瀏覽器將把它作為相對路徑來識別。絕對路徑與相對路徑的區別不在本XHTML教程的討論范圍之內，如果你不了解可以到百度搜索相關的資料。
您在瀏覽其他網站的時候可能注意到了，有一些超級鏈接可以讓您回到頁面的頂端或者是當前網頁內任何一個位置。就像下面這個鏈接：
回到標題
它的實現方法如下，首先在標題處加上如下代碼。：
| <h1>XHTML入門學習教程――XHTML超級鏈接<a id=”biaoti”></a></h1> |
而超級鏈接本身的代碼為：
| <a href=”#biaoti”>回到標題</a> |
頁面內的跳轉在您的頁面內有大量的內容時，可以讓你的用戶很快的找到所需要的信息。通常情況下都是在一些說明性的網頁內做目錄使用。
下面練習在之前的”index.html”中添加超級鏈接。打開”index.html“，對代碼做如下修改：
| <html> 中間代碼省略…… <p><a href=”mailto:xxx@xxx.com”>聯系我</a></p><!– 注意要把郵箱地址改為你自己的 –> <p>Copyright©2005-2006XXX版權沒有</p> </body> </html> |
保存之后瀏覽一下自己的網頁，請確認您的網頁與該頁面相同。點擊一下新創建的鏈接，如果你安裝了Outlook之類的郵件管理軟件，就會打開一個給自己發送郵件的界面了。
#p#副標題#e#
列表用于羅列出來一系列相似或者相關的項目.
無序列表的標簽是<ul></ul>，而每一個列表項目則用<li>標簽。下面我們就用無序列表來改寫我們的”index.html”，打開之前保存的文件后，將”針對學生提供的服務”一段的代碼修改為如下的無序列表代碼：
| <h3>針對學生的服務</h3> <ul> <li>代寫寒暑假作業（數學<b>不</b>保證沒有錯題，語文不保證沒有錯字，英語作業你找別人吧）</li> <li>幫忙欺負<b>四年級</b>以下同學，<b>特體須加收費用</b>。</li> <li> 家長會幫忙<i>冒充家長</i>。 </li> </ul> |
保存后瀏覽網頁，請確認您的網頁和這個頁面相同。。
有序列表的標簽是<ol></ol>，列表項目仍然是<li>。我們再用有序列表來改寫 “index.html”的”針對家長一段“，將剛剛修改的那段代碼中的<ul></ul>改為<ol>< /ol>：
| <ol> <li>代寫寒暑假作業（數學<em>不</em>保證沒有錯題，語文<em>不</em>保證沒有錯字，<b>英語作業你找別人吧！</b>）。</li> <li>幫忙欺負<strong>四年級以下</strong>同學，<strong>特體</strong>須加收費用。</li> <li>家長會幫忙<i>冒充家長</i>。</li> </ol> |
保存后瀏覽網頁，請確認您頁面的效果與這個頁面相同。我們可以看到無序列表與有序列表的不同就是項目每個項目前面是小圓點還是數字。
]]>