XHTML 结构化：使用 XHTML 重构网站
http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp
我們曾經為本節撰寫的標題是：“XHTML : 簡單的規則，容易的方針。”原因之一是，本節討論的規則和方針是簡單和容易的。原因之二是，一本簡單和容易的 WEB 設計圖書，就像超級市場的新式的免費商品一樣，雖然常見卻可以有效地吸引人的眼球，這樣的東西可以刺激人的興趣，并且鼓勵人們嘗試。
我確實希望本節的內容可以激發你的興趣，并鼓勵你去嘗試。為什么這么說呢？因為一旦你掌握了本章包含的簡單容易的理念，你就會重新思考網頁運作的方式，并開始改變建造它們的方法。然而我并不希望你只是將代碼重新改寫一遍。我希望你可以實實在在地以另一種方式思考和工作。
另一方面，重構才是 XHTML 真正的意義。
在本章，我們將研究結構化標記的機制和涵義。如果你正在將網站標準融入你的開發項目，你或許會覺得本章的內容有些熟悉。不過即便是這方面的老手，也會從本章發現意外的收獲。
XHTML 規則概要
將傳統的 HTML 轉換為 XHTML 1.0 是快捷且無痛的，只要你遵守一些簡單的規則和容易的方針。不管是否使用過 HTML，都不會妨礙你使用 XHTML。
- 使用恰當的文檔類型聲明和命名空間。
- 使用 meta 元素聲明你的內容類型。
- 使用小寫字母書寫所有的元素和屬性。
- 為所有的屬性值加引號。
- 為所有的屬性分配值。
- 關閉所有的標簽。
- 使用空格和斜線關閉空標簽。
- 不要在注釋中寫雙下劃線。
- 確保小于號及和號為 < 和 &
Unicode 和其他字符集
XML、XHTML、和HTML 4.0 文檔的默認字符集是 Unicode，一個由 Unicode 聯盟定義的標準。Unicode 是一套全面的字符集，它為每個字符提供了一個特定的唯一的數字，不論平臺、程序和語言。Unicode 也是我們擁有的最接近通用字母表的事物，盡管它并不是一個字母表，而是一套數字映射方案。
盡管 Unicode 是 web 文檔默認的字符集，開發人員依然可以自由地選擇更適合他們的其他字符集。比方說，美國和西歐的網站常常使用 ISO-8859-1 (Latin-1) 編碼，而中華人民共和國的國家標準是 gb2312。
為表達語義而標記文檔，而不是為了樣式
記住：請最大限度地使用 CSS 來進行布局。在 web 標準的世界里，XHTML 標記與表現無關，它只與文檔結構有關。
結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義，即使是在老的瀏覽器，或是在被用戶關閉了 CSS 的現代瀏覽器中。
不是每個站點都能立即拋棄 HTML 表格布局。CSS 的發明者，W3C，直到 2002 年 11 月才將官方網站轉換為 CSS 布局。然而，即使是頑固的唯標準主義者也不總是將表現從結構中完全分離處理，至少在 XHTML 1 中是做不到的。但是現在，我們可以向這個理想邁出重大的一步，通過將表現從結構中分離（或者說將數據從設計中），即使是混合的傳統的布局也可從中受益。
下面有一些提示，可以幫助你通過更結構化的方式進行思維：
提綱內的色彩
在語法學校，我們中的大部分人都被迫使用標準的提綱格式來寫文章。現在，我們成為了設計師，可以多么自由地擺脫提綱的限制，然后大膽地投身于獨特的個人表達的自由領域（也許我們的宣傳冊和商業站點還不是那么獨特和個人化）。但是至少我們不會再受到提綱的困擾了。
實際上，依照 HTML，我們應該將內容結構化為有組織的層級。在瀏覽器不支持 CSS 的時期，我們無法在交付可供銷售的布局的同時做到這一點。但是今天，在將我們的設計不折不扣地實現的同時，我們有能力交付內在結構良好的文檔。
當你將供網絡使用的文本進行標記，或者當你將已有的文本文檔轉換為網頁時，請使用傳統提綱的這些條目進行思考。
<h1>我的主題</h1> <p>介紹性文字</p> <h2>補充性的觀點</h2> <p>相關文字</p>同時，避免使用已被廢棄的 HTML 元素比如 <font>，或者無語義的元素比如 <br />，來模擬其實不存在的邏輯結構。
比如，不要像這樣做：
<font size="7">我的主題</font><br /> 介紹性文字<br /><br /> <font size="6">補充性的觀點</font><br /> 相關文字<br />根據它們的意義使用元素，而不是根據它們的外觀
我們中一些人已經陷在了一個壞習慣中，當我們僅僅需要一個大號字的文本時使用h1，或者在我們需要在前面加一個圓點符號時使用 li。就像我們在前面的章節討論過的，瀏覽器一直都習慣于將設計屬性強加于 HTML 元素之上。我們都一直習慣于認為，h1 意味著大號字，而li意味著圓點，或者 blockquote 意味著文本縮進。我們中的大多數人還在使用結構化元素模擬表現效果的方式來胡亂地寫作 HTML。
同樣地，假如設計師希望所有的標題使用相同的字號，她會將所有的標題設置為 h1，即使這么做毫無結構化語義可言。
<h1>這是主標題，在我將文本按照提綱格式組織的情況下。</h1> <h1>這不是主標題，但是我希望它與上面的標題使用一樣的字體，但是我不知該如何使用CSS。</h1> <h1>這根本不是一個標題。但是我非常希望頁面中的文字使用相同的字體，以達到我希望的， 如果我了解CSS，就可以在不打亂文檔結構的情況下達到這個設計。</h1>我們必須把我們的小把戲放到一邊，然后開始根據元素的語義來使用它們，而不是根據它們看上去的樣子。實際上，h1可以成為你希望的任何樣子。通過 CSS，h1 可以成為非粗體的小號的羅馬字體，而 p 文本可以成為粗體的大號字，li 也可以沒有圓點（你或者可以使用小貓小狗或者公司標志的 PNG,GIF 或者 JPEG 圖片取而代之）等等。
從今天開始，我們將要使用 CSS 來決定元素的外觀。我們甚至可以根據元素在頁面中或者在站點中所在的位置來改變它們的外觀。 CSS 可以將表現從結構中徹底抽離，并且允許你按照你喜歡的樣式來格式化任何元素。
h1, h2, h3, h4, h5, h6 {font-family: georgia, palatino, "New Century Schoolbook",times, serif;font-weight: normal;font-size: 2em;margin-top: 1em;margin-bottom: 0;}你為什么要這么做呢？這么做的目的是為了在圖形瀏覽器中獲得品牌化的外觀和感覺的同時，在文本瀏覽器、無線設備、HTML 格式的電子郵件中，文檔的結構得到保留。
我們并不想在關于 XHTML 的章節講述更多 CSS 方面的技術。我們只是希望展示文檔結構和可視表達是兩個完全不同的事物，并且結構化元素應被用來轉換文本，而不是強加顯示效果。
使用結構化元素，而不是無意義的垃圾
由于我們已經忘記或者根本不知道 HTML 和 XHTML 的用途是傳達結構化的意義，許多 HTML 爭論者這樣使用標簽來插入列表：
項目一<br /> 項目二<br /> 項目三<br />考慮一下使用有序或者無序列表取而代之：
<ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul>"但是li給我一個圓點，而我不需要圓點！"你也許會這么說。根據上面的章節，CSS不對元素被期望的外觀做任何假定。它等待你來告訴它你所期待的元素外觀。關閉圓點是 CSS 的最基本的能力。它有能力使列表看起來和普通文本沒有兩樣，也可以使列表看起來像圖形導航欄，具有完整的反轉效果。
所以，請使用列表元素來標記列表。相似地，使用 strong 來代替 b，使用 em 代替 i，等等。在大多數桌面瀏覽器缺省狀態下，strong 的顯示效果和 b 相同，而 em 和 i 相同，同時也可以在不破壞文檔結構的情況下創建你期待的視覺效果。
盡管 CSS 不會為任何元素的顯示作假設，瀏覽器卻作了很多假設，并且我們還沒有碰到一個將 strong 顯示為其他效果而不是粗體字的瀏覽器（除非是被設計師創建的 CSS 指示以其他方式顯示）。假如你擔心某個陌生的瀏覽器不會將 strong 顯示為粗體字，你可以編寫這么一條 CSS 規則：
strong {font-weight: bold;font-style: normal;}視覺元素和結構
web 標準不僅要求我們使用何種科技，而且還要遵守使用這些技術的方式。使用 XHTML 來編寫標記，同時使用 CSS 來處理一部分或者全部的布局，并不一定會使站點更易用更輕便，同時節約多少帶寬。就像我們在早期使用的技術那樣，XHTML 和 CSS 也會被誤用和濫用。冗長的 XHTML 和冗長的 HTML 一樣，都會浪費用戶的帶寬和時間。冗長的過度的 CSS 也不能完全的代替表現 HTML 代碼；這只不過是一種糟糕的東西被另一種代替了而已。
無論如何，不要跳過本節。閱讀本章將增進你的技能，為你的網頁減肥，并且使你對標記與設計之間的差異有更清晰的認識。本章中的理念是易于學習的，但是卻能極大的提高網站的性能，以及設計、制作和更新網站的便利性。
在本節，你將學到如何撰寫合乎邏輯的、緊湊的標記，使得你有能力將帶寬流量降低50%左右，在減少服務器負擔和壓力的同時，減少網站的加載時間。通過去除那些表現元素，并改掉那些沒有任何好處的壞習慣，我們就可以達到上述的目的。
這些壞習慣折磨著網絡中的許多站點，特別是那些將 CSS 代碼與主要基于表格的布局混合在一起的站點。這種做法笨拙且不經濟，即使是對于那些在其他領域很有經驗的設計師來說。同時，出現這個問題的幾率是均等的，不論是那些手寫代碼的站點，還是利用可見編輯工具，比如 Dreamweaver 和 GoLive，來創建的站點。
本節會提出這些常見的錯誤，這樣你就可以識別和防范它們，并且學會如何改正錯誤。我們詳細闡述唯一標識符屬性 (id) - ，并展示它如何使你可以編寫極其緊湊的 XHTML 代碼，不論你創建的是混合布局還是純粹的 CSS 布局。
每個元素都必須結構化嗎？
正如上一節中我們講到的那樣，每個元素都可以被結構化，CSS 可使得一個有序或無序的列表顯示為徹頭徹尾的導航欄，其中還擁有反轉按鈕效果。文檔的內容可以通過普通的元素進行標記，這些元素通過特定的結構化屬性標志來指示出它們在網站設計中所扮演的語義角色。
我們在公元 2006 年創建了 W3School 的第一個中文測試版，我們在一開始就使用了 CSS 進行布局，并使用 XHTML 來結構化文檔。每一個其中的元素都是結構化的，從標題到列表，乃至段落。你可以在 w3school 的每個頁面看到具有反轉效果的首頁按鈕和二級菜單按鈕。下面是這兩個組件的 XHTML 代碼：
<div id="header"><h1><a href="/">w3school在線教程</a></h1></div> <div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="html教程">html教程</a></li> <li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li> <li id="b"><a href="/b.asp" title="瀏覽器腳本">瀏覽器腳本</a></li> <li id="s"><a href="/s.asp" title="服務器腳本">服務器腳本</a></li> <li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li> <li id="m"><a href="/m.asp" title="多媒體教程">多媒體教程</a></li> <li id="w"><a href="/w.asp" title="建站手冊">建站手冊</a></li> </ul> </div>div、id 和其他幫手
如果被正確地使用，div 可以成為結構化標記的好幫手，而 id 則是一種令人驚訝的小工具，它使你有能力編寫極其緊湊的 XHTML，以及巧妙地利用 CSS，并通過標準文檔對象模型 (DOM) 向站點添加復雜精巧的行為。
W3C 在其最新的 XHTML2 草案的 XHTML 結構模型中這樣定義 div：
div 元素，通過與 id、class 及 role 屬性配合，提供向文檔添加額外結構的通用機制。這個元素不會將表現的風格定義于內容。所以，創作者可以通過將這個元素與樣式表、xml:lang、屬性等配合使用，使 XHTML 適應他們自身的需求和口味。
div 是 division 的簡寫。division 意為分割、區域、分組。比方說，當你將一系列的鏈接組合在一起，就形成了文檔的一個 division。
確定結構的通用機制
所有編寫 HTML 的人對段落和標題這類常見的元素都很熟悉，但是有些人對 div 就可能不那么熟悉了。在W3C的描述中我們可以找到理解 div 元素的關鍵，“一種添加結構的通用機制。”
在本站的首頁，我們將教程目錄列表封裝于一個 div 之中，這是因為教程目錄并不是正文的任何元素的一部分。其中，h2元素標記每個教程的標題，同時 ul 列表元素標記每個教程的詳細列表。但是在更大更具體的意義中，這個教程目錄扮演了一個結構化的角色，即二級導航組件。為了強調這個角色，我們使用 navsecond 這個 id 標注這個 div。
<div id="navsecond"><h2>HTML教程</h2> <ul> <li><a href="/html/index.asp" title="HTML教程">HTML</a></li> <li><a href="/xhtml/index.asp" title="XHTML教程">XHTML</a></li> <li><a href="/css/index.asp" title="CSS教程">CSS</a></li> <li><a href="/tcpip/index.asp" title="TCP/IP教程">TCP/IP</a></li> </ul><h2>XML教程</h2> <ul> <li><a href="/xml/index.asp" title="XML教程">XML</a></li> <li><a href="/xsl/xsl_languages.asp" title="XSL語言">XSL</a></li> ... ... ... ...</div>你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名規則。但是語義的 (semantic) 或者元結構化 (meta-structural) 的命名是最好的（即能夠解釋其中元素所執行功能的命名）。
當客戶決定使用藍色時，你會覺得將站點某部分命名為 orangebox（橙色框）會非常地傻。下面的這種情況中，你會覺得自己更傻，當距離最后交付只有六個月時，你開始調校樣式表，卻怎么也想不起來 "Gladys"（格拉迪斯，女子名）到底代表導航區、側欄還是搜索框。
因此，將 id 標注為 "menu"、"content" 或者 "searchform"會幫助你回憶。進一步講，標記不等同于設計，結構良好的的頁面可以被格式化為你希望的任何樣子。這樣做的結果是，無論你使用純粹 CSS 布局或者混合布局，你都會徹底改掉使用表現標記進行思考和創作的習慣。
id Vs. class
id 屬性對于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣。它們都可以回溯到 HTML 時代。id 屬性為一個元素分配一個唯一的名字。每個名字只能在被賦予的頁面使用一次。（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個 div 或者其他別的元素都不能使用這個名字。相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個段落都可以使用名為 "small" 或者"footnote" 的 class 名稱）。下面的標記將有助于闡明 id 和 class 的差異：
<div id="searchform">Search form components go here. This section of the page is unique.</div> <div class="blogentry"><h2>Today's blog post</h2><p>Blog content goes here.</p><p>Here is another paragraph of blog content.</p><p>Just as there can be many paragraphs on a page, so toothere may be many entries in a blog. A blog page could usemultiple instances of the class "blogentry" (or any otherclass).</p> </div><div class="blogentry"><h2>Yesterday's blog post</h2><p>In fact, here we are inside another div of class"blogentry."</p><p>They reproduce like rabbits.</p><p>If there are ten blog posts on this page, there mightbe ten divs of class "blogentry" as well.</p> </div>在這個例子中，名為 searchform 的 div 被用來封裝包含搜索表單的頁面區域，而 div class="blogentry" 則用來封裝 blog 中的每個文章入口。在頁面中只有一個搜索表單，所以我們選擇 id 標注這個唯一的組件。但是 blog 則擁有許多的（文章）入口，所以 class 屬性被應用于這種情況。同樣地，新聞站點通常擁有多個 div，這些 div 的 class 可以命名為 "newsitem" 或者別的什么。
然而不是所有的站點都需要 div。blog 站點可以僅僅使用 h1, H2, 和 h2 標題和 <p> 段落，新聞站點也一樣。我們在這里展示 class 為 blogentry 的 div，并不是鼓勵你在站點中塞滿 div，而僅僅是為了向你展示這個原則：在同一個 HTML 文檔中，使用多次 class，但只能使用一次 id。
粘性貼紙理論
把 id 屬性比作粘性貼紙來進行思考應該是有幫助的。我會在冰箱上拍一張貼紙來提醒自己去買牛奶，電話上面也會貼一張，提醒我給一位逾期繳納的客戶打電話。還有一個，被貼在賬本夾上面，來提醒我這個月 15 號之前必須繳納的賬單。
id同樣會標注文檔中的特殊區域，以便提醒你哪個區域需要特殊的處理，在這點上，id屬性與粘性貼紙是相似的。為了實現所謂的特殊處理，你需要使用這個特殊的id在樣式表中編寫若干規則，或者在JavaScript文件中添加幾行代碼。比方說，你的CSS文件中有一些特定的規則，這些規則只應用于id名為searchform的div內的元素。
當某一 id 屬性作為一個有磁性的東西（磁鐵）被用于一系列特定的 CSS 規則時，它被稱為CSS選擇器。有許多創建選擇器的方法，不過 id 是很容易使用的，并且有多的用途。
id 的力量
id 屬性不可思議地強有力。它具有以下的能力：
- 作為樣式表選擇器，使我們有能力創作緊湊的最小化的 XHTML。
- 作為超文本的目標錨，取代過時的 name 屬性。
- 作為從基于 DOM 的腳本來定位特定元素的方法。
- 作為對象元素的名稱。
- 作為一種綜合用途處理 (general purpose processing) 的工具（在 W3C 的例子中，“當把數據從HTML頁面中提取到數據庫，或將 HTML 文檔轉換為其他格式等情況下，作為域識別工具來使用。”）。
id的規則
id 值必須以字母或者下劃線開始；不能以數字開始。雖然 W3C 驗證不會捕獲這個錯誤，但是 XML 解析器會的。同時，如果你將 id 與 JavaScript 在表單中配合使用，那么 id 名稱和值必須是合法的 JavaScript 變量。空格和連字號，特別是連字號，是不被允許的。不僅如此，將下劃線用于 class 或者 id 名都不是個好主意，這是由于在 CSS2.0（以及某些瀏覽器）中的限制。
語義標記和可用性
現在，我們已經討論過了用途廣泛的 XHTML 元素（特別是 div 和 id），讓我們在看看關于本站首頁的例子。首先讓我們回顧一下這個位于報頭位置的菜單：
<div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="html教程">html教程</a></li> <li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li> <li id="b"><a href="/b.asp" title="瀏覽器腳本">瀏覽器腳本</a></li> <li id="s"><a href="/s.asp" title="服務器腳本">服務器腳本</a></li> <li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li> <li id="m"><a href="/m.asp" title="多媒體教程">多媒體教程</a></li> <li id="w"><a href="/w.asp" title="建站手冊">建站手冊</a></li> </ul> </div>我們擁有七個鏈接，每個鏈接被分配一個id來對應相應的內容：例如名為 h 的 id 對應 HTML 教程，以此類推。同時這些鏈接被封裝于名為 menu 的列表元素內，名為 menu 的 id 標明了這個列表的職能 - 一個菜單列表，而更外圍的名為 navfirst 的 div 則用來標注頁面中的這個節 (section)，將之與諸如主要內容 (maincontent)、側欄 (sidebar) 和頁腳 (footer) 之類的元素區別開來。
div 和 ul 兩個元素提供了真實的結構，即標明了其中內容的職能（導航欄）和它在文檔中所屬的位置（頁面的報頭位置）。相反地，傳統的表格布局無法提供有關數據的任何語義信息，同時會輕松地吃掉三倍的帶寬。
請注意這些標記沒有包含img標簽，所以不會牽扯到 width、height、background 或者 border 等等屬性。同時它沒有使用表格單元格，也不會涉及相關的一系列屬性。它非常地干凈小巧，同時提供了所有可供理解它的信息。
通過與 CSS 配合使用，這些標記向網站訪問者提供了可靠的可快速加載的布局。同時也提供了為訪問者創造更靈活多樣的外觀的可能性。并且在無 CSS 的環境中，我們的結構良好的標記依然可以毫不混亂地提供所有的內容。
目光敏銳的讀者也許已經發現，a 元素中包含的文本并沒有被瀏覽器顯示出來，這也要歸功于結構化標記與 CSS 的完美配合，使我們可以通過幾行 CSS 規則來定義一個觸發機制，當用戶使用圖形瀏覽器時，他們會看到漂亮的導航按鈕，而當用戶使用純文本的閱讀器時，他們也可以得到全部的文本，這樣，對所有的用戶來說，內容都是一樣的。
并且，由于標記沒有包含圖像和表格單元，這個導航欄組件可以在不改變結構的情況下被站點內的任何頁面所引用，同時賦予它不同的視覺效果。簡而言之，通過對代碼進行模塊化，我們提高了代碼的復用性。
轉載于:https://www.cnblogs.com/jediael/p/4304079.html
總結
以上是生活随笔為你收集整理的XHTML 结构化：使用 XHTML 重构网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SGU 114
- 下一篇： iOS 淘宝买 开发者证书 进行真机调试