摘要：根據(jù)網(wǎng)頁(yè)主要有三部分組成結(jié)構(gòu)表現(xiàn)和行為。要想制作符合標(biāo)準(zhǔn)的頁(yè)面，一個(gè)必不可少的關(guān)鍵組成部分就是聲明。行內(nèi)元素行內(nèi)元素又稱內(nèi)聯(lián)元素。當(dāng)前，大部分門(mén)戶網(wǎng)站大部分企業(yè)的宣傳站點(diǎn)都采用了這種布局方式。

W3C標(biāo)準(zhǔn)，既一系列標(biāo)準(zhǔn)的集合，他的本質(zhì)是結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言。就像平時(shí)使用的HTML,CSS等都要遵守這些標(biāo)準(zhǔn)。我們這里只討論W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)。根據(jù)網(wǎng)頁(yè)主要有三部分組成:結(jié)構(gòu)(Structure),表現(xiàn)(Presentation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分以下三方面:

結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言：HTML,XML,XHML

表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言: CSS

行為標(biāo)準(zhǔn)語(yǔ)言: ECMAScript

為什么要遵循W3C標(biāo)準(zhǔn)?

對(duì)于我們開(kāi)發(fā)者來(lái)說(shuō)，我們是介于瀏覽器制造商和瀏覽器終端使用者的中間位置。也相當(dāng)于說(shuō)是一個(gè)接口的位置，也就是說(shuō)我們要同時(shí)滿足瀏覽器制造商和瀏覽器終端使用者的需求，用程序的語(yǔ)言來(lái)說(shuō)就是“轉(zhuǎn)換器”。也是說(shuō)我們要想方設(shè)法的讓我們的頁(yè)面、我們的程序支持所有的瀏覽器，能夠滿足盡可能多多的用戶。

HTML 指的是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language)

HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)

標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)

XML 指可擴(kuò)展標(biāo)記語(yǔ)言（EXtensible Markup Language）

XML 是一種標(biāo)記語(yǔ)言，很類(lèi)似 HTML

XML 的設(shè)計(jì)宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)

XML 標(biāo)簽沒(méi)有被預(yù)定義。您需要自行定義標(biāo)簽。

XML 被設(shè)計(jì)為具有自我描述性。

XML 是 W3C 的推薦標(biāo)準(zhǔn)

XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）。

XHTML 的目標(biāo)是取代 HTML。

XHTML 與 HTML 4.01 幾乎是相同的。

XHTML 是更嚴(yán)格更純凈的 HTML 版本。

XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。

XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)。

1、 需要聲明（DOCTYPE）

DOCTYPE是Document Type（文檔類(lèi)型）的簡(jiǎn)寫(xiě)，在頁(yè)面中，用來(lái)指定頁(yè)面所使用的XHTML（或者HTML）的版本。要想制作符合標(biāo)準(zhǔn)的頁(yè) 面，一個(gè)必不可少的關(guān)鍵組成部分就是DOCTYPE聲明。只有確定了一個(gè)正確的DOCTYPE，XHTML里的標(biāo)識(shí)和CSS才能正常生效。

2、需要定義語(yǔ)言編碼 (如果忘記定義可能會(huì)出現(xiàn)亂碼)

3、JavaScript定義

Js必須要用

從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分，既元素的寬度為content的寬度

IE盒模型

從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn)盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。既元素的寬度包括content,border,padding3部分。

盒模型的使用

我們可以通過(guò)box-sizing屬性來(lái)決定瀏覽器以那種模型來(lái)解析html,使用方式如下:

* {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

在上圖，我們看到IE兼容屬性box-sizing必須是8或者更高的版本，其他瀏覽器都可以自動(dòng)升級(jí)，兼容性不擔(dān)心。

如果我們不用該屬性，那瀏覽器該選擇哪種盒模型呢？

其實(shí)，瀏覽器選擇哪個(gè)盒模型，主要看瀏覽器處于標(biāo)準(zhǔn)模式（Standards Mode）還是怪異模式（Quirks Mode）。我們都記得聲明吧，這是告訴瀏覽器選擇哪個(gè)版本的HTML，后面一般有DTD的聲明，如果有DTD的聲明，瀏覽器就是處于標(biāo)準(zhǔn)模式；如果沒(méi)有DTD聲明或者HTML4以下的DTD聲明，那瀏覽器按照自己的方式解析代碼，處于怪異模式。
處于標(biāo)準(zhǔn)模式的瀏覽器（IE瀏覽器版本必須是6或者6以上），會(huì)選擇標(biāo)準(zhǔn)盒模型解析代碼；處于怪異模式的瀏覽器，則會(huì)按照自己的方式去解析代碼，IE6以下則會(huì)是選擇IE盒模型，其他現(xiàn)代的瀏覽器都是采用標(biāo)準(zhǔn)盒模型。
因?yàn)镮E6以下版本的瀏覽器沒(méi)有遵循Web標(biāo)準(zhǔn)，不論頁(yè)面開(kāi)頭有沒(méi)有DTD聲明，它都是按照IE盒模型解析代碼的。

