一、HTML5概要

1.1、為什么需要HTML5

HTML4陳舊不能滿足日益發展的互聯網需要，特別是移動互聯網。為了增強瀏覽器功能Flash被廣泛使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。

HTML5增強了瀏覽器的原生功能，符合HTML5規范的瀏覽器功能將更加強大，減少了Web應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經歷了17年，HTML的變化很小，這并不符合一個好產品的演進規則。

1.2、什么是HTML5

HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對于需要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強網絡應用的標準集。HTML5是HTML最新版本，2014年10月由萬維網聯盟（W3C）完成標準制定。目標是替換1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。

1.3、HTML5現狀及瀏覽器支持

大部分主流瀏覽器已經支持HTML5，但是各個瀏覽器支持的方式以及語法有所差異性。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9
及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等現代瀏覽器。

支持得分：

如果想了解更多請看本文的兼容性那一節的內容。

1.4、HTML5優點與缺點

1.4.1、優點

1、網絡標準統一、HTML5本身是由W3C推薦出來的。
2、多設備、跨平臺
3、即時更新。
4、提高可用性和改進用戶的友好體驗；
5、有幾個新的標簽，這將有助于開發人員定義重要的內容；
6、可以給站點帶來更多的多媒體元素(視頻和音頻)；
7、可以很好的替代Flash和Silverlight；
8、涉及到網站的抓取和索引的時候，對于SEO很友好；
9、被大量應用于移動應用程序和游戲。

1.5.2、缺點

a)、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b)、完善性：許多特性各瀏覽器的支持程度也不一樣。
c)、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像web worker、web socket、web storage 等新特性，后臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d)、性能：某些平臺上的引擎問題導致HTML5性能低下。
e)、瀏覽器兼容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。

二、新增的結構標簽

2.1、新增的結構標簽

在HTML4.01中div被廣泛用于各種布局環境在，沒有明確的定義，HTML5為了SEO將div語義化了，新增加結構標簽如下：

a)、section元素?
表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等元素結合起來使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素?
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。

c)、aside元素?
表示article元素內容之外的、與article元素內容相關的輔助信息。

d)、header元素?
表示頁面中一個內容區塊或真個頁面的標題。

e)、hgroup元素?
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

f)、footer元素?
表示整個頁面或頁面中一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系信息。

g)、nav元素?
表示頁面中導航鏈接的部分。

h)、figure元素?
表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。例如：?
<figure>?
<figcaption>PRC</figcaption>?
<p>The People's Republic of China was born in 1949</p>?
</figure>?
HTML4中常寫作?
<dl>?
<h1>prc</h1>?
<p>The People's Republic of China was born in 1949</p>?
</dl>

HTML 結構

CSS 表現

