這句話標(biāo)明本文檔是過(guò)渡類型，另外還有框架和嚴(yán)格類型，目前一般都采用過(guò)渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，允許使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語(yǔ)法。許多朋友在制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問(wèn)題。
2）語(yǔ)言編碼
接下來(lái)我們還會(huì)發(fā)現(xiàn)這樣一句話：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它標(biāo)示文檔的語(yǔ)言編碼。就像我們平時(shí)所說(shuō)的漢語(yǔ)、英語(yǔ)一樣。這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國(guó)際通用的編碼。不管我們采用哪種編碼，有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會(huì)出現(xiàn)亂碼。
3）html標(biāo)簽
html標(biāo)簽在頁(yè)面中都必須結(jié)束。成對(duì)的標(biāo)簽以“/標(biāo)簽名”結(jié)束，有些單一的標(biāo)簽在本身的結(jié)尾打上/來(lái)結(jié)束，這是xhtml代碼編寫的規(guī)范。
成對(duì)的標(biāo)簽：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的標(biāo)簽：
<img src="" />
<br />
.......
還需說(shuō)明一點(diǎn)的是按xhtml規(guī)范，標(biāo)簽必須用小寫。
4）css樣式
加載css樣式有以下四種
外部樣式
內(nèi)部樣式
行內(nèi)樣式
導(dǎo)入樣式
<link href="layout.css" rel="stylesheet" type="text/css" />
這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi)，然后在源代碼中以link方式鏈接。它的好處是不但本頁(yè)可以調(diào)用，其它頁(yè)面也可以調(diào)用，是最常用的一種形式。
<style>
h2 { color:#f00;}
</style>
這種形式是內(nèi)部樣式表，它是以<style>和</style>結(jié)尾，寫在源代碼的head標(biāo)簽內(nèi)。這樣的樣式表只能針對(duì)本頁(yè)有效。不能作用于其它頁(yè)面。
<p style="font-size:18px;">內(nèi)部樣式</p>
這種在標(biāo)簽內(nèi)以style標(biāo)記的為內(nèi)部樣式，內(nèi)部樣式只針對(duì)標(biāo)簽內(nèi)的元素有效，因其沒(méi)有和內(nèi)容相分離，所以不建議使用。
@import url("/css/global.css");
鏈接樣式是以@import url標(biāo)記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁(yè)所用樣式，那么我們可以把全局都需要用的公共樣式放到一個(gè)global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。
5）css優(yōu)先級(jí)
id優(yōu)先級(jí)高于class
后面的樣式覆蓋前面的
指定的高于繼承
行內(nèi)樣式高于內(nèi)部或外部樣式
總結(jié)：?jiǎn)我坏?id)高于共用的(class)，有指定的用指定的，無(wú)指定則繼承離它最近的
6）css盒模型組成
css盒模型是本節(jié)教程的重點(diǎn)。前面幾個(gè)知識(shí)點(diǎn)，如果您會(huì)用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個(gè)不同點(diǎn)。學(xué)習(xí)web標(biāo)準(zhǔn)，首先要弄懂的就是這個(gè)盒模型，這就是DIV排版的核心所在。傳統(tǒng)的表格排版是通過(guò)大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內(nèi)容，改用CSS排版后，就是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。這種排版方式的網(wǎng)頁(yè)代碼簡(jiǎn)潔，表現(xiàn)和內(nèi)容相分離，維護(hù)方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽。
那么它為什么叫盒子呢？先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
我們可以把它想像成現(xiàn)實(shí)中上方開(kāi)口的盒子，然后從正上往下俯視，邊框相當(dāng)于盒子的厚度，內(nèi)容相對(duì)于盒子中所裝物體的空間，而填充呢，相當(dāng)于為防震而在盒子內(nèi)填充的泡沫，邊界呢相當(dāng)于在這個(gè)盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。
所以整個(gè)盒模型在頁(yè)面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內(nèi)容部分的寬度，這是許多朋友容易搞混的地方
這里的邊界我們也稱之為：外邊距、外補(bǔ)?。惶畛湟步校簝?nèi)邊距、內(nèi)補(bǔ)丁。
如果現(xiàn)在您對(duì)CSS盒模型理解還不夠透徹，繼續(xù)往下看，后來(lái)的章節(jié)會(huì)都會(huì)應(yīng)用到盒模型實(shí)例。
二、如何開(kāi)始學(xué)習(xí)web標(biāo)準(zhǔn)？
1）有HTML和CSS基礎(chǔ)
學(xué)習(xí)本系列教程前，要求您有一定的html和css基礎(chǔ)，制作過(guò)網(wǎng)頁(yè)，會(huì)用表格進(jìn)行網(wǎng)頁(yè)布局，這樣學(xué)習(xí)起來(lái)才會(huì)很輕松。如果您對(duì)這些還不懂，建議先學(xué)習(xí)這些知識(shí)，然后再來(lái)學(xué)習(xí)本教程。
2）轉(zhuǎn)變觀念
在以前我們制作網(wǎng)站時(shí)，總是習(xí)慣于先考慮外觀、顏色、字體及布局等所有表現(xiàn)在頁(yè)面上的內(nèi)容。但外觀并不是最重要的，相反最終用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)的體驗(yàn)才是優(yōu)先要考慮的。一個(gè)由div＋css布局且結(jié)構(gòu)良好的頁(yè)面可以通過(guò)css定義成任何外觀，在任何網(wǎng)絡(luò)設(shè)備上（包括手機(jī)、PDA和計(jì)算機(jī)）上以任何外觀表現(xiàn)出來(lái)，而且用div＋css布局構(gòu)建的網(wǎng)頁(yè)以夠簡(jiǎn)化代碼，加快顯示速度。
所以要想學(xué)好div＋css，首先要轉(zhuǎn)變觀念，需要拋棄傳統(tǒng)的表格(Table)布局方式，采用層(DIV)布局，并且使用層疊樣式表(CSS)來(lái)實(shí)現(xiàn)頁(yè)面的外觀。給網(wǎng)站瀏覽者更好的體驗(yàn)。
3）多動(dòng)手、多動(dòng)腦
說(shuō)到這點(diǎn)，有點(diǎn)小兒科了，就像我們上小學(xué)時(shí)老師常常教我們的那樣。為什么我在這里也做為一點(diǎn)列出來(lái)呢，我是通過(guò)評(píng)論發(fā)現(xiàn)，有些同學(xué)提的問(wèn)題太沒(méi)水平了，稍微動(dòng)下腦筋就明白了，或者自己動(dòng)手一試就知道了，但他就懶得試。舉個(gè)簡(jiǎn)單的例子，拿瀏覽器兼容來(lái)說(shuō)吧，你寫個(gè)樣式之后，在IE和火狐分別打開(kāi)看一下不就明白了，但就是不去做。還有一個(gè)同學(xué)留言要我把一個(gè)實(shí)例中的圖片打包發(fā)給他，我一看代碼，就用到一張圖片，無(wú)語(yǔ)了，有你留言的這個(gè)時(shí)間，自己也早把圖片下載下來(lái)了。所以在這里告誡大家，一定要多動(dòng)手、多動(dòng)腦，不要怕麻煩。另外在學(xué)習(xí)完一節(jié)教程后，一定要自己做一遍實(shí)例，這樣能更快掌握。
（如果您覺(jué)得本站不錯(cuò)，請(qǐng)告訴身邊的朋友，或轉(zhuǎn)載到論壇、百度知道、貼吧等，記得帶網(wǎng)址喲，不勝感激！）
〖DIV+CSS教程〗Tags: 十天學(xué)會(huì)web標(biāo)準(zhǔn) div+css css基礎(chǔ)
所屬專題：十天學(xué)會(huì)WEB標(biāo)準(zhǔn)
上一篇：16、【視頻】CSS強(qiáng)制換行與強(qiáng)制不換行 下一篇：第二天 一列布局 相關(guān)文章第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（三）第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（二）第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（一）第九天 CSS表單設(shè)計(jì)第八天 下拉及多級(jí)彈出菜單第七天 橫向?qū)Ш讲藛蔚诹臁tml列表第五天 超鏈接偽類第四天 縱向?qū)Ш讲藛渭岸?jí)彈出菜單第三天 二列和三列布局第二天 一列布局16、【視頻】CSS強(qiáng)制換行與強(qiáng)制不換行15、【視頻】CSS的行高Line Height屬性14、【視頻】相對(duì)定位和絕對(duì)定位13、【視頻】CSS滑動(dòng)門技術(shù)寬度自適應(yīng)按鈕SEO—?jiǎng)?chuàng)建鏈接誘餌 更多評(píng)論(33)..會(huì)員評(píng)論taipeidvd(116.29.*.*) 發(fā)表于：2010-09-25 04:36:47
我也來(lái)學(xué)習(xí)一下
管理員回復(fù)：歡迎歡迎
回饋(220.181.*.*) 發(fā)表于：2010-09-24 23:05:51
貴站的講解真是很妙的說(shuō)，管理有做過(guò)老師的經(jīng)歷？
管理員回復(fù)：這個(gè)真沒(méi)有。我只是從一個(gè)初學(xué)者的角度來(lái)講解
athrunzero(116.231.*.*) 發(fā)表于：2010-09-17 15:44:52
好好學(xué)習(xí)下
管理員回復(fù)：歡迎歡迎
dg9120(60.215.*.*) 發(fā)表于：2010-09-15 17:27:38
<pre></pre>標(biāo)簽怎么用啊？
管理員回復(fù)：請(qǐng)查看html手冊(cè)
qllxw(218.56.*.*) 發(fā)表于：2010-09-14 02:15:51
非常好的入門教程
管理員回復(fù)：歡迎常來(lái)
heiba(113.9.*.*) 發(fā)表于：2010-09-10 09:50:53
好！頂一下！
lenhan12345(124.115.*.*) 發(fā)表于：2010-09-05 17:30:28
不錯(cuò)呀。支持一下。
管理員回復(fù)：歡迎常來(lái)
leng475(222.210.*.*) 發(fā)表于：2010-09-02 15:12:13
內(nèi)容很不錯(cuò)。。非常感謝站長(zhǎng)。。
管理員回復(fù)：不客氣，歡迎常來(lái)
推薦文章第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（三） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（二） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（一） 第九天 CSS表單設(shè)計(jì) 第八天 下拉及多級(jí)彈出菜單 第七天 橫向?qū)Ш讲藛?第六天 html列表 第五天 超鏈接偽類 熱門文章第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（三） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（二） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（一） 第九天 CSS表單設(shè)計(jì) 第八天 下拉及多級(jí)彈出菜單 第七天 橫向?qū)Ш讲藛?第六天 html列表 第五天 超鏈接偽類 最新圖片素材
最新評(píng)論文章CSS網(wǎng)頁(yè)布局入門教程13：下拉及多級(jí)彈出式菜單 CSS網(wǎng)頁(yè)布局入門教程12：縱向?qū)Ш讲藛?第八天 下拉及多級(jí)彈出菜單 13、【視頻】CSS滑動(dòng)門技術(shù)寬度自適應(yīng)按鈕 第六天 html列表 收集最近幾個(gè)月淘寶、拍拍等網(wǎng)站的廣告圖片（中幅2） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（一） 第十天 div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程（二） 推薦專題十天學(xué)會(huì)WEB標(biāo)準(zhǔn) 新手常見(jiàn)問(wèn)題 入門教程 視頻教程 表單問(wèn)題 CSS HACK SEO優(yōu)化 網(wǎng)頁(yè)技巧 常用軟件 字體下載 網(wǎng)頁(yè)配色 CSS在線手冊(cè) 火狐插件 PNG圖標(biāo) WEB標(biāo)準(zhǔn) 網(wǎng)頁(yè)資源下載 PS技巧 系統(tǒng)常見(jiàn)問(wèn)題 JS代碼 常用CSS技巧 導(dǎo)航菜單 W3C標(biāo)準(zhǔn) DIV布局技巧 PS插件 幻燈代碼 在線交流QQ群18645808(開(kāi)) 44051756(開(kāi)) 74816202(開(kāi)) 75782368(開(kāi)) 54187042(開(kāi)) 102426914(開(kāi)) 87010869(開(kāi)) 71571195(開(kāi)) 35826206(開(kāi)) 40334594(開(kāi)) 102050535(開(kāi)) 105366319(開(kāi)) 106872711(開(kāi)) 100154872(開(kāi)) 61729892(開(kāi)) 38473554(開(kāi)) 出差旅游免費(fèi)預(yù)訂酒店
