XHTML結構化:使用XHTML按標準重構網站

來源:互聯網
上載者:User
xhtml|標準

我們曾經為本節撰寫的標題是:“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則是一種令人驚訝的小工具,它使你有能力編寫極其緊湊的XTHML,以及巧妙地利用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. Thissection 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 too   there may be many entries in a blog. A blog page could use   multiple instances of the class "blogentry" (or any other   class).</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 might   be 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, 和h3標題和<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規則來定義一個觸發機制,當使用者使用圖形瀏覽器時,他們會看到漂亮的導覽按鈕,而當使用者使用純文字的閱讀器時,他們也可以得到全部的文本,這樣,對所有的使用者來說,內容都是一樣的。

並且,由於標記沒有包含映像和表格單元,這個導覽列組件可以在不改變結構的情況下被網站內的任何頁面所引用,同時賦予它不同的視覺效果。簡而言之,通過對代碼進行模組化,我們提高了代碼的複用性。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。