1、除非必須不然不要使用嵌入式CSS樣式 

除非測試程式碼,或者必要的時候不能使用內聯式css程式碼：

<pstyle="color: red;">汐玬紗個人網站</p>

雖然這樣寫短期內看不出什麼問題,一但出現錯誤,我們會發現修改時非常費力.一般我們的做法是把這個P標籤的樣式定義在樣式表文件裡：

p {color: red;}

2、使用js外鏈式檔案,實現結構樣式行為三分離,或者儘量把javascript程式碼寫在HTML程式碼的底端.或者使用window.onload事件

如果剛開啟網頁就載入一個js的指令碼語言會佔用整個網頁載入的的時間,造成,網頁載入變慢,使用者體驗效果變差.

但是js只是實現簡單單一的事件，（比如簡單的點選按鈕事件).那麼就在body標籤裡面直接引用.

舉例：

<scripttype="text/javascript"id="bdshare_js"data="type=tools&amp;uid=6574585"></script>

<scripttype="text/javascript"id="bdshell_js"></script>

</body>

</html>

3、學會並且善用H1-H6標籤,這樣你的網站易於被收錄.

建議你在網頁中使用其中全部六種標記，雖然大部分人只會用到前四個，但使用最多的

4、如果時個人部落格網站,我們學會把H1標籤留給文章題目

當然具體如何使用要看你的需求，但我建議你在建立部落格的時候，將文章題目定為H1，這對搜尋引擎優化(SEO)是非常有好處的。

5、學會怎樣對付IE

IE一直以來都是前端開發人員的噩夢！如果你的CSS樣式表基本定型了，那麼可以為IE單獨建立一個樣式表，然後這樣僅對IE生效：

<!--[if lt IE 9]>

<scriptsrc="/skin/blog/js/modernizr.js"></script>

<![endif]-->

這些程式碼的意思是：如果使用者瀏覽器是IE9及以下，那這段程式碼才會生效。

6、縮減自己的DIV

回望我們大多數人寫的第一個頁面，一定會發現嚴重的 “DIV癖”(divitis )，通常初學者的本能就是把一個段落用DIV包起來，然後為了控制定位而套上更多的DIV。—— 其實這是一種低效而有害的做法，學會適應並且使用合適的標籤。

網頁寫完後，一定要多次回頭檢查，儘量的減少元素的數量。能用ul佈局的列表就不要用一個個的DIV去佈局。 

7、為圖片新增Alt屬性需要相容火狐瀏覽器的話可以新增title屬性

為圖片加上alt屬性的好處是不言而喻的 —— 這樣可以讓禁用圖片或者使用特殊裝置的使用者無障礙得了解你的網頁資訊，並且對影象搜尋引擎友好。Firefox不支援顯示影象Alt屬性，可以加入title屬性<都能使得滑鼠經過影象時出現關於圖片的註釋>

8、學會檢視優秀網站的原始碼,並且下載儲存下來.善於學習

沒有什麼比模仿你的偶像能讓你更快的學習HTML。起初，我們都要甘做影印機，然後慢慢得發展自己的風格。研究你喜歡的網站頁面程式碼，看看他們是怎麼實現的。這是高手的必經之路，你一定要試一下。注意：只是學習和模仿他們的編碼風格，而不是抄襲和照搬！留意網路上各種炫酷的JavaScript效果，如果看上去是使用了外掛，那根據它原始碼中head標籤內的檔名，就可以找到這個外掛名稱，然後就可以學習它據為己用。

9、很顯然,所有的標籤都有自己獨有的預設樣式,學會在寫網頁前為所有標籤的樣式定義

這一條在你製作其他公司企業網站時尤為必要。你自己不使用blockquote標記？那使用者可能會用，你自己不使用OL？使用者也可能會。花時間做一個頁面，顯示出ul,ol, p, h1-h6,blockquotes, 等等元素的樣式，檢查一下是否有遺漏。

<blockquote> 與 </blockquote> 之間的所有文字都會從常規文字中分離出來，經常會在左、右兩邊進行縮排（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。

 10、使用CSS Reset

每個瀏覽器都有一些自帶的或者共有的預設樣式，會造成一些佈局上的困擾，css reset的作用就是重置這些預設樣式，使樣式表現一致，比如 *{margin:0;padding:0}就是一個最簡單的css reset重置這些預設樣式，使樣式表現一致，比如 *{margin:0;padding:0}就是一個最簡單的css reset

作者提供一段常用樣式：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{background:#e8f0ff;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0 none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:800;}
ol,ul,li{list-style:none outside none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}