HTML基础常识问答（四）

html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题
新特性：

1. 语义化更好的内容标签：

<header>标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。
<footer>标签一般配合address标签(显示地址)，包含作者信息、相关链接等。
<nav>标签一般包含多个a标签，构建导航组件。
<aside>标签主要装载广告、侧边栏。
<article>标签包含文章，一般内嵌header、footer、h1、p标签。
<section>标签可以用在以上任一一个标签中划分组件。
<hgroup>顾名思义是h1~h6的集合。
<time>定义日期或者时间，或者两者
<main>规定文档的主要内容（不能出现一个以上的main元素）
<figure>标签包含独立的媒体内容，图像、图标、照片等
<figcaption>标签定义figure的元素标题
<details>描述文档某个部分细节，而这个细节并不需要文档加载时就展示，而是可以折叠
<summary>默认显示的details元素的标题
<datalist>输入框提示列表（input的list属性值为datalist的id）
<progress>进度条。max 进度完成值，min 定义当前值
<mark>标记需要突出显示的文本

这些标签就是div标签的语义化的转化，过去我们使用div来包裹某块或组件，现在可以使用这些语义化标签，有利于代码的可读性和SEO
语义化标签在IE6-8有兼容问题，可以使用：

document.createElement('header')
document.createElement('nav')

这样js创建的标签没有样式，需要在css中定义，或者只用插件html5shiv来解决。

2. 本地离线存储

• localStorage长期存储数据，浏览器关闭后数据不丢失，相同浏览器的不同页面间可以共享相同的 localStorage，除非主动删除数据
• sessionStorage数据存储在关闭浏览器之前，浏览器关闭后数据自动删除。
• 1.相同的使用方法,API基本是一样的
  (1) localStorage API:
  a.使用setItem设置储存内容:
  localStorage.setItem(“name”,“123”)
  localStorage.name = “123”;
  localStorage[‘name’] = “123”
  b.使用getItem获取储存内容:
  localStorage.getItem(“name”)
  localStorage.name
  c.使用removeItem删除储存内容(删除指定key):
  localStorage.removeItem(“name”)
  d.使用clear方法清除储存内容(清除所有key):
  localStorage.clear();
  e.使用length属性,获取储存的key个数
  localStorage.length
  (2) sessionStorage API:基本和localStorage差不多
• 使用本地储存注意点:

1. 存储容量超出限制,会抛出QuotaExceededError异常. 解决:储存时应使用try catch 避免异常未捕获
2. 储存类型的限制,只能储存字符串
3. sessionStorage同一个url路径下,不同标签页不能共用储存内容.

• 如:我在a.html页面储存name,我打开另一个新标签,输入a.html的地址,则获取不到储存的name
• 存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。
  以下是它的常用应用场景：

   var userData = {
       name : '张三',
       age: 24
   }
   localStorage.setItem('userDate', JSON.stringify(userData));
   var newUserData = JSON.parse(localStorage.getItem('userData')); 

另外，浏览器提供了storage事件来监听存储,

  window.addEventListener('storage', showStorageEvent, true)

详细案例点这里

3. 表单新增的属性控件
   以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定如下：

<form id="testform">
   <input type="text" />  
</form> 
<input form=testform />

• placeholder屬性

<input type="text" placeholder="请输入密码" />

• autofocus属性，页面只能有一个

<input type="text" autofocus />

还有calendar、date、time、email、url、search 、tel、file、number等，这里就不提了

4.音频和视频

• 4.1: 以下属性可以直接写在video标签中

<video controls loop muted poster="res/x.png">
       <source src="res/x.mp4">
       您的浏览器版本太低请升级
</video>

成员属性：
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略

1. auto: 预加载一定时长视频和元数
2. metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
3. none: 不加载任何内容

• 4.2 以下属性需要借助js才能使用:
  对象属性:
  currentTime 当前播放时长
  duration 总时长
  paused: 当前视频是否处理暂停状态
  volume（0~1） 音量
  playbackRate: 回放速率: 大于1快播 小于1慢放
  成员方法:
  play() 播放视频
  pause() 暂停视频播放
  事件:
  onplay 当视频开始播放触发事件
  onpause 当视频暂停播放触发事件
• 4.3:以下属性可以直接写在audio标签中
  成员属性
  autoplay 是否自动播放
  controls 是否显示控件
  muted 是否静音
  loop 是否循环播放
  preload 视频加载策略
  auto: 预加载一定时长视频和元数据
  metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
  none: 不加载任何内容

以下属性需要借助js才能使用:
##js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
#js 成员方法
play() 播放音频
pause() 暂停音频播放
#js 事件
onplay 当音频开始播放触发事件
onpause 当音频暂停播放触发事件

• 详细案例点这里

5.画布（Canvas）

1. canvas是什么？–> 画布
2. 使用方法：
   js获取画布–>获取笔（2d || 3d）–>开始画–>起点–>中间点–>绘制–>关闭绘制环境

var myCanvas = document.querySelector("#myCanvas");
		//获取canvas的上下文(整个画布中的内容)
		var ctx = myCanvas.getContext("2d");		
		ctx.lineWidth=4;
		//设置绘制的样式
		ctx.strokeStyle="aqua";
		//绘制
		ctx.fillStyle="yellow";
		//我要开始绘制
		ctx.beginPath();
		//起点
		ctx.moveTo(10,20);
		ctx.lineTo(210,20);
		ctx.lineTo(210,120);
		ctx.lineTo(10,120);
		//关闭路径
		ctx.closePath();
		ctx.fill();
		ctx.stroke();

3. 能干什么？
   色块、文字、阴影、图形、圆形arc、图片、视频–>优点是速度块
4. echarts底层就是canvas
5. canvas本身难点在于数学计算
6. 布局:
   一般就是行列布局使用for嵌套

• 详细案例点这里

6.地理定位（Geolocation）
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能。
地理位置定位基本原理
GPS, WIFI, IP, 手机信号基站
核心对象
Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。
要用该功能需先判断浏览器是否支持navigator.geolocation对象。

• 详细了解点这里

7.拖拽释放 (Drag and drop)
本章内容过大，不在本章详细叙述点击下方链接了解更多
属性和方法的详解
详细案例

8.离线缓存（applicationCache ）
简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用，这些文件包括html、js、css、img等文件。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。
其实在有网络的时候，浏览器也会优先使用已离线存储的文件。而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
详细了解点击这里

总结：
H5新特性：

1. 新增选择器 document.querySelector、document.querySelectorAll
2. 拖拽释放(Drag and drop) API
3. 媒体播放的 video 和 audio
4. 本地存储 localStorage 和 sessionStorage
5. 离线应用 manifest
6. 桌面通知 Notifications
7. 语意化标签 article、footer、header、nav、section
8. 增强表单控件 calendar、date、time、email、url、search
9. 地理位置 Geolocation
10. 多任务 webworker
11. 全双工通信协议 websocket
12. 历史管理 history
13. 跨域资源共享(CORS) Access-Control-Allow-Origin
14. 页面可见性改变事件 visibilitychange
15. 跨窗口通信 PostMessage
16. Form Data 对象
17. 绘画 canvas

• H5移除的元素：
  纯表现的元素：basefont、big、center、font、s、strike、tt、u
  对可用性产生负面影响的元素：frame、frameset、noframes
• 兼容问题
  IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架）：

<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->