XHTML選擇什么樣的DOCTYPE

2020-03-24 16:44:23

字體：大中小

來源：轉載

供稿：網友

開始制作符合標準的站點，第一件事情就是聲明符合自己需要的DOCTYPE。
那么什么是DOCTYPE呢？在XHTML中我們必須聲明文檔的類型，以便于瀏覽器知道你的文檔是什么類型的，而且聲明部分要加在文檔的head之前。如： !DOCTYPE Doctype goes here
html xmlns="http://www.w3.org/1999/xhtml"
head
title Title goes here /title
/head body
Body text goes here
/body /html 注:DOCTYPE聲明不是 XHTML 文檔的一部分，它也不是文檔的一個元素，所以我們沒必要加上結束標簽。XHTML屬性都是在 html 標簽里面。然而當我們在w3.org驗證時，并不解釋我們的文檔有沒有聲明類型。這是因為"xmlns=http://www.w3.org/1999/xhtml"是一個固定的值，如果你沒聲明的話，它也會被自動的加到 html 標簽前。我們使用DOCTYPE時的基本機構： !DOCTYPE ...
html
head
title ... /title
/head
body ... /body
/html DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，并展現出來。要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。XHTML 1.0 提供了三種DTD聲明可供選擇：1、過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 當你需要利用 HTML 的表示特性時，可以使用這種文檔類型定義。它支持大部分標準的 HTML 4 標記和屬性。2、嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如 br 。完整代碼如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 當你想要真正清晰的標記、避免表示上的混亂時，將此與 CSS 一起使用。已經從該語言中除去了幾個標記（如 center ），甚至還除去了其它標記的某些屬性（如 H1 標記的 align 屬性）。3、框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" 用于框架頁的定義，注意，其他的xhtml文檔類型是不支持框架頁的。完整的xhtml聲明還包含一個xml頭。也就是這個樣子：
?xml version="1.0" encoding="UTF-8"? ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" 在xml頭中，定義了頁面的文字編碼，我們可以看到這段代碼說明我們的頁面文字編碼是全球通用碼Unicode UTF-8，如果你做的中文頁面有很多國外的華人朋友在看的話，就建議采用這種編碼格式，雖然它占用的空間會大一些。由于微軟在對web標準的支持方面說一套做一套，如果我們只在xml頭中聲明文字編碼，可能會讓我們的頁面在IE6中文字全部都是亂碼。所以我們還有必要在head區中加入一個文字編碼聲明，也就是Content-type。 meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/ 這樣完整的文檔頭信息就成了下面這個樣子。 ?xml version="1.0" encoding="UTF-8"? ?xml version="1.0" encoding="UTF-8"?
! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/ /head 當然，head區中還有 title 文檔標題 /title 我們平時做網頁的時候，對這些內容幾乎都是從來不理的，認為它們沒什么用，然而，事實上它們給出了文檔遵循的規范，讓瀏覽器可以更好的解析和顯示我們的網頁，所以這些代碼是不可缺少的。如何轉換現有的結構為XHTML
我們選擇什么樣的DOCTYPE？理想情況當然是嚴格的DTD，但對于我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。我們從現在的HTML轉換為XHTML注意以下幾點：xhtml和我們之前用的HTML語言不同，它規定了相當嚴格的規范，而我們必須遵守它。這里就給出主要的規范。一、在每個頁面的首部都加上文檔類型的說明。如： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 當然可以選擇其他類型的。二、標記和name 要都用小寫，所有屬性值必須使用雙引號。永遠使用小寫字母：讓引號伴隨者屬性: 所有元素和屬性的名字都必須使用小寫，所有屬性值必須使用雙引號。
我們可以自己編寫一個替換程序，將你的HTML文檔中的所有的標記都換為小寫字母，還有name屬性也要變為小寫。如:
正確： a href="example.htm" img src="Example1.gif" / /a
錯誤： A HREF="example.htm" img SRC=Example1.gif / /a 順便說一下，如果你使用PHP來寫后臺程序的話，為了適應這條規則，那么PHP中的字符串就只能用單引號來括了。三、關閉所有的元素。
關閉所有的元素: 在HTML中一些元素沒有必要被關閉。當下一個元素開始的時候，上一個元素就自動被關閉。XHTML中是不允許這樣的。所有元素都必須被關閉，即使單獨的標簽，如: hr , br and img ，都要在后面加/來結束也必須以" / "來關閉標簽（如 img ）。注意：自關閉標簽，自關閉標簽的意識就是不成對的標簽在使用的時候結尾不是簡單的用" "號結束，而是要使用"/ "結束，這表示這個標簽已經關閉了，而且為了不引起誤解，應當用空格把它們和前面的內容隔開。如：
正確： img src="Example1.gif" / br /
錯誤： img src="Example1.gif" br/ 四、屬性不能被縮減: 在HTML里，一些屬性可以被縮減。而XHTML則不允許這樣做。如：
正確: input type="checkbox" id="checkbox1" name="checkbox1" checked="checked" /
錯誤: input type="checkbox" id="checkbox1" name="checkbox1" checked 五、標簽不能交叉。在HTML中，標簽的交叉使用是允許的，大多數的瀏覽器都能自動解析出它們。但xhtml不允許這么做。如：
正確: a href="example.htm" span 標簽不允許交叉 /span /a
錯誤: a href="example.htm" span 標簽不允許交叉 /a /span 六、不要使用被排斥的元素: 一些元素和屬性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允許的，而在XHTML 1.0 Strict下則不被支持(還有in HTML 4.01 Strict)。比如 font 、 center 、 alink、align、width、 height (對于某些元素)和background。七、我們打開W3C DTD 的官方網站：http://validator.w3.org/check/referer，驗證時一般錯誤可能會出現在你的標簽嵌套里。也可以用官方網站提供的轉換工具tidy來實現轉換：http://www.w3.org/People/Raggett/tidy/，我不建議大家直接來使用該工具來驗證，因為我們畢竟是新學XHTML我們還是自己轉換，這樣我們可以熟悉XHTML啊，再者說我們還要學習tidy工具的使用，那樣也是比較麻煩的。八、我們直接打開下面的頁面可以直接輸入網址來驗證我們的程序了：http://webjx.com/js/standard.htm注：上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag，例如用于排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。打個比方：人體模特換衣服。模特就好比數據，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來HTML4中，數據和表現是混雜在一起的，要一次性換個表現形式非常困難。呵呵，有點抽象了，這個概念需要我們在應用過程中逐步領會。補充
DOCTYPE聲明必須放在每一個XHTML文檔最頂部，在所有代碼和標識之上。
更多細節可以訪問W3C的網站舉例說明DOCTYPE對CSS及JS的影響
也許你已經發現選用或不用DOCTYPE對你的頁面的影響是非常大的，甚至對于不同瀏覽器結果也不一樣。下文以對一段javascrīpt的影響說明： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title divTest /title
scrīpt
function changeHeight()
{
document.getElementById("content").style.height="360";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
/scrīpt
/head
body
div id="content" a href="javascrīpt:changeHeight()" aa /a /div
/body 上文頁面是通過按aa超鏈接表現javascrīpt控制div的高度，讀者可以自己試一下1. IE瀏覽（我用的是IE 6），content的高度會變大，同時alert出height:360，offsetHeight:3622. firefox，content的高度不會變，同時alert出height:60，offsetHeight:623. 去掉最上面的一句 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
在firefox下將得到content的高度會變大，同時alert出height:360，offsetHeight:362我曾看到好多人運行到這里就會得到一個結論去他的DOCTYPE，用了它好多東西都不對了。我以為不是這樣的，DOCTYPE定義了一個規范集，去檢驗你代碼的正確性規范性，去掉了DOCTYPE也許只會在你當前機器上的瀏覽器正確運行，也就是說你的程序不能做到通用，難道這是你追求的嗎？這時你會說那上面的問題怎么辦呢，難道在firefox就不能那么做嗎？回答是當然可以，仔細看一下上面的代碼其實是有問題的，在 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 標準中對象的高度、大小必須指定單位的如px,pt等，如果不指定那就要依賴于應用瀏覽器的默認或支持情況了，因此修改代碼如下： scrīpt
function changeHeight()
{
document.getElementById("content").style.height="360px";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
/scrīpt 運行一下看看是不是對了呢？定義DOCTYPE是個好習慣，也希望大家能寫出標準規范的代碼。制作流程
圖片設計--內容模版頁制作--CSS樣式設計--后臺程序制作由于風格設計與內容制作分離，風格設計和后臺程序制作是可以分離同步進行的。這也比傳統的圖片設計-頁面（內容加樣式）-連接后臺程序這樣的流程效率要高。附加一節：Block Element和Inline Eliment
首先，說明一下什么是Block-level Element這個概念是HTML 4.0中提出的概念。在html中，有一部分元素是在頁面中顯示為塊級的元素，它們最大的特點就是只要是塊級元素結束，那么它下面的元素都會跟著換行。而Inline Element被稱為行內元素，它結束后，后面的內容不換行，會跟著它繼續顯示。http://www.htmlhelp.com/reference/html40/block.html這個頁面中列出了大多數的塊級元素。注意在xhtml中用的時候它們都要是小寫的。所謂的語義網在這時候就體現出來了，仔細看這些標簽，所有的標簽都有它們自己的含義和用途。我們現在做網站的時候其實根本不管這些，完全是在亂用它們。此外，注意后面的注解是灰色的標簽，這些標簽全都是在xhtml中不被支持的標簽。http://www.htmlhelp.com/reference/html40/inline.html這個頁面中列出了大多數的inline element標簽。它們同樣有各自的語義和用途，也用灰色標出了很多在xhtml中不支持（其實是在HTML 4的嚴格語法中不推薦）的元素。大家都知道了block-level element和inline element的概念。但之前我們并不關注它，在xhtml中，這個概念才真正得到應用，因為xhtml中規定，block-level element之間可以嵌套，也可以使用block element來包含inline elemtnt，但不可以使用inline element來包含block-level element.也就是說， a href="example.htm" p 段落文字 /p /a 這種代碼是絕不允許的。推薦幾個可以去看源代碼參考的網站。
http://www.csszengarden.com/
http://www.flashempire.com/ 閃客帝國XHTML 的模塊化
為什么要模塊化設計XHTML呢？XHTML雖然簡單，但是它的內容很多，包括了一個網絡設計師需要的絕大多數功能。XHTML一方面內容繁多復雜，但是從另一個角度來看它卻是非常簡單的。為了將XHTML分割成小的模塊，W3C已經建立起了小型的已經定義好了的一系列XHTML元素，他們獨立的能被與其他XML標準合并成的大型的更復雜的程序的簡單設備所使用。通過XHTML模型，程序設計師能夠做如下的事情：1.選擇那些能夠被使用XHTML構建塊標準的設備所支持的元素。2.在遵循XHTML標準的同時使用XML可以對XHTML擴展。3.簡單化的XHTML可以應用于像掌上電腦、移動電話、電視和家用電器等設備。4.通過加入心的XML功能（像聲音、多媒體的）將XHTML延續到復雜程序的設計上。5.像XHTML基本（XHTML對于移動設備的一個子集）那樣來定義XHTML的輪廓。模塊名描述Applet Module* applet元素.Base Module定義基本元素.Basic Forms Module定義基本的表單元素Basic Tables Module定義基本的表格元素Bi-directional Text Module定義 bdo 元素.Client Image Map Module定義瀏覽器的 image map 元素.Edit ModuleDefines the editing elements del and ins.Forms ModuleDefines all elements used in forms.Frames Module定義框架集元素Hypertext Module定義 a 元素.Iframe Module定義 iframe 元素.Image Module定義 img 元素.Intrinsic Events Module定義事件改變屬性元素Legacy ModuleDefines deprecated* elements and attributes.Link Module定義link 元素.List Module定義 list 元素 ol, li, ul, dd, dt, dl.Metainformation Module定義 meta 元素.Name Identification ModuleDefines the deprecated* name attribute.Object Module定義object 和param 元素.Presentation Module定義表現元素如 b 和 i.scrīpting Module定義 scrīpt and noscrīpt 元素.Server Image Map Module定義 server side image map 元素.Structure Module定義結構 html, head, title and body.Style Attribute Module定義 style 屬性.Style Sheet Module定義style 元素.Tables Module定義表內應用的元素.Target Module定義 target 屬性.Text Module定義 text container 元素如： p and h1.* 表示不贊成應用到XHTML中
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：如何給html中的pre標簽中的文字換行？html pre標簽的使用實例

下一篇：html5 迷宮游戲(碰撞檢測)實例一