HTML5有哪些新特性、移除了哪些元素？

（一）.H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

1)  绘画 canvas;

类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

画图需要的要素

a)   笔，用笔可以画线、圆、矩形、文本等

b)   颜色

c)   画板

由于画布案例比较多，代码比较复杂，请看视频学习http://www.chuanke.com/3885380-190205.html 

2)  本地离线存储 localStorage

长期存储数据，浏览器关闭后数据不丢失;

1.特点

数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。

2.数据存取方式

 

1.  
   localStorage.a = 3;//设置a为"3"
2.  
   localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
3.  
   localStorage.setItem("b","isaac");//设置b为"isaac"
4.  
   var a1 = localStorage["a"];//获取a的值
5.  
   var a2 = localStorage.a;//获取a的值
6.  
   var b = localStorage.getItem("b");//获取b的值
7.  
   var b2= localStorage.key(0);//获取第一个key的内容
8.  
   localStorage.removeItem("c");//清除c的值
9.  
   localStorage.clear();//清除所有的数据

 

推荐使用：

getItem()

setItem()

removeItem()

3.事件监听

 

1.  
   if(window.addEventListener){
2.  
   window.addEventListener("storage",handle_storage,false);//
3.  
   }else if(window.attachEvent){ //兼容IE
4.  
   window.attachEvent("onstorage",handle_storage);
5.  
   }
6.  
   function handle_storage(e){
7.  
   }

 

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

3)  sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4)  用于媒介回放的 video和 audio 元素;

5)  语意化更好的内容元素，比如article、footer、header、nav、section;

6)  表单控件，calendar、date、time、email、url、search;

7)  新的技术webworker(专用线程)

8)  websocketsocket通信

9)  Geolocation 地理定位

（二）移除的元素

纯表现的元素

 

•   <basefont> 默认字体，不设置字体，以此渲染
•   <font> 字体标签
•   <center> 水平居中
•   <u> 下划线
•   <big> 大字体
•   <strike> 中横线
•   <tt> 文本等宽

 

框架集

•   <frameset>
•   <noframes>
•   <frame>

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

结构性元素主要负责web上下文结构的定义

section：在 web 页面应用中，该元素也可以用于区域的章节描述。

header：页面主体上的头部， header 元素往往在一对 body 元素中。

footer：页面的底部（页脚），通常会标出网站的相关信息。

nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分，确保内容的有效分割。

aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

code：表示一段代码块。

dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

meter：表示特定范围内的数值，可用于工资、数量、百分比等。

time：表示时间值。

progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。

video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

command：用来处理命令按钮。

*移除的元素

 纯表现的元素：basefont，big，center，font,s，strike，tt，u；

 对可用性产生负面影响的元素：frame，frameset，noframes；