DOCTYPE是document type(文件類型)的簡寫，用來說明你用的XHTML或者HTML是什麼版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文件類型定義，裡麵包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我們選擇什麼樣的DOCTYPE理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校正。
註：上面說的"表現層的標識、屬性"是指那些純粹用來控製表現的tag，例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現資料和表現相分離。
打個比方：人體模特換衣服。模特就好比資料，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來HTML4中，資料和表現是混雜在一起的，要一次性換個表現形式非常困難。呵呵，有點抽象了，這個概念需要我們在應用過程中逐步領會
DOCTYPE對CSS及JS的影響也許你已經發現選用或不用DOCTYPE對你的頁面的影響是非常大的，甚至對於不同瀏覽器結果也不一樣。下文以對一段javascript的影響說明：
<!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>
<script>
function changeHeight()
{
document.getElementById("content").style.height="360";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
</script>
</head>
<body>
<div id="content" style="height: 60px; border: 1px solid #FF0000;"><a href="javascript:changeHeight()">aa</a></div>
</body>
上文頁面是通過按aa超連結表現javascript控制div的高度，讀者可以自己試一下
1. IE瀏覽（我用的是IE 6），content的高度會變大，同時alert出height:360，offsetHeight:362
2. firefox，content的高度不會變，同時alert出height:60，offsetHeight:62
3. 去掉最上面的一句<!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等，如果不指定那就要依賴於應用瀏覽器的預設或支援情況了，因此修改代碼如下：
<script>
function changeHeight()
{
document.getElementById("content").style.height="360px";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
</script>
運行一下看看是不是對了呢？ 定義DOCTYPE是個好習慣，也希望大家能寫出標準規範的代碼。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