JavaScript 行為

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>京東創始人劉強東一元年薪背后的O2O棋局</title><style type="text/css">* {margin: 0;        /*所有元素的外邊距為零*/padding: 0;font-family: "microsoft yahei";}ul li {list-style: none;}#container {width: 900px;margin: 0 auto;}header {height: 80px;line-height: 80px;background: dodgerblue;color: #fff;padding: 0 20px;}header h1 {font-size: 30px;font-weight: normal;}#main {font-size: 14px;}#main article {float: left;width: 70%;margin-right: 3%;}#main article hgroup{height: 70px;}#main article p{line-height: 22px;margin-bottom: 5px;text-indent: 26px;}#main aside {float: left;width: 27%;}#main aside li{height: 26px;line-height: 26px;overflow: hidden;}#main aside li a{text-decoration: none;border-bottom: 1px dashed #ccc;}#main aside li a:hover{background:orangered;color:white;}footer{clear: both;height:70px ;line-height: 70px;background: #FF4500;color: #fff;text-align: center;}footer nav li{display: inline-block;margin-right: 8px;}</style></head><body><div id="container"><header><h1>中國電子商務研究中心</h1></header><section id="main"><article><hgroup><h2>京東創始人劉強東一元年薪背后的O2O棋局</h2><h3>2015年10月06日14:50  中國電子商務研究中心</h3></hgroup><section><p>京東董事會今年5月份批準了針對公司董事長兼CEO劉強東的一項為期10年的薪酬計劃。計劃規定，10年內，劉強東每年只能領到1元現金形式底薪和零元現金形式獎金。難道劉強東就因此連杯奶茶也買不起了嗎?這么想就太天真了。根據京東的股權激勵計劃，劉強東被授予涉及2600萬股京東A級普通股的購買權，涉及股票規模約占京東總股本的0.9%，只有當每股ADS達到或超過33.4美元(相當于京東股價不低于16.7美元)時，劉強東才能將這部分股權進行套現。</p><p>按每股16.7美元計算，劉強東獲得的這部分股權將價值4.34億美元，相當于27.8億人民幣。在這10年內，公司不得再向劉強東授予額外股權。其實“一元年薪”不僅并非劉強東首創，甚至已經成為企業面臨危機時的一種常見路數。諸多企業都采取過“一元年薪”，比如三一重工。2008年經濟危機時，三一重工[微博]全體董事降薪90%，并接受高管自愿降薪申請，三一重工[微博]董事長梁穩根甚至主動申請將自己的年薪降至一元。</p><p>對于目前并沒有表現得很困難的京東來說，中國電子商務協會研究中心專家委員唐興通認為，“一元年薪”只是對于團隊管理上的一種姿態而，并沒有什么特別實際的用處。而上述股權激勵計劃更多的是為了穩定投資者的信心穩定投資者信心或許是為了緩解其在最新一期財務報告中持續虧損所帶來的負面影響8月7日，京東發布了2015年第二季度財報。據財報顯示，雖然京東第二季度交易總額為1145億元，同比增長82%，凈收入則達到459億元，同比增長61%。</p><p>盡管京東業績增長強勁，但其似乎還沒有找到有效的盈利模式。在去年第二季度凈虧損5.825億元的京東，今年該季度依然凈虧損5.104億元，凈利潤率為-1.1%。該公司在2015年第二季度非美國通用會計準則下凈虧損為1570萬元人民幣(約250萬美元)，凈利潤率為-0.03%。但事情卻未向著京東期望的方向發展。據資料顯示，以8月5日京東收盤價34.32美元計，至8月12日，短短5個交易日，其最低價格下探至25.64美元，最大跌幅高達25.29%;按其總股本27.35億股計，5個交易日，京東蒸發市值237億美元，蒸發比例高達39%。</p></section></article><aside><ul><li><a href="zt/2015zhifu/">讓紅包再多飛一會——新春土豪玩轉紅包 霸主地位花落誰家</a></li><li><a href="zt/2015taobao/">淘寶PK國家監管部門“假貨“爭議引發“史上最大危機”？</a></li><li><a href="zt/2015expectation/">2015電子商務展望</a></li><li><a href="zt/2014pandian/">2014年度中國電子商務產業鏈系列盤點專題 </a></li><li><a href="zt/20141111/">六年歷程、上市首秀：電商鏖戰“雙11”全程直播大型專題報道 </a></li><li><a href="zt/2014shcb/">2014上半年電商上市公司財報解讀</a></li><li><a href="zt/wganq/">全國百家電商牽手質檢機構 保障網購產品質量與安全行動計劃</a></li><li><a href="zt/sn818/">蘇寧打響“百日會戰” 電商再掀促銷“風暴”</a></li><li><a href="zt/dssj/">從電商平臺第三方賣家奢侈品售假 揭電商假貨之觴 引行業地震</a></li><li><a href="zt/2014World_Cup/">足球盛宴 電商角逐“世界杯經濟”</a></li><li><a href="zt/jdipo/">京東啟動赴美IPO 優勢與挑戰并存</a></li><li><a href="zt/anl_al2014/">阿里巴巴集團提交IPO招股書 招股書背后的機遇與挑戰</a></li><li><a href="zt/jmipo/">聚美優品向美提交上市申請 招股書背后機遇與挑戰并存</a></li><li><a href="zt/7twlytui/">電商VS消費者 電商7天無理由退貨大閱兵</a></li><li><a href="zt/jdtx/">騰訊戰略投資京東 國內B2C電商市場格局將迎 "寡頭時代"</a></li><li><a href="zt/jdo2o/">京東零售業O2O戰略萬家便利店ERP供應商簽約儀式</a></li><li><a href="zt/yhty/">聚焦"7天無理由退貨" 專家解讀《網絡交易管理辦法》、《新消法》</a></li><li><a href="zt/2014lh/">聚焦2014兩會——鼓勵電子商務創新發展 互聯網金融掀新一輪顛覆潮</a></li><li><a href="zt/2014315/">倡導陽光 誠信 安全網購 迎接電商立法元年</a></li><li><a href="zt/anl_wxqb/">微信紅包引發移動端支付爭奪戰 占據高地為時尚早</a></li></ul></aside></section><footer><nav><ul><li>關于我們</li><li>聯系我們</li><li>投稿撤稿</li><li>友情鏈接</li><li>免責聲明</li><li>人才招聘</li><li>獨家專題</li><li>中心微信</li></ul></nav></footer></div></body></html>

View Code

運行結果：

2.2、新增加其它元素

2.2.1、meter

表示特定范圍內的數值，可用于工資、數量、百分比等 max表示最大值，min表示最小值，value代表當前值。

<meter max="100" min="0" value="60" style="width: 300px;"></meter>

可以試試用js控制讓它從0變化到100。

2.2.2、time

