H5可以說是現在最火爆的概念了，很多非CS的搬磚狗，對於這個概念很是模糊，那麼博主今天就講一下什麼是H5。
首先我們解釋一下web瀏覽器端的三個概念，瀏覽器其實就是一個解析器，他解析的是結構（dom）、表現（css）、行爲（js）.在書寫dom的時候，需要一種標準，這個
標準就是html，上一版是html4。從狹義上說，h5就是h4的一次更新。從廣義上將，H5泛指現在的移動端產品設計的理念或者技術，該技術包括H5與css3，css3就是css2的一版更新。傳統的項目主要運行在PC端，在移動端的產品就需要用H5與css3新增的內容來滿足項目需求。PS：最討厭別人問博主會不會寫H5,因爲H5的內容太廣了，下面就詳細講解H5與css3中都
新增了哪些內容。
H5的新特性有哪些？
1.新增的語義化標籤
header footer nav side article main figure ，這些都是新增的語義化標籤，這些新標籤在IE中不能很好的得到支持，所以就要處理一下兼容問題
header, section, footer, aside, nav, main, article, figure {
display: block;
}
而且在IE上，新元素是不能用css來渲染的，所以就要用shiv的兼容方法，具體代碼如下。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
2.新的視頻音頻元素
video與audio 這兩個媒體元素統一了媒體的渲染方式。
3.canvas繪圖
博主曾用此種方式實現了移動端觸摸繪圖的功能
4.加入了svg繪圖
這是一種基於xml的繪圖語言，而canvs是基於js的，兩者區別如下。
canvas svg
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
弱的文本渲染能力 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
能夠以 .png 或 .jpg 格式保存結果圖像 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 不適合遊戲應用
5.加入了mathml的數學標記語言
6.支持拖放
7.支持地理定位
8.新的input類型，如data numbel email url range tel 等，這些新類型配合新的屬性可以達到提交表單自動驗證的功能，無需自己寫js腳本
9.本地存儲，localstorage與sessionstorage，兩者與cookie的區別在於，本地存儲，不用發送http協議，存儲量達到5m。兩者之間的區別在於，localstorage
是永久存儲，sessionstorage的生命週期是在當前標籤頁中的單頁有效。
10.支持websql，實現了瀏覽器端的數據庫
11.webworker，js的異步處理
12.sse與websocket
sse用於服務端單向向瀏覽器推送，websokcet是雙工通信。
CSS3的新特性有哪些？
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
首先我們解釋一下web瀏覽器端的三個概念，瀏覽器其實就是一個解析器，他解析的是結構（dom）、表現（css）、行爲（js）.在書寫dom的時候，需要一種標準，這個
標準就是html，上一版是html4。從狹義上說，h5就是h4的一次更新。從廣義上將，H5泛指現在的移動端產品設計的理念或者技術，該技術包括H5與css3，css3就是css2的一版更新。傳統的項目主要運行在PC端，在移動端的產品就需要用H5與css3新增的內容來滿足項目需求。PS：最討厭別人問博主會不會寫H5,因爲H5的內容太廣了，下面就詳細講解H5與css3中都
新增了哪些內容。
H5的新特性有哪些？
1.新增的語義化標籤
header footer nav side article main figure ，這些都是新增的語義化標籤，這些新標籤在IE中不能很好的得到支持，所以就要處理一下兼容問題
header, section, footer, aside, nav, main, article, figure {
display: block;
}
而且在IE上，新元素是不能用css來渲染的，所以就要用shiv的兼容方法，具體代碼如下。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
2.新的視頻音頻元素
video與audio 這兩個媒體元素統一了媒體的渲染方式。
3.canvas繪圖
博主曾用此種方式實現了移動端觸摸繪圖的功能
4.加入了svg繪圖
這是一種基於xml的繪圖語言，而canvs是基於js的，兩者區別如下。
canvas svg
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
弱的文本渲染能力 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
能夠以 .png 或 .jpg 格式保存結果圖像 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 不適合遊戲應用
5.加入了mathml的數學標記語言
6.支持拖放
7.支持地理定位
8.新的input類型，如data numbel email url range tel 等，這些新類型配合新的屬性可以達到提交表單自動驗證的功能，無需自己寫js腳本
9.本地存儲，localstorage與sessionstorage，兩者與cookie的區別在於，本地存儲，不用發送http協議，存儲量達到5m。兩者之間的區別在於，localstorage
是永久存儲，sessionstorage的生命週期是在當前標籤頁中的單頁有效。
10.支持websql，實現了瀏覽器端的數據庫
11.webworker，js的異步處理
12.sse與websocket
sse用於服務端單向向瀏覽器推送，websokcet是雙工通信。
CSS3的新特性有哪些？
目前移動端頁面的設計理念就是響應式和自適應，自適應是按照百分比來佈局，而響應式則需要用到CSS3的比較重要的特性--媒體查詢。在css2中其實有查詢這個概念
但是要在引入CSS文件時使用，媒體查詢則可以在文件內部進行書寫，大大的提高了靈活性。
1.border-shadow div陰影 text-shadow 文字陰影 border-radius 圓角
2.2d轉換 transform：translate() rotate() scale() skew() matrix()
3.3d轉換
4.過渡:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover
{
width:300px;
}
5.animation動畫，用jquery的animate也可以書寫動畫
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
6.媒體查詢
