html5新增了哪些特性

这篇文章将为大家详细讲解有关html5新增了哪些特性，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 html5新增的特性：1、语义化标签（header、footer、nav等）；2、webStorage储存机制；3、history对象；4、表单类型（email、tell、date等）；5、媒体元素video和audio；6、canvas。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。HTML5 是下一代的 HTML, 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 是 W3C 与 WHATWG 合作的结果。为 HTML5 建立的一些规则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求（比如 Flash）更优秀的错误处理更多取代脚本的标记HTML5 应该独立于设备开发进程应对公众透明最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。HTML5 中新增的一些免费云主机、域名有趣的新特性：1、语义化标签header footer 、 nav 、 aside 、 section 、 meau 、 template 、 article 、 audio 、 video 、 canvas 等2、webStorage 储存机制 sessionStorage 和 localStoragewebStorage: 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种：localStorage：没有时间限制的数据存储localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：sessionStorage：针对一个 session 的数据存储sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：
(1) 页面刷新不会消除数据;
(2) 只有在当前页面打开的链接，才可以访sessionStorage的数据；
(3) 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;3、history 对象history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。使用 go( ) 方法可以在用户的历史记录中任意跳转，可以向后，也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单机浏览器的“后退”按钮）正数表示向前跳转（类似于单机浏览器的“前进”按钮）还可以给go（）方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置—–可能前进，也可能后退。具体看哪个位置最近。 如果历史记录中不包含该字符串，那么这个方法什么也不做也可以使用两个简写方法 back( ) 和 forward( ) 来代替 go( ) 。这两个方法都可以模仿浏览器的“后退”和“前进”按钮。4、表单元素的升级传统的表单元素：form、laber、textarea、select、button…input（text、password、radio、checkbox、file、submit、reset、button）Html5给input新增加一些类型（search、email、number、tell、range、color、date）升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）升级：提供了新的下拉框方式5、多媒体用于回放的 video 和 audio 元素6、用于绘画的 canvas定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。　　首先创建canvas元素，并规定元素的id、宽度和高度撒的：　　　　　　
　然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
　　　　　　
　　JavaScript 使用 id 来寻找 canvas 元素：　　　　　　var c=document.getElementById(“myCanvas”);
　　然后，创建 context 对象：　　　　　　var cxt=c.getContext(“2d”);
　　getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。　　下面的两行代码绘制一个红色的矩形：　　　　　　cxt.fillStyle=”#FF0000″;
　　　　　　cxt.fillRect(0,0,150,75);

　　fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。　　下面的两行代码绘制一条直线：　　　　　　cxt.moveTo(100,100);　　　　　　cxt.lineTo(200,200);　　下面的一行代码是画一个圆：　　　　　　cxt.arc(70,18,15,0,Math.PI*2,false);　　这些属性值分别对应的是什么，70,18分别是X轴和Y轴，15是这个圆的半径，0是角度,Math.PI*2是圆周率，false代表顺时针而true是逆时针。　　颜色的渐变效果也是可以实现的：　　还有一些其他效果:　　　　曲线quadraticCurreTo　　　　字体fillText关于“html5新增了哪些特性”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: CSS结构性伪类选择器的语法有哪些

今天小编给大家分享一下CSS结构性伪类选择器的语法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 first-child：单独指定第一个子…