摘要：根據網頁主要有三部分組成結構表現和行為。要想制作符合標準的頁面，一個必不可少的關鍵組成部分就是聲明。行內元素行內元素又稱內聯元素。當前，大部分門戶網站大部分企業的宣傳站點都采用了這種布局方式。

W3C標準，既一系列標準的集合，他的本質是結構標準語言。就像平時使用的HTML,CSS等都要遵守這些標準。我們這里只討論W3C網頁標準。根據網頁主要有三部分組成:結構(Structure),表現(Presentation)和行為(Behavior)。對應的標準也分以下三方面:

結構化標準語言：HTML,XML,XHML

表現標準語言: CSS

行為標準語言: ECMAScript

為什么要遵循W3C標準?

對于我們開發者來說，我們是介于瀏覽器制造商和瀏覽器終端使用者的中間位置。也相當于說是一個接口的位置，也就是說我們要同時滿足瀏覽器制造商和瀏覽器終端使用者的需求，用程序的語言來說就是“轉換器”。也是說我們要想方設法的讓我們的頁面、我們的程序支持所有的瀏覽器，能夠滿足盡可能多多的用戶。

HTML 指的是超文本標記語言(Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)

HTML 使用標記標簽來描述網頁

XML 指可擴展標記語言（EXtensible Markup Language）

XML 是一種標記語言，很類似 HTML

XML 的設計宗旨是傳輸數據，而非顯示數據

XML 標簽沒有被預定義。您需要自行定義標簽。

XML 被設計為具有自我描述性。

XML 是 W3C 的推薦標準

XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。

XHTML 的目標是取代 HTML。

XHTML 與 HTML 4.01 幾乎是相同的。

XHTML 是更嚴格更純凈的 HTML 版本。

XHTML 是作為一種 XML 應用被重新定義的 HTML。

XHTML 是一個 W3C 標準。

1、 需要聲明（DOCTYPE）

DOCTYPE是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）的版本。要想制作符合標準的頁 面，一個必不可少的關鍵組成部分就是DOCTYPE聲明。只有確定了一個正確的DOCTYPE，XHTML里的標識和CSS才能正常生效。

2、需要定義語言編碼 (如果忘記定義可能會出現亂碼)

3、JavaScript定義

Js必須要用

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

IE盒模型

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

盒模型的使用

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

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

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

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

其實，瀏覽器選擇哪個盒模型，主要看瀏覽器處于標準模式（Standards Mode）還是怪異模式（Quirks Mode）。我們都記得聲明吧，這是告訴瀏覽器選擇哪個版本的HTML，后面一般有DTD的聲明，如果有DTD的聲明，瀏覽器就是處于標準模式；如果沒有DTD聲明或者HTML4以下的DTD聲明，那瀏覽器按照自己的方式解析代碼，處于怪異模式。
處于標準模式的瀏覽器（IE瀏覽器版本必須是6或者6以上），會選擇標準盒模型解析代碼；處于怪異模式的瀏覽器，則會按照自己的方式去解析代碼，IE6以下則會是選擇IE盒模型，其他現代的瀏覽器都是采用標準盒模型。
因為IE6以下版本的瀏覽器沒有遵循Web標準，不論頁面開頭有沒有DTD聲明，它都是按照IE盒模型解析代碼的。

行內元素和塊級元素說明

根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認display屬性值為“inline”，稱為“行內”元素。

行內元素和塊級元素的區別

塊級元素:塊級元素會獨占一行，其寬度自動填滿其父元素寬度，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個元素大小。

行內元素：行內元素又稱內聯元素。行內元素不會獨占一行，相鄰的行內元素會排列到同一行里，直到一行排不下，才會換行，其寬度隨元素的內容變化而變化。行內元素設置width,height無效，它是依附于其他塊級元素存在的。行內元素一般只容納文本或者其他內聯元素。

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。

布局特點

不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小于這個寬度就會出現滾動條，如果大于這個寬度則內容居中外加背景，這種設計常見于pc端。

設計方法

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

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

布局特點

屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

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

自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。

布局特點

屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。

設計方法

使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。

隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕分辨率范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。響應式幾乎已經成為優秀頁面布局的標準。

布局特點

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

設計方法

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