HTML5新增的一些特性
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="http://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>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。
HTML5新增的一些特性的更多相关文章
- html5 新增标签和特性
文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...
- web前端学习(二)html学习笔记部分(1) -- html5新增的元素及特性等等
检查,在浏览器中可以调整设备类型 html5实现水池效果. lang:en为英文语言,中文语言zh <html lang="en"> <head> < ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增的属性
关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...
- 常用的HTML5、CSS3新特性能力检测写法
伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
随机推荐
- poj3134 Power Calculus IDA*
好端端的一道搜索题目,,,硬生生的被我弄成了乱搞题,,,枚举当前的maxd,深搜结果,然而想到的剪枝方法都没有太好的效果,,,最后用一个贪心乱搞弄出来了,,, 贪心:每次必用上一次做出来的数字与其他数 ...
- C++ double转string类型以及MFC控件简单使用方法
这两天项目须要,測试c++库里面内容.生成jar再给Android调用.我没有学过C++,如今開始记录C++简单使用方法.測试时候一般都是使用mfc程序来測试.要输入值.显示结果吗.我用的编译环境vs ...
- delphi网络函数大全
{=========================================================================功 能: 网络函数库时 间: 2002/10/02版 ...
- 51nod-1131: 覆盖数字的数量
[传送门:51nod-1131] 简要题意: 给出A,B,表示有一个区间为A到B 给出X,Y,表示有一个区间为X到Y 求出X到Y中能够被A到B中的数(可重复)相加得到的不同的数的个数 题解: 乱搞题, ...
- bzoj1433: [ZJOI2009]假期的宿舍(最大二分图匹配)
1433: [ZJOI2009]假期的宿舍 题目:传送门 题解: 这题有点水 跑个二分图匹配就完事了(注意在校生不是一定都互相认识) 代码: #include<cstdio> #inclu ...
- POJ 3665 模拟
按照题意模拟就OK了 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...
- css五种定位方式介绍
1.static定位(普通流定位) -------------- 默认定位 2.float定位(浮动定位) 例:float:left; 有两个取值:left(左浮动)和right(右浮动).浮动元素会 ...
- mysql读写分离的解决方案
来源于网上整理 http://yanwt.iteye.com/blog/1460780 现有三种解决方式实现mysql读写分离 1 程序修改mysql操作类 优点:直接和数据库通信,简单快捷的读写分离 ...
- IHttpHandler的学习(0)
本片文章转自网络 问题1:什么是HttpHandler?(Handler:处理者:那就是对Http请求的处理拉) 问题2:什么是HttpModule? 问题3:什么时候应该使用HttpHandler什 ...
- vue子组件使用指令 同时绑定v-model 指令没有作用
//这里直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...