趁着清明的3天時間，我專門看了xhtml的一套視頻，雖然是xhtml但是也隱喻了很多經驗，鞏固了一下自己的基礎，我自己也寫了很多大大小小的東西，但是越寫我越發覺自己基礎的薄弱，果然沒錯！還是學到了一些我以前沒理解、不知道的一些概念和一些經驗之談，這里我寫一篇文章做一個總結。
一、首先W3C標准
結構、表現、動作 與 html、css、javascript相對應，它本意是結構表現分離，而且按照html規范編寫結構。
標簽方面：
-所有標簽都要小寫、關閉、並且合理嵌套，id不能重復
-標簽要有屬性，屬性必須有值，並且用“”表示
-img標簽不能忽略alt屬性
-表格標簽不適用height屬性
-盡量減少ifream的使用會影響瀏覽器響應速度，雖然在html5中也能使用ifream
內容模型：
-body、form、blockquote僅能包含塊級元素
-文本、圖像、鏈接等內聯元素不能直接暴露在body標簽中，必須用其他標簽包裹
-內聯元素不能包含塊級元素
其他方面：
-特殊字符用編碼表示
番外：
初學者的誤區：
1、div是萬能的！
2、table是丟人的！
3、為標准而標准
1、div嚴格意義上稱作容器，大家有一些頁面的裝飾可以通過嵌套div來實現，但是千萬不能整個頁面全都用div來編寫，很多標簽是有特定含義的，比如說h1~h3，p，strong等，在html5中就更加語義化了比如，footer、head、nav、article、section等標簽，還有很多標簽，我這里只說常用的一些標簽，而且如果整個頁面全都用div來寫不便於搜索引擎搜索到你的網站。
2、table並不丟人，只不過很少用而已，table是用來裝載數據的，所有標簽只要合理應用就不會丟人。
3、我們寫網站網頁其實說白了是為了客戶和用戶來看的，根據他們的需求我們學出對應的網站，我們強調頁面應該靈活編寫，不能死板的來。
二、你必須掌握的
1、塊狀元素和內聯元素
（1）塊狀元素
塊元素一般是其他元素的的容器元素，塊元素一般從新的一行開始，它可以容納文本、內聯元素和其他塊狀元素，通過width和height屬性可以設置其大小，常見的塊元素有 h標簽 和p標簽、div標簽
番外：form標簽也屬於塊標簽並且只能容納塊級標簽
（2）內聯元素
內聯元素非塊級元素。內聯元素只能容納文本或者其他內聯元素，不會獨占一行，width和height對其不起作用，常見的內聯元素有 a img span 等
番外： 這里我提一下 w3c為了讓開發人員更方便 增加了一個 inline-block 屬性值 ，包含塊狀元素的特點：能夠改變元素大小，也包含內聯元素的特點：大小只有盒內元素大小
2、盒子模型
下圖能代表所有，具體和深入請看各種大神技術博：
3、css頁面控制樣式方法
（1）行內式
（2）內嵌式
（3）鏈接式
（4）導入式
優先級：
就近元素，行內>內嵌>鏈接>導入，在國內經前端經常用的是 鏈接式。
4、常用選擇器
-標簽選擇器（div、p）
-id選擇器（#）
-類選擇器（.）
-通用選擇器（*）
-偽類選擇器（:link,:active,:hover,:visited）
優先級：
ID>類>標簽>通用
5、文本流
文本流講述的是一個概念性的東西，頁面內的元素是：從上至下、從左自右的順序進行排列的。
番外：
如何脫離文本流？
我們為了方便布局，通常使用浮動和定位的方式布局
6、命名方法
-駱駝命名法
-帕斯卡命名法
-匈牙利命名法
-或者全首字母大寫
命名規則：
頭：head/header
內容：content/container
尾：foot/footer
導航：nav/navigation
側欄: sidebar
三、css的控制能力
1、首行縮進
text-indent:2em;
如果文字是英文，也是縮進2個漢字的寬度
知識點：
px 像素
rem 相對瀏覽器的單位
% 百分比單位
cm、mm 絕對單位
2、增強頁面文字靈活性
在body中設置文字大小font-size：62.5% 在需要設置12px的地方設置文字大小為1.2em以此類推14px相對1.4em
因為任意瀏覽器默認字體高度為16px 1em=16px
1px=1/16em 10px=10/16em=0.625em=0.625*1em=62.5%*1em
12px=62.5%*1.2em
14px=62.5%*1.4em
16px=62.5%*1.6em
番外：
ie下設置1.2em會比12px大，為什么？ 怎么處理？
因為ie瀏覽器總是吧 62.5 小數點換算錯所以我們以后設置頁面大小直接設置為63%就可以兼容所有瀏覽器
3、浮動和定位
浮動：
float：left
float：right
定位：
position:absolute
position:relative
番外：
清除浮動：
-clear：both
-clear：left
-clear：right
浮動清除的並不是本元素的浮動，清除的是上級元素對於本元素的影響，我們可以講頁面整體分為三級
第一級是文本流 也就是頁面默認的顯示方式
第二級是浮動 它脫離文本流向上一層
第三級是定位 它是比浮動更高一級的為第三級
4、position
-absolute
-relative
-static
-Inherit
-Fixed
Absolute：絕對定位，絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊，絕對定位比較靈活如果你想，可以定位到瀏覽器的任意點
Relative: 相對定位，相對與父級盒子定位
static：默認的元素定位方式
inherit：繼承父級盒子的position屬性 這個沒多大用，如果我們要繼承的話，倒不如自己重寫一個省的自己再找一遍元素。
Fixed：元素固定在瀏覽器body的一個位置，瀏覽器上拉下拉都不會改變位置
番外：一般網站都是都是以浮動為主，定位為輔，你們可以看看現在的淘寶網站。
5、CSS Reset
css樣式具有繼承和重置的作用
常用的CSS Reset
*{ margin:0,padding:0 }
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
四：頁面調試/糾錯方法
1、頁面debug調試
2、排除法
3、設置背景法
番外：
網站的頁面的加載順序是按照文本流的順序加載，
我們編寫頁面優先考慮：
1、搜索引擎加載
2、便於瀏覽者觀察
3、頁面結構簡單整潔
最后
告訴大家一個調試神器：http://getf5.com/
以上是一些經驗之談和一些基礎的東西。
本文如果有描述錯誤的地方希望及時指出，我會積極改正。
生命不止、學習不止。
越學習越發現自己不足的地方還有很多，我會繼續加油的！