行內(nèi)元素和塊級(jí)元素說(shuō)明

根據(jù)CSS規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁(yè)元素都有一個(gè)display屬性，用于確定該元素的類(lèi)型，每一個(gè)元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素(block-level)；而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。

行內(nèi)元素和塊級(jí)元素的區(qū)別

塊級(jí)元素:塊級(jí)元素會(huì)獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度，可以通過(guò)設(shè)置高度、寬度、內(nèi)外邊距等屬性，來(lái)調(diào)整的這個(gè)元素大小。

行內(nèi)元素：行內(nèi)元素又稱內(nèi)聯(lián)元素。行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列到同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容變化而變化。行內(nèi)元素設(shè)置width,height無(wú)效，它是依附于其他塊級(jí)元素存在的。行內(nèi)元素一般只容納文本或者其他內(nèi)聯(lián)元素。

即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。

布局特點(diǎn)

不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫(xiě)代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)（定寬度）布局的，也就是設(shè)置了min-width，這樣的話，如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景，這種設(shè)計(jì)常見(jiàn)于pc端。

設(shè)計(jì)方法

PC：居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來(lái)查閱被遮掩部分；
移動(dòng)設(shè)備：另外建立移動(dòng)網(wǎng)站，多帶帶設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。
優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和CSS編寫(xiě)者來(lái)說(shuō)都是最簡(jiǎn)單的，亦沒(méi)有兼容性問(wèn)題。
缺點(diǎn)：顯而易見(jiàn)，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。當(dāng)前，大部分門(mén)戶網(wǎng)站、大部分企業(yè)的PC宣傳站點(diǎn)都采用了這種布局方式。固定像素尺寸的網(wǎng)頁(yè)是匹配固定像素尺寸顯示器的最簡(jiǎn)單辦法。但這種方法不是一種完全兼容未來(lái)網(wǎng)頁(yè)的制作方法，我們需要一些適應(yīng)未知設(shè)備的方法。

流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。
網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-、max-屬性使用），例如，設(shè)置網(wǎng)頁(yè)主體的寬度為80%，min-width為960px。圖片也作類(lèi)似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。

布局特點(diǎn)

屏幕分辨率變化時(shí)，頁(yè)面里元素的大小會(huì)變化而但布局不變。【這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示】

設(shè)計(jì)方法
使用%百分比定義寬度，高度大都是用px來(lái)固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過(guò)大或者過(guò)小影響閱讀。
這種布局方式在Web前端開(kāi)發(fā)的早期歷史上，用來(lái)應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開(kāi)發(fā)也是常用布局方式，但缺點(diǎn)明顯：主要的問(wèn)題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來(lái)固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度、文字大小還是和原來(lái)一樣（即，這些東西無(wú)法變得“流式”），顯示非常不協(xié)調(diào)

自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁(yè)面元素位置發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。

布局特點(diǎn)

屏幕分辨率變化時(shí)，頁(yè)面里面元素的位置會(huì)變化而大小不會(huì)變化。

設(shè)計(jì)方法

使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。在優(yōu)秀的響應(yīng)范圍設(shè)計(jì)下可以給適配范圍內(nèi)的設(shè)備最好的體驗(yàn)，在同一個(gè)設(shè)備下實(shí)際還是固定的布局。

隨著CSS3出現(xiàn)了媒體查詢技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計(jì)的概念。響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁(yè)面在所有終端上（各種尺寸的PC、手機(jī)、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對(duì)CSS編寫(xiě)者而言，在實(shí)現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術(shù)使用。——分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配。即：創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍?？梢园秧憫?yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁(yè)面布局的標(biāo)準(zhǔn)。

布局特點(diǎn)

每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

設(shè)計(jì)方法

媒體查詢+流式布局。通常使用 @media 媒體查詢 和網(wǎng)格系統(tǒng) (Grid System) 配合相對(duì)布局單位進(jìn)行布局，實(shí)際上就是綜合響應(yīng)式、流動(dòng)等上述技術(shù)通過(guò) CSS 給單一網(wǎng)頁(yè)不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱。
優(yōu)點(diǎn)：適應(yīng)pc和移動(dòng)端，如果足夠耐心，效果完美。
缺點(diǎn)：（1）媒體查詢是有限的，也就是可以枚舉出來(lái)的，只能適應(yīng)主流的寬高。（2）要匹配足夠多的屏幕大小，工作量不小，設(shè)計(jì)也需要多個(gè)版本。
響應(yīng)式頁(yè)面在頭部會(huì)加上這一段代碼：