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
简单介绍html5的新特性_腾讯视频
文本链接：http://www.jnshu.com/daily/22923?uid=7446
PPT链接：https://ptteng.github.io/PPT/PPT/css-15-html5.html#/
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！邀请码哦———84959420
网友评论