使用Dojo的Ajax應用開發(fā)進階教程,第2部分富含語義的HTML

1、中國 選擇 dw 全部內(nèi)容?索解決方案服務產(chǎn)品支持與下載個性化服務成 富, 軟件工程師 , ibm 中國軟件開發(fā)中心簡介： html 語言是互聯(lián)網(wǎng)的基礎。如何正確合理的編寫 html 文檔，是很多 web 開發(fā)人員關心的問題。富含語義的 html 是一種 web 應用開發(fā)的實踐，它強調(diào)從文檔所需要表達的語義出發(fā)，使用 html 語法中表示文檔?構和富含語義的元素來編寫 html 文檔，從而使得 web應用的 ?構與展示分離，降低各部分之間的耦合度。隨? ajax 應用的 ?行，這種實踐越來越為web 開發(fā)人員所接受。本文詳細介紹富含語義的 html 這一開發(fā)實踐，供 web 開發(fā)人員參考。查看

2、本系列更多內(nèi)容本文的標簽: dojo標記本文！發(fā)布日期： 2009 年 7 月 16 日級別：中級建議 : 0 (添加評論 )平均分 （共 0 個評分 ）developerworks 中國web development文檔庫html 是開發(fā) web 應用的基礎。目前已經(jīng)有數(shù)以千億的使用 html 語言編寫的網(wǎng)頁。html 語言的規(guī)范也不斷在演進和更新。html語言雖然上手比較簡單，但是如何開發(fā)出組織良好、?構清晰和可維護性高的 html 文檔，對很多 web 開發(fā)人員來說，也是一個值得探討的話題。隨? ajax 應用的 ?行，一種稱為“ 富含語義的 html （semantic html）”

3、的最佳實踐，逐漸被廣大 web 開發(fā)人員所推崇。這種實踐的主要思想是還 html 以本來面目，只使用 html 來描述文檔的?構，而把與展示相關的部分從 html 文檔中剝離出去，交給 css 來處理。本文將詳細介紹這一最佳實踐，涉及的內(nèi)容包括 html 規(guī)范的演化歷史、推薦使用的 html 元素和屬性、一系列具體的最佳實踐和微格式。下面從富含語義的 html 的簡要介紹開始，所涉及的內(nèi)容包括 html 規(guī)范歷史以及它與 css 和 javascript 的關系。富含語義的 html 介紹富含語義的 html （semantic html）指的是編寫 html 文檔的一種很好的實踐。這種實踐要

4、求在編寫 html 文檔時，盡可能的使用 html 規(guī)范中定義的與文檔?構相關的富含語義的元素，而避免使用與展示相關的元素，將展示相關的內(nèi)容交給 css 去處理。通過應用這種實踐，可以將 html 文檔的 ?構與展示分離，使兩?達到松散耦合。這種松散耦合帶來的好處是使得?構和展示可以分別獨立變化，不會雜糅在一起。當只需要修改 web 應用的外觀時，理想情況下，web 應用的 html 文檔都不需要修改，只需要修改css 文件即可。ajax 應用的 ?行，從一個方面推動了這種實踐的?行。目前的 web 2.0 應用都要求快速上線，并且以漸進的方式不斷推出新功能，即所謂的 “ 永遠 beta 版（

5、 perpetual beta）” 。這種需求對于 web 應用的架構有比較高的要求。只有在各個部分松散耦合的情況下，快速添加新功能或改進已有功能才是可能的。富含語義的 html 的實踐促進了 web 應用的松散耦合，因此越來越被廣大 web 開發(fā)人員所接受。另外，html 語言自身的演化發(fā)展，也從一個側面反映出了這個趨勢。下面將從簡要介紹 html 語言的歷史開始，并介紹富含語義的 html 與 css 和 ajax 應用的關系。html 的歷史html 語言從誕生之日起一?在不斷演化，其規(guī)范的版本也有很多。html 的發(fā)展歷史可以簡要地概括如下。可以在參考資料中找到這些規(guī)范的鏈接。html

