本篇教程探讨了HTML5入门教程 新增的一些特性详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

HTML现在已经不是SGML的子集，主要是关于图像，位置，储存，多任务等功能的增加。　　
　　.绘画canvas；
　　.用于媒介回放的video：
　　　　Ogg是带有Theora视频编码和Vorbis音频编码的文件；
　　　　MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件；
　　　　WebM是VP8视频编码和Vorbis音频编码的文件；
　　　　HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。
　　　　Safari和IE9预期支持H.264格式的视频，Firefox和Opera坚持开源的Theora和Vorbis格式，所以需要提供两种格式。
　　　　Video支持三种视频格式：Ogg，MPEG4，WebM。
　　.audio：
　　　　无需再依赖第三方产检区渲染音频了，因为HTML5提供了<audio>元素。
　　　　以MOozilla核心的Firefox浏览器只支持.ogg文件，webkit核心的浏览器支持.mp3扩展，safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。
　　　　Audio支持三种音频格式：Ogg Vorbis，MP3，Wav。
　　.本地离线储存localStorage长期存储数据，浏览器关闭后数据不丢失；
　　.sessionStorage的数据在浏览器关闭后自动删除；
　　.HTML5的本地存储可以存储5M大小的数据，甚至还多。它主要有四种：localStorage,sessionStorage,webSQL,indexDB；
　　.语意化更好的内容元素，比如 article、footer、header、nav、section；
　　.表单控件，calendar、date、time、email、url、search；
　　.新的技术webworker、websocket、Geolocation；
移除的元素：
　　.纯表现的元素：basefont，big，center，font，s，strike，tt，u；
　　.对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
　　.IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　.可以利用这一特性让这些浏览器支持HTML5新标签，
　　.浏览器支持新标签后，还需要添加标签默认的样式。
　　
　　.当然也可以直接使用成熟的框架、比如html5shim；
　　<!--[if lt IE 9]>
　　　　<script>
　　　　　　src="//html5shim.googlecode.com/svn/trunk/html5.js"
　　　　</script>
　　<![endif]-->
如何区分HTML5：
　　.DOCTYPE声明\新增的结构元素、功能元素
　　.<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。
　　.颜色渐变：
　　　　　　除了CSS 颜色，fillStyle和strokeStyle 属性可以设置为CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。　　
　　.type=number的HTML表单元素是可以用按键的方式改变文本框中的值。
　　. type=range意为可以选择某个值的区域范围。
　　.type=data意为时间选择器控件。
　　.type=color意为颜色选择器控件。
　　.datalist是实现数据列表下拉效果的。
　　.<small>元素不再被用来创建靠近logo且相关的副标题。在html5中，<small>被重新定义，指小字。
　　.在表单输入框应用名为”email”的type属性可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。但是较旧的浏览器不识别，它们会简单的退回到普通文本框。
　　.占位符：
　　　　　　placeholders意为文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字就会消失；失去焦点时如果内容为空，提示文字又出现。在表单控件里面显示的提示性文字就是占位符。
　　　　　　如果是以前需要一些javascript代码实现占位符的操作，而html5却使得其非常轻松
　　.<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！