H5新特性

H5新特性

HTML是用来表示一个网页架构的，其中的语义标签便是骨架。HTML5是一个新的网络标准，他不在遵循SGML(标准通用标记语言),所以不在需要DTD的声明。

1 基础语义标签：

<command>定义命令按钮</command>

<datalist>定义可选数据列表，与input配合可实现下拉框</datalist>

<details>定义元素的细节，可点击隐藏或打开查看，常与summary联合使用</details>

<summary>定义details的显示标题</summary>

<embed>定义嵌入内容，例如插件</embed>

<hgroup>对网页或section的标题进行组合</hgroup>

<figure>定义一组媒体对象以及文字内容</figure>

<figcaption>定义figure的标题</figcaption>

<meter>定义度量衡</meter>

<keygen>定义生成的密钥</keygen>

<time>定义日期或时间</time>

<progress>定义进度条</progress>

<ruby>定义 ruby 注释（中文注音或字符）</ruby>

<rt>定义字符（中文注音或字符）的解释或发音 </rt>

<rp>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容 </rp>

2 布局语义标签：

<nav>定义导航</nav>

<header>头部</header>

<article>定义文章</article>

<aside>定义文章侧边栏</aside>

<section>定义文档中的区段 区域</section>

<footer>尾部</footer>

3 input其他的类型：

1. text 文本输入框
2. password 密码
3. button 按钮
4. checkbox 复选
5. radio 单选
6. submit 提交
7. reset 重置
8. file 文件
9. email 输入邮箱地址 检测@
10. url URL地址
11. number 只能输入数字 还有e
12. range 范围 默认0~100

属性：

required 必填

placeholder 提示语占位

autocomplete 启动浏览器自动记忆填充功能

4 功能标签：

<video src="">定义视频</video>

autoplay:自动播放

controls:控制播放

loop：是否重复播放

preload：是否自动加载

<audio src="">定义音频</audio>

<mark>标记，突出文字</mark>

<iframe src="" frameborder="0">内嵌网页框架</iframe>

<canvas>定义图形提供画布</canvas>

5 流式布局

即百分比布局。（宽度， 高度，边距，rem，定位值）

尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高

定位值百分比 = 目标元素的定位值 / 父级的宽高

margin和padding / 父级的宽度

em rem

em: 针对父级来设置自身

rem: 针对html

6 媒体查询

可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分。

only 可以省略 多个条件用and相连

@media only screen and (min-width:500px) and (max-width:700px){......}

link:

<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">

响应式网站：由两种办法完成响应式网站, 流式布局和媒体查询，通常情况下相辅相成共同完成响应式网站。

7 前缀

腾讯：国内唯一有自己内核的公司，X5。（X5的浏览器内核是基于早起的webkit内核开发出来的，而后自己优化。QQ浏览器 微信）

-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）

-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）

-ms-: 微软 ie 斯巴达

-moz-: 火狐 ff

8 存储机制（webStorage）

web Storage的出现是为了弥补cookie的弊端。当数据只需在浏览器使用的时候，不必每次将数据还发送到服务端。

localStorage:本地缓存，持久的保持数据在客户端。

sessionStorage:会话缓存，随着浏览器的关闭而清空。

9 Web Worker

web worker是运行在另一个作用域的后台线程，它不能直接访问dom元素。JavaScript本身是单线程执行的，web worker让多线程操作变成了可能。web worker是以主线程为同步任务，其他线程为异步任务执行的。

其原理如下：

1.所有的同步任务都放在主线程上，形成一个任务栈。

2.在主线程外还存在着一个任务队列，所有的异步任务当执行后有结果了就放到该任务队列中。

3.当所有同步任务执行完成后，主线程检查任务队列，执行任务队列中的任务。

4.重复上面1、2、3步。

创建新的Worker

var worker = new Worker("worker.js")

传递参数

worker.postMessage("text");

接收消息

worker.onmessage = function (e) {
        var message = e.data;
};

异常处理

worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}

结束worker

worker.terminate();

载入工具类函数

importScripts("./utils/base64.js","./utils/map.js"...)

需要注意的是importScripts是同步方法，一旦importScripts方法返回就可以开始使用载入的脚本，而不需要回调函数。

创建共享线程

var shareWorker = new SharedWorker("sharedworker.js");

监听共享线程消息

shareWorker.port.onmessage = function(e){
    ...
}

共享线程发消息

shareWorker.port.postMessage("message");

10 地理位置（Geolocation ）

if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition,showError);
}

getCurrentPosition(postion,error):获取用户位置信息，第一个参数为获取成功的执行函数，第二个为错误处理函数。方法返回的是一个包含longitude (经度)、latitude (纬度)、accuracy (精度)等属性的一个对象。

watchPosition():相当于GPS定位，返回实时的位置信息。

clearWatch():停止watchPosition的执行。