6、 最初的草案html 最早使用在歐洲核?能研究機構中，用來方便研究人員使用和共享文檔。在 1991 年出現(xiàn)的關于 html 的最早的說明中， html 中共包含 22 個元素，其中的 13 個保留到了 html 4 中。由于 html 最初是用來描述科學文檔的，這 22 個元素基本都是用來描述文檔的?構的。比如 用來表示文檔之間的超鏈接； 表示文檔中的段落； 、 、 、 、 和 用來表示不同級別的標題。html 2.0html 2.0 規(guī)范在 1995 年 11 月發(fā)布為 rfc 1866。2.0 規(guī)范中增加了 和與表單提交相關的 、 和 等元素。html 3.2html 3.2 規(guī)范在 19

7、97 年 1 月作為 w3c 的推薦規(guī)范發(fā)布。正是在這個版本中，由 netscape 和微軟的 internet explorer 引?的很多與展示相關的元素被規(guī)范化。這些元素包括 、 、 、 、 和 等。這些元素使得 html 頁面的 ?構與展示被雜糅在一起。html 4.01html 4.01 規(guī)范在 1999 年 12 月作為 w3c 的推薦規(guī)范發(fā)布，并于 2000 年 5 月成為國際標準。html 4.01 規(guī)范試圖解決html 3.2 規(guī)范中引 ?的與展示相關的元素的問題，與此同時，?需要考慮規(guī)范的向后兼容性。html 4.01 規(guī)范把許多與表示相關的元素標記為廢棄的，不推薦使用。同

8、時引?了三種“ 風格（ flavor ）” 。在 “ 嚴格（ strict ）” 風格中，廢棄的元素是不能使用的；在 “ 過渡性（ transitional）” 風格中，廢棄的元素是可以使用的；在“ 框架（ frameset）” 風格中，只允許使用與框架相關的元素。html 5作為 html 規(guī)范的下一個版本，html 5 引 ?了更多富含語義的元素，如 表示網(wǎng)站的導航欄， 表示文檔中的章節(jié)；與此同時，在 html 4.01 中被廢棄的一些元素，如 和 等被移除了。從上面列出的 html 規(guī)范的歷史中可以看出，html 從僅包含表示文檔?構的元素，到后來引?了與展示相關的元素，再到目前兩?并存

9、，以及下一個版本中展示相關的元素部分被移除。html 規(guī)范的發(fā)展趨勢是與展示相關的元素將逐步消失。html 文檔應該描述文檔本身，而不應該描述文檔如何展示給用戶。html 規(guī)范的發(fā)展以一種螺旋式上升的方式實踐?這個最初的目標。富含語義的 html 與 css在 html 中，與展示相關的元素的引?，主要是由于當時并沒有好的方式來指明 html 文檔中元素的樣式。比如將一段文本用加粗或傾斜的字體來顯示。在 css 廣泛應用之前，只能通過 html 元素或?qū)傩詠韺崿F(xiàn)。由此引?了 和 這樣的元素。隨? css 規(guī)范在瀏覽器中得到廣泛的支持，web 開發(fā)人員有了更好的方式來指明 html 文檔中元素的

10、樣式。比如將一段文本加粗顯示可以使用css 語法 font-weight : bold;來實現(xiàn)。正是由于 css 的出現(xiàn)與 ?行，富含語義的 html 實踐才成為可能。富含語義的 html 與 ajax 應用目前 ajax 應用非常?行，越來越多的應用采用 ajax 技術來提高自身的用戶體驗。ajax 雖然是基于原有的 html 、javascript 和 css等技術，但是它重新定義了這三種技術在 web 應用開發(fā)中的定位。一個典型的 ajax 應用的 ?構如圖 1 所示。圖 1. ajax 應用的典型結構圖內(nèi)容介紹html 元素與屬性最佳實踐微格式其它話題總?聲明參考資料關于作?建議標簽?

