XHTML教程——標籤

文章目錄

• 練習執行個體

XHTML標籤簡介

也許你在上一節就注意到了，XHTML檔案與普通的純文字檔案的最大不同在於一些用“<>”包含的東西，例如<body>。我們把他們叫做標籤。通常情況下XHTML標籤都是成對出現的，例如<html></html>。可以看到它們只相差一個“/”，我們把類似<html>的沒有“/”的標籤叫做起始標籤，而它對應的有“/”的</html>則叫終止標籤，終止標籤與起始標籤只相差一個"/"符號。當然了，XHTML也有一些標籤並不成對出現，它們沒有終止標籤，我們把這樣的標籤叫做“空標籤”。空標籤的內容在稍後的教程中將會提到。

關於大小寫

以前各個版本HTML標籤並不區分大小寫，例如標籤<HTML>和標籤<html>是等效的。而在XHTML中，所有標籤均使用小寫。為了使自己的網站能夠符合XHTML標準，您應該養成良好的習慣，在製作網頁的過程中所有標籤一律使用小寫。

XHTML標籤的作用（元素）

開啟上一節教程中儲存的html檔案。將第六行的“這是我的第一個網頁。”改為“這是我的第一個<b>網頁</b>。”，然後儲存修改後再次瀏覽網頁。你會發現網頁兩個字變成了粗體顯示，效果如下：

　　這是我的第一個網頁。

區別很明顯，網頁兩個字由於被“包”在了標籤<b></b>中而變成了粗體。<b>標籤的意思就是粗體顯示，而它只會影響到被它包含的內容。這就是XHTML標籤的作用方式。我們把被標籤以及它“包住”的內容叫做元素(element)。本例中“網頁”兩個字和<b>標籤就是網頁中的一個元素。

標籤的屬性

<hr  />

我們可以為XHTML標籤設定一些屬性。請你注意上面的水平線標籤，原本它的代碼是：<hr />。在HTML中<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 />。這也正是我們添加空格的原因。（現在幾乎不會遇到不相容的瀏覽器了）

關於標籤的補充

我們已經瞭解了標籤的概念，我們是從<b>這個樣本標籤開始的。不過我希望大家以後都不要使用這個標籤，而是使用strong來替代它。即：

這是我的第一個<strong>網頁</strong>

我們會在後面解釋為什麼用strong，而不使用b

 

XHTML教程——常用標籤

標題標籤<h1>到<h6>

定義標題，我們可以使用從<h1>到<h6>這幾個標籤，它們對應的終止標籤分別為</h1>到</h6>，其中<h1>到<h6>字型大小順序減小，重要性也逐漸降低。通常瀏覽器將在標題的上面和下面自動各空出一行距離。

段落標籤<p>

定義段落使用<p>和</p>，在<p>和</p>之間的內容會被識別為一個段落，它就類似我們通常所說的一個“自然段”。與標題類似，瀏覽器也會在段落的開始之前和結束之後各加一行空白。

換列標籤<br />(<br>)

當我們在想另起一行書寫文字卻又不希望另起一個自然段的時候，我們就可以應用<br />標籤了。<br />標籤也是一個空標籤，需要加上一個"/"以符合XHTML的要求。

水平分割線標籤<hr />(<hr>)

實現水平分割線的標籤是<hr />。和<br />標籤一樣，<hr>也是一個空標籤，為了遵守XHTML的規則，需要加上一個"/"。(下面就是一條分割線)

 

注釋<!--　-->

合理利用上面介紹的四個標籤可以使瀏覽你網頁的使用者覺得網頁的層次清晰，而注釋則可以使你在閱讀自己的網頁原始碼時感覺層次清晰，不至於摸不著頭腦。在<!--和-->之間的東西就是注釋的內容，它們將不會在網頁上顯示。看看我們如何在下面的練習執行個體中插入注釋。

練習執行個體

現在開啟我們在上一節儲存的網頁，練習一下本節學習的幾個重要標籤。將<body></body>中的“這是我的第一個<b>網頁</b>。”去掉，輸入以下內容：

<html>
<head>
<title>我是這個網頁的標題</title>
</head>
<body>
<h1>服務公告</h1><!--練習標題的使用，看看字型大小是不是變大了？ -->
<hr /><!--水平分割線，別忘了那個"/" -->
<h2>本人現面對全國的小學生及家長同志提供如下服務：</h2>
<!--2號標題，看看字型大小是不是比1號標題小 -->
<h3>針對學生的服務</h3>
<p>
代寫寒暑假作業（數學不保證沒有錯題，語文不保證沒有錯字，英語作業你找別人吧）
<br />幫忙欺負四年級以下同學，特體須加收費用。
<br />家長會幫忙冒充家長。
</p><!--上面的內容是一個段落 -->
<h3>VIP服務</h3>
<p>凡購買所有三項服務者即自動升級為VIP。我們將免費為您製作個人首頁，<br />
完全符合W3C的XHTML標準和ISO2009~。</p>
<!--這裡網頁雖然層次還算比較分明，
可是你是不是覺得介面實在是很難看和簡陋呢？<br />
比如說行與行之間沒有空隙，一號標題太大了。
關於定義網頁外觀的方法將在稍後的CSS教程中介紹。<br />
忘了說主要內容了，注釋不會出現在網頁上，所以我們可以在這裡打許多廢話-->
</body>
</html>    

儲存修改後瀏覽網頁，確認一下你的網頁和這個頁面相同，完工。