【html5】

5.22 如何处理HTML5新标签的浏览器兼容性问题
方法一 :
1、使用静态资源的html5shiv包
<!--[if lt IE9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
2、载入后，初始化新标签的css
header, section, footer, aside, nav, main, article, figure { display: block; }
方法二：
IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

HTML5的离线储存怎么使用，工作原理能不能解析一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，
这些资源就会像cookie一样被存储了下来。处于离线状态下时，浏览器会通过被离线数据进行展示。
更新缓存：一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest (man me fai st)文件被修改
由程序来更新应用缓存
如何使用： 
1、页面头部像下面一样加入一个manifest的属性； 
2、在cache.manifest文件的编写离线存储的资源； 
3、在离线状态时，操作window.applicationCache进行需求实现。

标签上的 title属性与 alt属性的区别
1、含义不同
alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明
2、在浏览器中的表现不同
在firefox（火狐浏览器）和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，
当鼠标经过图片时title和alt的值都会显示。
3、对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，
也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

input和textarea的区别
<input>是单行文本框，不会换行。通过size属性指定显示字符长度，注意：当使用css限定了宽高，
那么size属性就不再起作用了。有自己的value值，Maxlength属性指定文本框可以输入的最长长度。
可以通过width和height设置宽高，但是也不会增加行数。
<input type="text" value="你好" Maxlength="10">复制代码
<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本默认字体
是等宽字体(通常是Courier)，可通过cols和rows属性来规定textarea的尺寸，不过更好的办法是
使用CSS的height和width属性。
<textarea cols="20" rows="30"></textarea>

用一个div模拟textarea的实现
<div id="textarea" contenteditable="true">
#textarea{
    width:300px;
    border:1px solid #ccc;
    min-height:150px;
    max-height:300px;
    overflow:auto;如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容
    font-size:14px;
    outline:none; 文本域的大小不能随鼠标的拖动来改变
}

contenteditable属性，值为Boolean值，true绑定元素可编辑，false(默认)元素不可编辑。

5.23 html5有哪些新特性？
语义化标签:
布局：
    头部：<header></header>
    尾部：<footer></footer>
    独立结构：<article></article>
    主要内容：<main></main>
    导航：<nav></nav>
    侧边栏：<aside></aside>
    节、段、分组：<section></section>
表单新增语义化标签：
    新增input属性
    input类型    number email ... 描述
    autofocus    页面加载时自动获取焦点
    required    规定输入域不能为空
    placeholder    提供一种提示（hint），输入域为空时显示，获得焦点时消失
    pattern    规定验证input域的模式（正则表达式）
    height、width    仅适用于image类型的input标签的图像高度和宽度
- (1)`Canvas绘图`
- (2)`SVG绘图`   矢量图
- (3)`audio  video`   音频  视频
- (4)`地理定位`   Geolocation（地理定位）
- (5)`Web Worker`
- `web worker` 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。
- (6)`Web Storage`
- 1.Cookie技术 （ 兼容性好,数据不能超4kb,操作复杂）
- 2.（兼容性差,数据8MB,操作简单）sessionStorage
- 3.localStorage
    localStorage.setItem("name",arr);//保存数据
    localStorage.getItem("name")//读取数据，也可以根据key值读取
    localStorage.removeItem(key)//删除单个数据
    localStorage.clear()//数据清空 
    
- (7)`Web Socket`
- WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

说说对canvas，svg，webgl的理解
1. Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，
    可以不再依赖其他的API或组件而直接绘图，相当于2D的API。Canvas 适用于位图，高数据量高绘制
    频率（帧率）的场景，如动画、游戏；

2. SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；SVG 适用于矢量图，低数据量
    低绘制频率的场景，如图形、图表；

3. WebGL（全写Web Graphics Library）是一种3D绘图标准，通俗说WebGL是canvas绘图中的3D版本。
    因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，WebGL 主要用来做 3D 展示、
    动画、游戏