11、索所有標簽熱門文章標簽 | 我的文章標簽無活動標簽使用 dojo 的 ajax 應用開發(fā)進階教程，第 2 部分 : 富含語義的 html圖 1. ajax 應用的典型結構圖在 圖 1 中可以看到，ajax 應用由三個部分組成，分別是?構、展示和行為。?構指的是應用的基本內(nèi)容?構，由 html 來描述；展示指的是應用的外觀，包括顏色、字體大?等樣式，由 css 來描述；行為指的是應用與用戶的交互，包括界面的部分刷新、處理與服務器端的交互等，由 javascript 來描述。在這三個部分中，由 html 描述的文檔?構是整個 ajax 應用的基礎，css 通過各種選擇器為文檔應用樣式，而 java

12、script 則通過 dom 操作來修改文檔?構。富含語義的 html 為 ajax 應用提供了描述?構的最佳方式。在開發(fā) ajax 應用時，從一系列富含語義的 html 文檔出發(fā)，將為后面的開發(fā)打下良好的基礎。html 規(guī)范中元素和屬性眾多，而富含語義的 html 的實踐則推薦使用 html 規(guī)范中表示文檔?構和富含語義的元素和屬性。下面將詳細介紹這些推薦使用的元素和屬性，同時也會討論那些不建議使用的與展示相關的元素和屬性，并說明如何用 css 替換它們?；仨撌議tml 元素與屬性下面將介紹 html 4.01 規(guī)范中的一些重要的元素與屬性。這些元素與屬性大致上分成兩?，一 ?是表示文檔?構

13、和富含語義的，是推薦使用的；另一?是與文檔的展示相關的，是不推薦使用的，而應該用 css 來實現(xiàn)相應的展示效果。文檔結構和富含語義的元素文檔 ?構和富含語義的元素的介紹見表 1。表 1. 文檔結構和富含語義的元素介紹元素說明 、 、 、 、 和 、 、 、 、 和 等六個元素用來表示不同級別的標題。 表示重要性最高的， 表示重要性最低的。瀏覽器對于不同重要性的標題會有默認的顯示樣式，一般是通過字體大?來區(qū)分。當需要表示文檔中每個部分的標題時，推薦使用這六個元素。 元素用來表示文檔中的一個段落。html 文檔中的自然段落推薦使用該元素來表示。 、 和 兩個元素用來表示對文檔中文本的強調(diào)。在強調(diào)性

14、方面， 要高于 。瀏覽器一般把 中的文本顯示為斜體，把 中的文本顯示為粗體。 、 和 元素用來表示縮寫詞，其中 表示一般的縮寫詞，如“ inc.”是“ incorporated”的縮寫；而 表示由首字母組成的縮寫詞，如“ un”是“ unitednations ” 的縮寫。這兩個元素的文本是縮寫詞本身，一般通過 title 屬性來說明完整的詞組。如un。、 和 元素用來表示文檔中的引用。如果在文檔中需要引用其它人說過的話或是來自其它文獻資料的內(nèi)容，應該使用這兩個元素。 用來表示較長的引用，一般自成一個段落；則表示較短的引用，一般嵌在原始文本中。兩個元素的 cite 屬性用來給出引用文本的出處（

15、uri）。瀏覽器通常會把 顯示在縮進的塊中，會為 元素的內(nèi)容添加引號。下面給出兩個元素的示例： four score and seven years agoour fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to theproposition that all men are created equal.；as abraham lincoln said, all menare created equal. 、 、 和 元素用來表示列表型的內(nèi)容。 表示的

16、是無序列表； 表示的是有序列表； 表示列表中的條目。 、 、 和 元素分別表示術語及其描述。 表示 和 對的列表。 元素表示對外部資料的引用。與 和 元素不同的是， 里面包含的是資料的名稱，而不是內(nèi)容。如 javascript 高級程序設計 元素表示程序源代碼。如果需要在 html 文檔中嵌 ?一段計算機代碼，應該使用該元素。如system.out.println(hello world!)?與展示相關的元素和屬性與展示相關的元素和屬性的介紹見表 2。 表 2 中給出了相應的 css 替代實現(xiàn)方式。表 2. 展示相關的元素和屬性介紹元素或?qū)傩哉f明替代實現(xiàn) 元素用來將文檔中的一個部分居中顯將一個

