在講解今天的知識點之前，我想先展示兩個片段的代碼，讓大家看看這兩段代碼有哪些地方是值得以后的項目實踐中需要注意的，需要去改進的。
2 < head >
3 < title >A & B & C </ title >
4 < style type ="text/css" >
5 body { background : pink ; }
6 </ style >
7 </ head >
8 < body >
9 < a href ="http://www.baidu.com" >< h1 >Go to Baidu web site. </ h1 ></ a >
10 < div id ="topNav" >
11 < ul id ="bigBarNavigation" >
12 < li >< a href ="/" >HOME </ a ></ li >
13 < li >< a href ="/" >HELPER </ a ></ li >
14 < li >< a href ="/" >ABOUT US </ a ></ li >
15 </ ul >
16 </ div >
17 </ body >
18 </ html >
片段二
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >A & B & C </ title >
6 < link rel ="stylesheet" type ="text/css" href ="test.css" />
7 </ head >
8 < body >
9 < h1 >< a href ="http://www.baidu.com" >Go to Baidu web site. </ a ></ h1 >
10 < ul id ="bigBarNavigation" >
11 < li >< a href ="/" >home </ a ></ li >
12 < li >< a href ="/" >helper </ a ></ li >
13 < li >< a href ="/" >about us </ a ></ li >
14 </ ul >
15 </ body >
16 </ html >
片段二是對片段一的改進，下面就改進點進行詳細的講解。
1. DOCTYPE的聲明
片段二的第 1 行，添加了代碼 <!DOCTYPE html>
編寫HTML代碼時，首先要使用"DOCTYPE"進行聲明，這就像給你的代碼以身份，HTML4.0.1或者XHTML1.0或者HTML5都有嚴格版本或者過度版本，這些都能很好的支持我們寫的代碼。我建議大家直接使用<!DOCTYPE html>，原因一方面是現在的布局基本舍棄了table布局，那么我們也就可以不考慮使用過渡型而使用嚴格型的"DOCTYPE"，另一方面考慮到向后兼容，我們可以直接使用HTML5的聲明模式，即 <!DOCTYPE html>
2. 給頁面設置字符集和編碼字符
片段二中的第 4 行，添加了代碼 <meta charset="utf-8">
片段二中的第 5 行，將片段一中的第 3 行中的 "&" 改為 "&"
在每個頁面的開始中，我們都應該在 <head> 中設置了字符集，代碼中我們一些特殊字符我們應該用字符編碼來實現，大家可以在下面的網頁進行查詢 http://www.ascii-code.com/ 。
3. 正確的代碼縮進
片段二中相對於片段一使用了代碼縮進， 這可以極大的增強代碼的可讀性。標准程序的縮進應該是一個制表符或幾個空格，這里我推薦使用幾個空格。
4. 使用外鏈的方式帶入CSS樣式和JavaScript
片段二中相對於片段一，將css樣式封裝到test.css文件中，然后使用<link> 導入。
對於JavaScript，我們同樣需要使用外鏈的方式。
6. 使用標簽嵌套要正確
片段二中的第 9 行，<h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1>, 相對於片段一，我講<h1>標簽從<a>標簽內部移至<a>標簽外部。
<h1>是塊元素，<a>是行內(inline)元素。我們不能將塊元素放在行內(inline)元素
7. 刪除不必要的標簽
片段二中的第 10 ~ 14 行，相對於片段一中，將 <div id="topNav"><div> 刪除。
div 和 ul 列表都是塊元素，使用 div 來包裹 ul 根本沒有起任何作用。雖然 div 的出現給我們制作 web 頁面帶來了極大的好處，但是我們沒有必要到處亂用。
8. 盡量使用CSS控制樣式
片段二中的第 11 ~ 13 行，相比較片段一中都並非直接使用大寫字母，而是在test.css中定義樣式
2 text-transform: uppercase;
3 }
當然還有很多原則，希望大家多多交流。