1.背景介紹
以前沒有了解前端的時候，總是看到一些很有噱頭的招生信息，打著html5這個的廣告在招人。現在學完css任務之后，回頭總結一下，發現其實已經在html5的環境下做了許多。今天就和小伙伴們分享、討論一下html5到底是什么？
2.知識剖析
2.1什么是Html5？
萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
2000年左右，為了推動Web標準化運動的發展，一些公司聯合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web超文本應用技術工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網聯盟） 專注于XHTML2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。于2014年10月29日，由萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于得以制定完成。
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。
2.2 html5有哪些新特性？
編碼方式得到了更新
有空值的屬性等價于屬性與值完全相同的情形，即使這個屬性并非boolean屬性。腳本和鏈接無需type。
為了用于更好的文檔結構定義了新標簽：header、footer、aside、nav、main、article、section等。
新添加了多媒體元素：aduio、video、canvas、SVG。減少了對flash插件的依賴。canvas的演示
新添加了用于下拉菜單的標簽：datalist。菜鳥演示
form和input的屬性得到了拓展。菜鳥演示
添加了注釋img的標簽：figure和figcaption。菜鳥演示
重新定義small標簽，用于網站底部的版權狀態。菜鳥演示
新添加了拖放（Drag 和 Drop）功能。
新添加了一個用于進度條的標簽progress。
新增了許多API（應用程序編程接口），如：Geolocation（地理定位），Web SQL 數據庫 API，Page Visibility API（頁面可見性API）,File API等，以上的接口都不屬于H5規范的部分，有各自獨立的規范，但是都屬于H5相關API。
HTML5 引入了應用程序緩存（Application Cache）和離線存儲web storage，也就是前段時間使用到的localStorage，sessionStorage。
增加了更多事件屬性。
3.常見問題
問題: Html5的優勢和不足？
4.解決方案
優勢：
1.提高可用性和改進用戶的友好體驗;
2.有幾個新的標簽，這將有助開發人員定義重要的內容；
3.可以給站點帶來更多的多媒體元素(視頻和音頻)；
4.可以很好的替代FLASH和Silverlight；
5.當涉及到網站的抓取和索引的時候，對于SEO很友好；
6.將被大量應用于移動應用程序和游戲。
7.標簽更加語義化，使用更分明。
不足
安全性上還有需要彌補的地方。HTML5所構建的網頁和其他語言編寫的網頁一樣容易泄露一些敏感數據。
5.編碼實戰
參看以上demo中的演示，這里不再贅述！
6.擴展思考
問題: canvas和SVG的區別？
SVG 是一種使用 XML 描述 2D 圖形的語言。 Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。更詳細的信息可以查看：菜鳥教程。
7.參考文獻
參考一：菜鳥教程
參考二: 《JavaScript高級程序設計》
參考三：html5新特性詳解
參考四：HTML5新特性及詳解
8.更多討論
討論點：大家對Html5中的新特性還有哪些理解？
視頻鏈接：https://v.qq.com/x/page/q0502e2x2qp.html
文本鏈接：http://www.jnshu.com/daily/22923?uid=7446
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-15-html5.html#/
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！邀請碼哦———84959420
