什么是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的縮寫），即超文本鏈接標(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)普通話。對(duì)于現(xiàn)在才剛剛開始學(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)格的書寫標(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ǔ)。有些人可能聽說(shuō)需要學(xué)習(xí)完HTML才可以學(xué)XHTML，事實(shí)并非如此，菜鳥吧(cainiao8.com)的XHTML教程就是面向沒(méi)有任何基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)新手的。如果你已經(jīng)熟練的掌握了HTML，就不必看我們的入門教程了，我們?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ō)到這里，下面就讓我們開始學(xué)習(xí)XHTML吧。
用一分鐘制作自己的第一個(gè)網(wǎng)頁(yè)：
下面我們來(lái)試著做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，希望您能跟著我們操作，這只會(huì)花費(fèi)您一分鐘時(shí)間。現(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”，在“保存類型”一欄選擇”所有文件”，然后點(diǎn)擊“保存按鈕”)
保存之后，雙擊該文件，瀏覽器就會(huì)自動(dòng)打開這個(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>開頭，以</html>結(jié)尾，它們分別代表網(wǎng)頁(yè)文件的開始和結(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)是為瀏覽器寫的，它將不會(huì)顯示在頁(yè)面上，而身子(body)是為網(wǎng)站的用戶寫的，是瀏覽器將要顯示的內(nèi)容。
菜鳥惡搞XHTML之錯(cuò)誤示例
打開下面這兩個(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)容吧。
#p#副標(biāo)題#e#
?
XHTML標(biāo)簽簡(jiǎn)介
也許你在上一節(jié)就注意到了，XHTML文件與普通的純文本文件的最大不同在于一些用“<>”包含的東西，例如< body>。我們把他們叫做標(biāo)簽。通常情況下XHTML標(biāo)簽都是成對(duì)出現(xiàn)的，例如<html></html>。可以看到它們只相差一個(gè)“/”，我們把類似<html>的沒(méi)有“/”的標(biāo)簽叫做起始標(biāo)簽，而它對(duì)應(yīng)的有“/”的</html>則叫終止標(biāo)簽，終止標(biāo)簽與起始標(biāo)簽只相差一個(gè)”/”符號(hào)。當(dāng)然了，XHTML也有一些標(biāo)簽并不成對(duì)出現(xiàn)，它們沒(méi)有終止標(biāo)簽，我們把這樣的標(biāo)簽叫做“空標(biāo)簽”。空標(biāo)簽的內(nèi)容在稍后的教程中將會(huì)提到。
關(guān)于大小寫
以前各個(gè)版本HTML標(biāo)簽并不區(qū)分大小寫，例如標(biāo)簽<HTML>和標(biāo)簽<html>是等效的。而在XHTML中，所有標(biāo)簽均使用小寫。為了使自己的網(wǎng)站能夠符合XHTML標(biāo)準(zhǔn)，您應(yīng)該養(yǎng)成良好的習(xí)慣，在制作網(wǎng)頁(yè)的過(guò)程中所有標(biāo)簽一律使用小寫。
XHTML標(biāo)簽的作用（元素）
打開上一節(jié)教程中保存的html文件。將第六行的“這是我的第一個(gè)網(wǎng)頁(yè)。”改為“這是我的第一個(gè)<b>網(wǎng)頁(yè)</b>。”，然后保存修改后再次瀏覽網(wǎng)頁(yè)。你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)兩個(gè)字變成了粗體顯示，效果如下：
這是我的第一個(gè)網(wǎng)頁(yè)。
區(qū)別很明顯，網(wǎng)頁(yè)兩個(gè)字由于被“包”在了標(biāo)簽<b></b>中而變成了粗體。<b>標(biāo)簽的意思就是粗體顯示，而它只會(huì)影響到被它包含的內(nèi)容。這就是XHTML標(biāo)簽的作用方式。我們把被標(biāo)簽“包住”的內(nèi)容叫做元素。本例中“網(wǎng)頁(yè)”兩個(gè)字就是<b>標(biāo)簽的元素。
標(biāo)簽的屬性
<hr size=”1″>
我們可以為XHTML標(biāo)簽設(shè)置一些屬性。請(qǐng)你注意上面的水平線，原本它的代碼是：<hr />。在XHTML中<hr>標(biāo)簽就是一條水平分割線，我們可以為這條分割線添加一個(gè)屬性“size”（即分割線的大小），他的屬性值為1。那么它的完整代碼就是：
<hr size=”1″ />
類似的，為其他XHTML標(biāo)簽添加屬性的方法也是在標(biāo)簽的起始標(biāo)簽中加入：屬性＝“屬性值”。需要注意的是，屬性值必須使用引號(hào)“括”起來(lái)。單引號(hào)或者雙引號(hào)都可以，但是雙引號(hào)比較常用。
添加屬性的格式： <起始標(biāo)簽 屬性=”屬性值”> 實(shí)例－> <table border=”none”>
注意：普通的XHTML文件有兩個(gè)等級(jí)標(biāo)準(zhǔn)(不算框架標(biāo)準(zhǔn))――過(guò)渡標(biāo)準(zhǔn)和嚴(yán)格標(biāo)準(zhǔn)，其中過(guò)渡標(biāo)準(zhǔn)主要針對(duì)那些習(xí)慣于使用HTML開發(fā)網(wǎng)站的站長(zhǎng)。上面的代碼在過(guò)渡標(biāo)準(zhǔn)中是合法的，可是在嚴(yán)格標(biāo)準(zhǔn)中，size屬性將被視為非法屬性。XHTML不僅是更加標(biāo)準(zhǔn)更加嚴(yán)格的HTML，他還推崇一種構(gòu)建網(wǎng)站的思路。那就是把網(wǎng)頁(yè)的內(nèi)容與樣式分開，這在XHTML中是通過(guò)CSS來(lái)實(shí)現(xiàn)的。因此我們推薦您使用嚴(yán)格標(biāo)準(zhǔn)的XHTML，把定義樣式的任務(wù)完全交給 CSS。(關(guān)于XHTML標(biāo)準(zhǔn)的問(wèn)題將在后面的教程中介紹)
空標(biāo)簽
也許你已經(jīng)注意到了，這里我們沒(méi)有把分割線標(biāo)簽寫成對(duì)稱的<hr></hr>，而是寫成<hr />。其實(shí)這正是我們?cè)谇懊娼坛讨刑岬降牟怀蓪?duì)出現(xiàn)的標(biāo)簽，他只有起始標(biāo)簽<hr>卻沒(méi)有終止標(biāo)簽</hr>。由于它沒(méi)有元素，所以我們把這樣的標(biāo)簽叫做空標(biāo)簽。那么我們?yōu)槭裁匆獙懗?lt;hr />而不是簡(jiǎn)簡(jiǎn)單單地寫成<hr>呢？這樣的書寫格式是為了滿足XHTML中任何標(biāo)簽都需要“關(guān)閉”的規(guī)則。我們把在起始標(biāo)簽的最后添加”/”的方法叫做標(biāo)簽的自閉（或者自關(guān)閉、自終止等等，你喜歡怎么叫都行）。
所有空標(biāo)簽的使用方法的自閉方法都是一致的，就是在起始標(biāo)簽的“>”符號(hào)前加上一個(gè)空格和一個(gè)反斜杠“/”。空格不是必須的，但是個(gè)別的瀏覽器卻無(wú)法識(shí)別<hr/>，只能識(shí)別<hr />。這也正是我們添加空格的原因。（我至今沒(méi)有遇到不兼容的瀏覽器）
#p#副標(biāo)題#e#
常用標(biāo)簽
就像一篇文章一樣，我們的網(wǎng)頁(yè)也要段落分明，也需要重要程度不同的標(biāo)題。本節(jié)就將介紹XHTML中實(shí)現(xiàn)標(biāo)題、段落等功能的常用標(biāo)簽..
標(biāo)題標(biāo)簽<h1>到<h6>
定義標(biāo)題，我們可以使用從<h1>到<h6>這幾個(gè)標(biāo)簽，它們對(duì)應(yīng)的終止標(biāo)簽分別為</h1>到< /h6>，其中<h1>到<h6>字號(hào)順序減小，重要性也逐漸降低。瀏覽器將在標(biāo)題的上面和下面自動(dòng)各空出一行。
段落標(biāo)簽<p>
定義段落使用<p>和</p>，在<p>和</p>之間的內(nèi)容會(huì)被識(shí)別為一個(gè)段落，它就類似我們通常所說(shuō)的一個(gè)“自然段”。與標(biāo)題類似，瀏覽器也會(huì)在段落的開始之前和結(jié)束之后各加一行空白。
換行標(biāo)簽<br />(<br>)
當(dāng)我們?cè)谙肓砥鹨恍袝鴮懳淖謪s又不希望另起一個(gè)自然段的時(shí)候，我們就可以應(yīng)用<br />標(biāo)簽了。<br>標(biāo)簽也是一個(gè)空標(biāo)簽，需要加上一個(gè)”/”以符合XHTML的要求。
水平分割線標(biāo)簽<hr />(<hr>)
實(shí)現(xiàn)水平分割線的標(biāo)簽是<hr />。和<br>標(biāo)簽一樣，<hr>也是一個(gè)空標(biāo)簽，為了遵守XHTML的規(guī)則，需要加上一個(gè)”/”。(下面就是一條分割線)
注釋<!– –>
合理利用上面介紹的四個(gè)標(biāo)簽可以使瀏覽你網(wǎng)頁(yè)的用戶覺(jué)得網(wǎng)頁(yè)的層次清晰，而注釋則可以使你在閱讀自己的網(wǎng)頁(yè)源代碼時(shí)感覺(jué)層次清晰，不至于摸不著頭腦。在<!–和–>之間的東西就是注釋的內(nèi)容，它們將不會(huì)在網(wǎng)頁(yè)上顯示。看看我們?nèi)绾卧谙旅娴木毩?xí)實(shí)例中插入注釋。
練習(xí)實(shí)例
現(xiàn)在打開我們?cè)谏弦还?jié)保存的網(wǎng)頁(yè)，練習(xí)一下本節(jié)學(xué)習(xí)的幾個(gè)重要標(biāo)簽。將<body></body>中的“這是我的第一個(gè)<b>網(wǎng)頁(yè)</b>。”去掉，輸入以下內(nèi)容：
| <h1>服務(wù)公告</h1><!–練習(xí)標(biāo)題的使用，看看字號(hào)是不是變大了？ –> <hr /><!–水平分割線，別忘了那個(gè)”/” –> <h2>本人現(xiàn)面對(duì)全國(guó)的小學(xué)生及家長(zhǎng)同志提供如下服務(wù)：</h2><!–2號(hào)標(biāo)題，看看字號(hào)是不是比1號(hào)標(biāo)題小 –> <h3>針對(duì)學(xué)生的服務(wù)</h3> <p> 代寫寒暑假作業(yè)（數(shù)學(xué)不保證沒(méi)有錯(cuò)題，語(yǔ)文不保證沒(méi)有錯(cuò)字，英語(yǔ)作業(yè)你找別人吧） <br />幫忙欺負(fù)四年級(jí)以下同學(xué)，特體須加收費(fèi)用。 <br />家長(zhǎng)會(huì)幫忙冒充家長(zhǎng)。 </p><!–上面的內(nèi)容是一個(gè)段落 –> <h3>VIP服務(wù)</h3> <p>凡購(gòu)買所有三項(xiàng)服務(wù)者即自動(dòng)升級(jí)為VIP。我們將免費(fèi)為您制作個(gè)人主頁(yè)，完全符合W3C的XHTML標(biāo)準(zhǔn)和ISO2009~。</p> <!–這里網(wǎng)頁(yè)雖然層次還算比較分明，可是你是不是覺(jué)得界面實(shí)在是很難看和簡(jiǎn)陋呢？比如說(shuō)行與行之間沒(méi)有空隙，一號(hào)標(biāo)題 太大了。關(guān)于定義網(wǎng)頁(yè)外觀的方法將在稍后的CSS教程中介紹。忘了說(shuō)主要內(nèi)容了，注釋不會(huì)出現(xiàn)在網(wǎng)頁(yè)上，所以 我們可以在這里打許多廢話。不過(guò)在以后網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中盡量寫一些有提示作用的注釋。–> |
保存修改后瀏覽網(wǎng)頁(yè)，確認(rèn)一下你的網(wǎng)頁(yè)和這個(gè)頁(yè)面相同，完工。
?
#p#副標(biāo)題#e#
?
文字格式與特殊字符
本節(jié)介紹文字格式和特殊字符在XHTML中的實(shí)現(xiàn)方法。
文字格式標(biāo)簽
在之前的教程中我們?cè)?jīng)用過(guò)一次<b>標(biāo)簽，他使得包含在它之中的內(nèi)容變成粗體顯示。例如“<b>菜鳥吧</b>”將顯示為菜鳥吧。我們把這種定義文字顯示方式的標(biāo)簽叫做文字格式標(biāo)簽（文字樣式標(biāo)簽……）。與粗體標(biāo)簽<b>類似的還有斜體標(biāo)簽<i>和強(qiáng)調(diào)標(biāo)簽 <em>等。我們推薦您使用CSS定義網(wǎng)頁(yè)的樣式，而不是類似<b>的XHTML標(biāo)簽，這里介紹這些標(biāo)簽的目的是讓您在閱讀別人網(wǎng)頁(yè)的源代碼時(shí)不至于糊涂。
特殊字符(字符實(shí)體)
在XHTML中“<”和“>”是比較特殊的字符，因?yàn)樗鼈儽挥糜谧R(shí)別標(biāo)簽，而且在標(biāo)簽中的”<“和“>”并不會(huì)出現(xiàn)在頁(yè)面上。那么如果我們想讓瀏覽器顯示這些特殊字符時(shí)該怎么做呢？這時(shí)我們就可以使用字符實(shí)體，例如小于號(hào)“<”在XHTML代碼中寫做“& lt;”。當(dāng)然，在網(wǎng)頁(yè)設(shè)計(jì)軟件中，這項(xiàng)工作不需要我們手寫代碼來(lái)完成。因此我們只要了解這些特殊字符的顯示原理即可，而不需要記住每一個(gè)特殊字符的書寫代碼。
練習(xí)實(shí)例
用記事本打開之前創(chuàng)建的”index.html”文件。對(duì)源文件做如下修改(紅字提示)，保存后看看之前之后有什么不同，請(qǐng)確認(rèn)您的網(wǎng)頁(yè)與這個(gè)頁(yè)面相同。
代寫寒暑假作業(yè)（數(shù)學(xué)<b>不</b>保證沒(méi)有錯(cuò)題，語(yǔ)文不保證沒(méi)有錯(cuò)字，英語(yǔ)作業(yè)你找別人吧）
<br />幫忙欺負(fù)<b>四年級(jí)</b>以下同學(xué)，<b>特體須加收費(fèi)用</b>。
<br />家長(zhǎng)會(huì)幫忙<i>冒充家長(zhǎng)</i>。
</p><!–上面的內(nèi)容是一個(gè)段落 –>
下面再來(lái)練習(xí)一下使用字符實(shí)體。打開之前保存的“index.html”，在</body>標(biāo)簽前輸入如下代碼：
保存修改并重新瀏覽網(wǎng)頁(yè)就可以看到如下的內(nèi)容了：
“Copyright?2005-2006XXX版權(quán)沒(méi)有”。我們注意到源代碼中的“?”在瀏覽器中顯示為“@”。請(qǐng)?jiān)俅未_認(rèn)您的網(wǎng)頁(yè)與這個(gè)頁(yè)面相同，完工。
關(guān)于標(biāo)簽的順序
學(xué)完了文字格式標(biāo)簽?zāi)阋苍S會(huì)想，如果我希望一個(gè)字同時(shí)以粗體和斜體顯示該怎么做呢？是不是簡(jiǎn)單的為它加上雙層標(biāo)簽<b>和<i>呢？沒(méi)錯(cuò)。請(qǐng)看下面的例子：
<b><i>我被兩個(gè)標(biāo)簽包圍啦！</i></b>
將在瀏覽器中顯示為我被兩個(gè)標(biāo)簽包圍啦！
這里你唯一需要注意的是標(biāo)簽的順序。如果你將上面的標(biāo)簽順序?qū)懗?lt;b><i>我被兩個(gè)標(biāo)簽包圍啦！</b></i>，一般的瀏覽器將不產(chǎn)生任何錯(cuò)誤。但是這是不符合XHTML標(biāo)準(zhǔn)的寫法。請(qǐng)你一定要按順序關(guān)閉標(biāo)簽。
?
#p#副標(biāo)題#e#
XHTML超級(jí)鏈接<A>
超級(jí)鏈接<a>標(biāo)簽
毫不夸張的說(shuō)，是超級(jí)鏈接把整個(gè)互聯(lián)網(wǎng)連接了起來(lái)。超級(jí)鏈接幾乎可以指向互聯(lián)網(wǎng)上的任何資源，例如另外一個(gè)網(wǎng)頁(yè)、一張圖片、一首MP3歌曲等等。而利用XHTML建立超級(jí)鏈接的語(yǔ)法卻非常簡(jiǎn)單，只需要一對(duì)<a></a>標(biāo)簽即可：
| <a href=”這個(gè)超級(jí)鏈接將要指向的網(wǎng)址”>頁(yè)面上將要顯示的文字或者圖片等</a> |
例如：
| <a href=”http://www.mxio.cn/”>設(shè)計(jì)之家</a> |
將會(huì)在瀏覽器中顯示為一個(gè)超級(jí)鏈接，點(diǎn)擊它就將進(jìn)入設(shè)計(jì)之家（http://www.mxio.cn/）。效果如下：
其中<a>標(biāo)簽中的href屬性就是這個(gè)超級(jí)鏈接所要指向的地址，她可以是一般的網(wǎng)址也可以是郵件的地址，在稍后的練習(xí)實(shí)例中我們將創(chuàng)建一個(gè)指向郵件地址的超級(jí)鏈接。<a>和</a>之間的內(nèi)容（元素）將被作為超級(jí)鏈接顯示在網(wǎng)頁(yè)上。注意href屬性值為一般網(wǎng)址（絕對(duì)路徑）時(shí)，其”http://”是不可以省略的，否則瀏覽器將把它作為相對(duì)路徑來(lái)識(shí)別。絕對(duì)路徑與相對(duì)路徑的區(qū)別不在本XHTML教程的討論范圍之內(nèi)，如果你不了解可以到百度搜索相關(guān)的資料。
頁(yè)內(nèi)跳轉(zhuǎn)超級(jí)鏈接(錨記)
您在瀏覽其他網(wǎng)站的時(shí)候可能注意到了，有一些超級(jí)鏈接可以讓您回到頁(yè)面的頂端或者是當(dāng)前網(wǎng)頁(yè)內(nèi)任何一個(gè)位置。就像下面這個(gè)鏈接：
回到標(biāo)題
它的實(shí)現(xiàn)方法如下，首先在標(biāo)題處加上如下代碼。：
| <h1>XHTML入門學(xué)習(xí)教程――XHTML超級(jí)鏈接<a id=”biaoti”></a></h1> |
而超級(jí)鏈接本身的代碼為：
| <a href=”#biaoti”>回到標(biāo)題</a> |
頁(yè)面內(nèi)的跳轉(zhuǎn)在您的頁(yè)面內(nèi)有大量的內(nèi)容時(shí)，可以讓你的用戶很快的找到所需要的信息。通常情況下都是在一些說(shuō)明性的網(wǎng)頁(yè)內(nèi)做目錄使用。
鏈接練習(xí)
下面練習(xí)在之前的”index.html”中添加超級(jí)鏈接。打開”index.html“，對(duì)代碼做如下修改：
| <html> 中間代碼省略…… <p><a href=”mailto:xxx@xxx.com”>聯(lián)系我</a></p><!– 注意要把郵箱地址改為你自己的 –> <p>Copyright?2005-2006XXX版權(quán)沒(méi)有</p> </body> </html> |
保存之后瀏覽一下自己的網(wǎng)頁(yè)，請(qǐng)確認(rèn)您的網(wǎng)頁(yè)與該頁(yè)面相同。點(diǎn)擊一下新創(chuàng)建的鏈接，如果你安裝了Outlook之類的郵件管理軟件，就會(huì)打開一個(gè)給自己發(fā)送郵件的界面了。
?
#p#副標(biāo)題#e#
?
列表標(biāo)簽的使用
列表用于羅列出來(lái)一系列相似或者相關(guān)的項(xiàng)目.
無(wú)序列表（項(xiàng)目列表）
無(wú)序列表的標(biāo)簽是<ul></ul>，而每一個(gè)列表項(xiàng)目則用<li>標(biāo)簽。下面我們就用無(wú)序列表來(lái)改寫我們的”index.html”，打開之前保存的文件后，將”針對(duì)學(xué)生提供的服務(wù)”一段的代碼修改為如下的無(wú)序列表代碼：
| <h3>針對(duì)學(xué)生的服務(wù)</h3> <ul> <li>代寫寒暑假作業(yè)（數(shù)學(xué)<b>不</b>保證沒(méi)有錯(cuò)題，語(yǔ)文不保證沒(méi)有錯(cuò)字，英語(yǔ)作業(yè)你找別人吧）</li> <li>幫忙欺負(fù)<b>四年級(jí)</b>以下同學(xué)，<b>特體須加收費(fèi)用</b>。</li> <li> 家長(zhǎng)會(huì)幫忙<i>冒充家長(zhǎng)</i>。 </li> </ul> |
保存后瀏覽網(wǎng)頁(yè)，請(qǐng)確認(rèn)您的網(wǎng)頁(yè)和這個(gè)頁(yè)面相同。。
有序列表
有序列表的標(biāo)簽是<ol></ol>，列表項(xiàng)目仍然是<li>。我們?cè)儆糜行蛄斜韥?lái)改寫 “index.html”的”針對(duì)家長(zhǎng)一段“，將剛剛修改的那段代碼中的<ul></ul>改為<ol>< /ol>：
| <ol> <li>代寫寒暑假作業(yè)（數(shù)學(xué)<em>不</em>保證沒(méi)有錯(cuò)題，語(yǔ)文<em>不</em>保證沒(méi)有錯(cuò)字，<b>英語(yǔ)作業(yè)你找別人吧！</b>）。</li> <li>幫忙欺負(fù)<strong>四年級(jí)以下</strong>同學(xué)，<strong>特體</strong>須加收費(fèi)用。</li> <li>家長(zhǎng)會(huì)幫忙<i>冒充家長(zhǎng)</i>。</li> </ol> |
保存后瀏覽網(wǎng)頁(yè)，請(qǐng)確認(rèn)您頁(yè)面的效果與這個(gè)頁(yè)面相同。我們可以看到無(wú)序列表與有序列表的不同就是項(xiàng)目每個(gè)項(xiàng)目前面是小圓點(diǎn)還是數(shù)字。