17、元素水平居中顯示的方式有很多。其中一種做法是使示。用自動空白邊，即：margin : 0 auto? 元素用來設置文本的字體。如 font使用 css 來實現(xiàn)： font : bold 12px? 、 和 元素用來實現(xiàn)在文本中間劃線的效果。如 sample。使用 css 來實現(xiàn)： text-decoration:line-through? 元素用來實現(xiàn)在文本下添加下劃線的效果。如 sample使用 css 來實現(xiàn)： text-decoration:underline? 元素用來實現(xiàn)文本加粗的效果。使用 css 來實現(xiàn)： font-weight : bold? 元素用來實現(xiàn)文本傾斜的效果。使用

18、css 來實現(xiàn)： font-style: italic? 元素用來表示與打字機效果一樣的等寬字體顯示。如 sample使用 css 中的 font 來設置等寬字體。 元素用來使得文本的字體變大。使用 css 來實現(xiàn)： font-size : 200%? 元素用來使得文本的字體變?。使用 css 來實現(xiàn)： font-size : 50%? 元素用來在頁面上添加一條水平線?？梢杂?元素代替 。通過設置 的大 ?和背景顏色來達到同樣的效果。colorcolor 屬性用在 中用來表示字體的顏色。使用 css 來實現(xiàn)： color : red?bgcolorbgcolor 屬性用來設置元素的背景顏色。使

19、用 css 來實現(xiàn)： background-color : red?alignalign 屬性用來設置元素內(nèi)容的水平對齊方式。根據(jù)所應用的元素的不同，其可選的值也不同。需要根據(jù)不同的元素選用不同的 css 樣式。一般情況下，可以用 text-align 來代替。valignvalign 屬性用來設置表格中一行的垂?對齊方式。根據(jù)屬性的值不同，使用不同的 css 。如valign =bottom的情況，可以采用絕對定位并設置 bottom 為 0 來實現(xiàn)。face,sizeface 和 size 都是 元素的屬性，分別用來表示字體家族和大?。使用 css 來實現(xiàn)： font-family : v

