前端技術的三個階段：
第一階段是以Web 1.0為主的忘了階段，前段主流技術為HTML和CSS；
第二階段是以Web 2.0的Ajax應用階段，熱門技術為Javascript/DOM/異步資料請求；
第三階段是即将迎來的HTML5和CSS3階段
1.1.1 HTML5的新特性
第一、相容性；
第二、合理性；
第三、效率高；
第四、安全性；
第五、分離；
第六、簡化；
第七、通用性；
第八、無插件
1.1.2 HTML5組織
HTML5的開發有三個組織負責：①WHATWG; ②W3C; ③IETF
1.1.3 HTML5的構成
1.2 HTML5設計原理
1.2.1 HTML5開發曆程
HTML4.0.1到XHTML1.0到XHTM1.1到XHTML2，出現沖突，分離出最開始的HTML5
1.2.2 HTML5開發動力
HTML5最開始由Opera公司、Apple公司等浏覽器廠商脫離W3c後成立了WHATWG獨自開發。後得到迅猛發展，W3C後來又和WHATWG組織合作。
1.2.3 HTML5設計理念
①避免不必要的複雜性。例如 DOCTYPE元素
eg：<!DOCTYPE html>
eg：< meta charset="utf-8">
②支援已有的内容
對于已經有的寫作格式風格都支援
但筆者建議初學者要嚴格按照文法寫作，養成良好習慣。
lint工具是非常嚴格的程式設計工具，可以試着把html5源碼在lint工具運作檢查。
③解決現實的問題，例如塊元素
案例：
傳統寫法如下
<h2><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >标題文本</a></h2>
<p><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >段落文本</a></p>
若在HTML5中就會被簡化
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<h2>标題文本</h2>
<p>段落文本</p>
</a>
④求真務實
html5新增元素去掉很多div
eg：
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...<aside>
<footer>...</footer>
四個新元素：section、article、aside、nav
這四個元素的引入可以給内容分區
eg：
<section class="item">
<header><h1>...<h1></header>
<footer class="meta">...</footer>
<div class="content">...</div>
<nav class="links">...</nav>
</section>
注意事項：即便是footer，也不一定非要出現在最下面，header、footer、aside、nav元素，最重要的是他們的語義，與位置沒有關系，這些元素隻與内容有關。
⑤平穩退化
使用type屬性增強表單，以下是type的新屬性，有number、search和range等。
eg：
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
若新屬性不被浏覽器了解，則都可以看成type="text"。
HTML5增加了新元素 placeholder(占位符)，表示在文本框中預先放置了一些文本，隻要一單擊文本，他就會消失，若文本框中内容被清除，又會重新出現。有些浏覽器不支援可用javascript來實作占位符功能。
video元素。
以下是針對不支援video元素的浏覽器寫的代碼。
<video src="movie.mp4">
<!--後備内容-->
</video>
以下示例：
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<source src="movie.swf">
<object>
<a herf="movie.mp4">download></a>
</object>
</video>
以上代碼的含義：
1、如果支援video元素，也支援H264，則直接播放第一個視訊；
2、如果支援video元素，也支援ogg，則用第二個視訊；
3、如果不支援video元素，也要是是flash影片；
4、如果不支援video，也不支援flash，則代碼給出下載下傳連結。
html5和flash一個不能少，是以要兩者兼備
⑥最終使用者選擇
當面臨一個要解決的問題時，如果W3C和WHATWG給出了不同的解決方案，一旦遇到沖突，最終使用者優先，然後是作者，其次是實作者，再次是标準制定者，最後才是理論上的完善。使用者是第一位的，承認使用者的權利。
1.3 編寫第一個HTML5頁面
IE9+浏覽器、Mozlilla的Firefox、Google的Chrome都可以很好的支援HTML5。
Dreamweaver中寫入代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>這是title</title>
<style type="text/css">
#myCanvas{
background:red;
width:200px;
height:100px;
}
</style>
</head>
<body>
<canvas id="myCanvas">該浏覽器不支援HTML5的畫布标記！</cancas>
</body>
</html>
1.3.3 使用HTML5編寫簡單的WEB頁面
eg：
<!DOCTYPE html>
<META charset="utf-8">
<TITLE>這是第一個HTML5頁面</TITLE>
<P>Hello，World</P>
html5不區分字母大小寫、标記結束符及屬性是否加引号。
1.4 HTML5頁面的特性
HTML5示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>這是HTML5的頁面特性</title>
<style type="text/css">
header,nav,article,footer{
border:solid 1px #666;
padding:10px;
margin:6px
}
header{width:50px}
nav{
float:left;
width:60px;
height:100px
}
article{
float:left;
width:406px;
height:100px
}
footer{
clear:both;
width:500px
}
</style>
</head>
<body>
<header>導航</header>
<nav>菜單</nav>
<article>内容</article>
<footer>底部說明</footer>
</body>
</html>
有些新增的HTML5元素可以單獨成為一個區域
<header>
<article>
<h1>這是H1内容</h1>
</article>
</header>
<header>
<article>
<h2>這是H2内容</h2>
</article>
</header>
1.4.2 使用CSS美化HTML5文檔
預設情況下，CSS會預設元素的display屬性值為inline，若為了正确的顯示設定的頁面效果，需要将元素的display屬性設定為block。
相容以往浏覽器版本需要用javascript代碼在頭部
<script type="text/javascript">
document.creatElement('article');
document.creatElement('header');
</script>