time。表示時間值，屬性datetime強調時間
大會時間：<time>2015-10-6</time>

<time>2015-10-6</time>
我們在每天早上 <time>8:30</time> 開始上課。 我在<time datetime="2017-02-14">情人節</time>有個約會。

運行效果：

?因為該標簽是一個語義標簽，在瀏覽器上查看時沒有特別的效果，基本與沒有設置標簽的效果相同。

2.2.3、progress

用來表示進度條

        <h3>progress</h3><progress value="75" max="100"></progress>

max：最大值，完成時的值

value：當前值

firefox運行結果:

2.2.4、datalist

該標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

當與input組合時既可以完成選擇有可以輸入。

<input type="text" list="countries" /><datalist id="countries"><option value="中國"></option><option value="美國"></option><option value="日本"></option></datalist>

運行結果：

3.3.1、video視頻標簽

用于在播放視頻，電影

標簽基本格式如下：

        <video width="800" height="600" controls="controls" poster="content/1.jpg"><source src="content/iceage4.mp4" type="video/mp4"></source><source src="content/iceage4.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /></object>當前瀏覽器不支持 video直接播放，點擊這里下載視頻： <a href="content/iceage4.webm">下載視頻</a></video>

運行效果：

source是視頻源，可以有多種，當一種失敗時將選擇下一種，主要有如下3種：

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

格式支持情況：

?標簽屬性：

?source子標簽屬性：

video API方法

video API屬性

video API事件

注意：

        <video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">您的瀏覽器太老了，請升級，視頻下載<a href="#">地址</a></video>

多數的HTML5標簽的innerHTML內容是瀏覽器不支持該標簽時顯示的內容。

事件綁定與監聽的區別：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件綁定與監聽的區別</title></head><body><button id="btnA">按鈕A</button><button id="btnB">按鈕B</button><script type="text/javascript">var btnA = document.getElementById("btnA");var btnB = document.getElementById("btnB");btnA.onclick = function() {alert("你點了一下");}btnA.onclick = function() {alert("你又點了一下");}btnB.addEventListener("click",function(event){alert("你點了一下");},false);btnB.addEventListener("click",function(event){alert("你又點了一下");},false);</script></body></html>

View Code

運行結果：

使用on事件名的形式綁定事件后綁定會覆蓋前面綁定的事件，也就是最后一個綁定的事件會生效；

使用addEventListener綁定事件則不會覆蓋，可同時在一個元素上綁定多個相同的事件。

video API的屬性與事件示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Video 標簽</title></head><body><video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg"><source src="content/iceage4.mp4" type="video/mp4"></source><source src="content/iceage4.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /></object> 當前瀏覽器不支持 video直接播放，點擊這里下載視頻：<a href="content/iceage4.webm">下載視頻</a></video><h2><button onclick="play()">播放</button><button onclick="pause()">暫停</button><span id="msg"></span></h2><script type="text/javascript">var videoIce=document.getElementById("videoIce");function play() {videoIce.play();}function pause() {videoIce.pause();}videoIce.ontimeupdate = function() {document.getElementById("msg").innerHTML=videoIce.currentTime;}</script></body></html>

View Code

運行結果：

3.3.2、audio音頻標簽

?audio可以實現播放聲音，音樂功能。

<audio src=http://baidu/demo/test.mp3 controls >
您的瀏覽器不支持audio元素
</autio>

<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>

audio標簽的屬性，很多屬性都是與video相同的：

autoplay：true|false，如果是 true，則音頻在就緒后馬上播放。?
controls：true|false 如果是true，則向用戶顯示控件，比如播放按鈕。?
end：numeric value 定義播放器在音頻流中的何處停止播放。默認地，聲音會播放到結尾。?
loopend：numeric value 定義在音頻流中循環播放停止的位置，默認是 end 屬性的值。?
loopstart： numeric value 定義在音頻流中循環播放的開始位置。默認是 start 屬性的值。?
playcount： numeric value 定義音頻片斷播放多少次。默認是 1。?
src： url 所播放音頻的 url。?
start : numeric value 定義播放器在音頻流中開始播放的位置。默認地，聲音在開頭進行播放。

source子標簽

使用source元素作為多媒體元素的子標簽
例:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>
使用source元素，瀏覽器在列表順序查找，直到找到一個它能播放的文件格式，找到后，就播放該文件并忽略隨后的其它元素。

audio的API與video基本一樣，下面是一個自定義調整音量的示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>audio標簽</title></head><body><h2>audio標簽</h2><audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3"><marquee><h2>換個瀏覽器吧，太老了</h2></marquee></audio><input type="range" min="0" max="100" onchange="setVolume(this)" />  <script type="text/javascript">function setVolume(obj){document.getElementById("mp3").volume=obj.value*0.01;}</script></body>
</html>