20、erdana? font-size : 12px?上面介紹的這些元素和屬性，為編寫富含語義的 html 文檔提供了最基礎的構建元素。除此之外，在編寫富含語義的 html 文檔時，還有很多不錯的最佳實踐可以參考。運用這些實踐，將可以從更加宏觀的角度來看待富含語義的 html 。下面將具體介紹這些實踐?；仨撌鬃罴褜嵺`在編寫富含語義的 html 文檔時，有一些比較好的做法可以借鑒。遵循這些做法，將幫助避免很多常見的問題。這些好的實踐包括在編寫 html 文檔之前需要選用合適的 dtd ，編寫完成之后需要驗證 html 文檔的語法，在編寫過程中需要選用適合的元素和class屬性來表示語義等。下面將具體

21、介紹如何在具體的 html 文檔編寫過程中應用這些最佳實踐。選用合適的 dtdhtml 文檔中的文檔?型聲明（document type declaration，dtd ）用來聲明該文檔所使用的 html 規(guī)范的版本。該聲明可以幫助瀏覽器確定如何顯示該文檔。目前主?的 html 規(guī)范版本是 4.01 ，同時 html 4.01 提供三種風格，因此比較常用的 html 文檔 ?型聲明有 表 3 中所示的三種。表 3. html 4.01 規(guī)范對應的 dtd 說明文檔 ?型文檔 ?型聲明說明html 4.01嚴格型不允許使用廢棄的與展示相關的元素與屬性html 4.01過渡型可以使用所有元素和屬性

22、html 4.01框架型可以使用與框架相關的元素和屬性對于富含語義的 html 文檔來說，通常來說是不應該使用與展示相關的元素與屬性的。因此，html 4.01 嚴格型的文檔?型聲明是最適合的。不過有些文檔?構語義，只使用 html 4.01 嚴格型中規(guī)定的元素和屬性的話，是無法實現(xiàn)的。（關于這一點的具體說明，見 繞開 “ 灰色地帶 ” ）。綜合來說，比較好的折衷方案是使用 html 4.01 過渡型的文檔?型聲明，但是在文檔中避免使用廢棄的元素和屬性。如果可以確定 html 4.01 嚴格型中規(guī)定的元素和屬性已經(jīng)足夠的話，使用該?型的文檔?型聲明是最好不過的選擇。需要說明的是，目前的瀏覽器都

23、有很強的容錯性和向后兼容性。因此，即便沒有正確的聲明文檔?型，瀏覽器也能正確的顯示。但這并不意味?可以放棄使用正確的文檔?型聲明。驗證你的 html在選擇好了文檔?型聲明之后，另外一個必須要做的步驟是使用 html 語法驗證器來驗證 html 文檔。 w3c 提供了一個 html 文檔驗證器。（見參考資料）。該驗證器可以根據(jù) url 來驗證，也可以驗證用戶上傳的 html 文件或是?接輸 ?的 html 代碼。該驗證器會根據(jù)文檔的?型聲明進行校驗，并給出詳細的信息?？梢愿鶕?jù)驗證的?果進一步的修改 html 文檔。 圖 2 中給出了對一段不符合 html 4.01 嚴格型語法的 html 文檔進

24、行驗證的?果。圖 2. 使用 w3c html 語法驗證器的結果 2. 使用 w3c html 語法驗證器的結果圖 2 中的 html 文檔在 元素中使用了屬性start，因此不符合 html 4.01 嚴格型規(guī)范。如果改成 html 4.01 過渡型的文檔?型聲明就是合法的。使用合適的元素html 4.01 規(guī)范中提供了不少語義豐富的元素，應該把這些元素應用在適合其語義的地方。大多數(shù) web 開發(fā)人員對于常用的 html元素比較熟悉，使用也較多。對于一些不太常見的元素則很少使用，而用其它元素來代替。比如 和 就在很多情況下被用來代替其它元素。雖然將 和 和 css 相 ?合，都可以達到預期的

25、顯示效果，但是這樣會削弱文檔本身的語義。代碼清單 1 和 清單 2 中給出兩種 html 文檔的寫法。代碼清單 1 中使用 元素，并通過class屬性為 header來表明該 元素的語義是“ 標題 ” 。這種情況下，采用代碼清單 2 中給出的做法，使用 html 規(guī)范提供的 元素會更合適。因為 本身就已經(jīng)包含了 “ 標題 ” 的語義，就不需要再通過class屬性來說明了。清單 1. 錯誤的 html 元素選擇 .header font-size : 1.2em; 標題 內(nèi)容 清單 2. 正確的 html 元素選擇 標題 內(nèi)容 避免錯誤的元素使用對于 html 中的元素，瀏覽器會有默認的展示樣式

26、。比如 元素，通常來說瀏覽器會以縮進的方式來顯示其中被引用的文本；而 元素，瀏覽器則會把其中的文本顯示為斜體。這種默認的展示樣式會造成一種錯誤的元素使用方式，即為了達到某種展示效果而使用該元素，而忽略元素本身的語義。比如希?將一段文本以縮進的方式顯示，就使用 元素，即使該段文本并非是引用自外部文檔的。這種方式的問題在于過分依賴于瀏覽器的默認樣式而忽視元素的語義。一旦瀏覽器的默認樣式發(fā)生變化或是被其它 css 樣式所修改，原本預期的展示效果就無法實現(xiàn)。使用富含語義的 class 屬性html 元素的 class屬性為使用 css 來修改元素的樣式提供了切?點。一個好的 class 屬性可以為已有

27、的 html 元素增加語義。比如 中， 本身的語義是表示標題，而通過使用important這樣一個 class 屬性的值，進一步說明該標題是比較重要的。可以通過 css 為該標題添加加粗、不同的顏色等樣式來突出該語義。對于?似 和 這樣并沒有附加語義，而只是單純作為容器使用的 html 元素來說，好的 class 屬性可以為其添加語義。比如，通過 class屬性就為該 添加語義，說明其表示的是一段摘要。一個好的class屬性值應該要說明其對應的 html 元素的作用，而不應該說明該元素的展現(xiàn)樣式。由于class屬性會在 css 中作為選擇器來使用，因此很容易就誤用一些表示展現(xiàn)樣式的名稱。比如r

28、edtextblueborder這樣的名稱，雖然清晰的描述了其展現(xiàn)邊框，那么名稱也需要相應的修改，變成bluetextredborder。一個好的名稱，在所描述的元素的作用沒有變化時，即便展現(xiàn)的樣式發(fā)生改變，就不需要修改。繞開 “ 灰色地帶 ”盡管推薦使用表示文檔?構和富含語義的 html 元素和屬性來編寫 html 文檔，但是在有些情況下，不得不使用與展示相關的元素和屬性來完成特定的功能。這是實踐富含語義的 html 中的 “ 灰色地帶 ” 。下面列舉?個常見的情況：有序列表元素 的屬性 start和 元素的 value屬性在 html 4.01 嚴格型文檔?型聲明中是被廢棄的。但是這兩個屬

29、性是用來控制有序列表的數(shù)字編號順序的惟一方式。 元素在 4.01 嚴格型文檔 ?型聲明中是不被允許的。 和 元素雖然是與展示相關，但是在 html 4.01 嚴格型文檔 ?型聲明中仍然是合法的。在很多時候， 元素被用來作為布局的手段。然而從語義上來說， 更適合用來顯示表格型的數(shù)據(jù)。推薦的方式是使用 元素來進行頁面布局。css 3 中引 ?了復雜的網(wǎng)格布局。正是由于上面所述這些“ 灰色地帶 ” 的存在，通常來說，目前最適用的是 html 4.01 過渡型文檔?型聲明。之前關于富含語義的 html 的介紹，都是從基本元素和屬性的角度出發(fā)，下面將介紹富含語義的 html 組件：微格式?；仨撌孜⒏袷剑?/p>

30、 microformat）微格式（ microformat）是滿足特定模式的有組織的 html 片斷，用來描述網(wǎng)頁中富含語義的實體。在編寫 html 文檔時，經(jīng)常會需要包含某些富含語義的實體，包括人、事件、評論、地理位置和個人簡歷等。比如在個人博客中經(jīng)常會包括作?本人的基本信息。微格式定義了描述這些實體的 html 應該具有的格式。通過使用微格式，這些實體的語義得以在 html 中保留。微格式是富含語義的html 這一指導原則的良好實踐。它將對語義的保留提升到了 html 片斷的層次。微格式使用富含語義的 html 元素和 class屬性。下面通過一個實例來說明微格式的用法。hcard 是一種

31、用來描述人、公司、組織機構和地點的微格式。代碼清單 3 中給出了一個實例。清單 3. hcard 微格式實例 成富 工作 : 東北旺西路 8號 海淀區(qū) , 北京市 , 100193 中國 工作 8245xxxx 家庭 138xxxxxxx 電?郵件: 在 代碼清單 3 中，微格式 hcard 使用了 和 這兩個通用 html 元素，加上富含語義的 street-address、postal-code、country-name、tel 和 email 等 class屬性。 代碼清單 3 中的 html 片斷清晰的表達了“ 人” 這樣一個實體的語義。web 開發(fā)人員可以使用不同的樣式來顯示這樣一個實體。在編寫 html 文檔時，如果需要描述的實體已經(jīng)有相關的微格式的規(guī)范，應該按照相應的規(guī)范來使用合適的 html 元素和 class屬性。更多微格式的信息見參考資料。至此，關于富含語義的 html 的主要內(nèi)容就已經(jīng)介紹完畢，下面介紹一些相關的其它話題?；仨撌灼渌掝}下面介紹與富含語義的 html 相關的其它話題，主要與可訪問性（accessibility）相關。可訪問性可訪問性指的是網(wǎng)頁內(nèi)容應