HTML的新特性

@2017/4/23

标签

<section></section>定义文档中主体部分的节，段。
<article></article>一个特殊的section标签,语义更加明确。定义来自外部的一个整体内容块。如博客的文本。
<aside></aside> 装载非正文的内容，独立的模块，比如广告，侧边栏。
<header></header> 定义页眉，通常是引导和导航信息，不局限。
<footer></footer> 定义页脚，
<nav></nav> 链接组组成的导航部分，其中的链接可以通往其他页面。
<hgroup></hgroup> 对于网页或者区段（section）的标题元素进行组合。
<figure></figure> 对与元素进行组合。
<figcaption></figcaption> 为figure增加标题。
<details></details> 定义元素的细节，用户可以查看或隐藏。
<summary></summary> 与details连用，做标题
<canvas></canvas> 绘图
<video></video> 定义视频
<audio></audio> 定义音频
<embed></embed> 定义嵌入网页的内容 ，插件
<source></source> 媒介元素 audio video
<datalist id="dl"></datalist> 定义可选数据的列表，与input搭配，<input list = "dl"> 制作输入值的下拉列表。
<mark></mark> 展现突出文字。比如高亮显示搜索关键词。
<meter [min/max/low/high/optimum/value]></meter> 度量衡，用红黄绿表示出一个数值所在范围。
如： <meter value="3" min="0" max="10">3/10</meter>
<meter value="0.6">60%</meter>
<output></output> 定义不同的输出类型，样式类似span，比如脚本的输出。
<progress></progress> 进度条，<progress>运行中的进度。
<time></time> 定义日期时间。
<keygen></keygen> <keygen name=" " />定义加密内容。
<command></command> 定义命令行为。

表单特性

一 、 input的type值

email 邮箱输入域，简单验证，弹出提示窗口。
url 地址输入域，简单验证。弹出提示窗口。
number 数字输入域，可设置min、max、step。
tel 电话号码输入域 ，手机浏览器弹出数字输入域。
search 搜索输入域，手机右下角呈现搜索按键。
range 范围选择控件。
color 颜色选择控件。
data/month/week 时间选择控件。

二 、 表单属性

autocomplete 自动补全，是否自动记录，用于下次输入建议。
placeholder 占位符，输入框中显示提示性文字。
autofocus 自动获得输入焦点。
multiple 是否允许多个输入值，有则允许。
form 值为某个表单的id，若设置，则该输入域可放在表单外面。
required 在表单提交时验证是否有输入，没有则弹出提示消息。
maxlength 限制最大长度，只有在输入的情况下有用，不区分中英文。
minlength 限制最小长度，但他不是H5标准属性，部分浏览器支持。
min 限定输入数字的最小值。
max 限定输入数字的最大值。
step 限定输入数字的步长，与min连用。
pattern 指定一个正则表达式，对输入进行验证。正则默认首尾加^$。

视频&音频

一、视频

H5新加了video标签，用来播放视频，默认为一个300*150的inline-block。

二、音频

H5新加了audio标签，用来播放音频。默认为一个300*30并且display为none的inline-block（除非有controls属性）。但safari不支持。

三、共有成员

src 资源路径。
autoplay 是否自动播放。
controls 是否显示控件。
currentTime 当前播放的时间点。
duration 总时长s。
ended 是否结束。
loop 是否循环。
muted 是否静音。
volume 音量设置 0-1。
paused 是否在播放。
preload 指定视频预加载方案。
play（） 播放。
pause 暂停。
onplay 开始播放事件。
onpause 开始暂停事件。
onplaying 正在播放中事件。

Canvas绘图

默认一个300*150的inline-block。canvas的宽高只能用它自身的width和height属性来指定，而不能使用css的width和height。

一、获得‘画笔’对象，canvas所有的任务都需要它来执行

canvas 标签只是图形容器，必须使用脚本来绘制图形。
var canvas=document.getElementById(‘id’)
var ctx=canvas.getContext(‘2d’);

二、常用属性

fillStyle 填充样式。比如颜色。
strokeStyle 描边样式。
lineWidth 描边宽度。
font 绘制文本所用的字体大小和类型。
textBaseline 文本对其的基线。
shadowOffsetX、shadowOffsetY 阴影偏移量。

三、使用canvas绘制图形

1、绘制矩形
ctx.fillRect(x,y,w,h) 填充一个矩形。
ctx.strokeRect(x,y,w,h) 描边一个矩形。
ctx.clearRect(x,y,w,h) 清除一个矩形范围内的内容。
2、绘制文本
ctx.fillText(txt,x,y) 填充文本。
ctx.strokeText(txt,x,y) 描边文本。
ctx.measureText(txt) 测量。
文本的定位点默认在文本基线(alphabetic)的起始点。
3、为图形文字添加阴影
ctx.shadowColor=’#000’//颜色
ctx.shadowOffsetX=8//水平偏移
ctx.shadowOffsetY=8//垂直
ctx.shadowBlur=10//模糊半径
4、在绘图时使用渐变色
ctx.createLinearGradient(x1,y1,x2,y2)创建线性渐变对象
ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)创建径向渐变对象
ctx.addColorStop 添加颜色点
5、绘制路径
ctx.beginPath() 开始路径
ctx.closePath() 结束路径
ctx.moveTo(x,y) 移动到指定点
ctx.lineTo(x,y) 绘制直线路径到指定点
ctx.arc() 绘制拱形路径
ctx.ellipse() 绘制椭圆路径
ctx.bezierCurveTo() 绘制贝塞尔曲线路径
ctx.linJoin() 修改折线拐点处样式
6、绘制图像
ctx.drawImage()
7、对于绘制上下文本状态的改变和修改
ctx.translate(x,y) 坐标轴原点移动到指定点
ctx.rotate() 旋转画笔
ctx.scale() 画笔缩放
ctx.save() 保存绘图上下文当前的变形数据
ctx.restore() 恢复最近一次的保存的变形相关的形态

SVG(Scalable Vector Graphics)绘图

绘制矢量图，可用css专有属性，js动态生成document.createElementNS(‘http://www.w3.org/2000/svg‘,’标签名’)；SVG元素的nodeName都是纯小写形式。

一、使用方法

<svg></svg> 默认300*150的inlin-block。

二、绘制不同图形

绘制矩形
<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>
绘制圆形
<circle [r/cx/cy]></circle>
绘制椭圆
<ellipse [rx/ry/cx/cy]></ellipse>
绘制直线
<line [x1/y1/x2/y2/stroke]></line>
绘制折线
<polyline [points/stroke]></polyline>
绘制多边形
<polygen [points]></polygen>
绘制文本
<text [x/y/font-size/aliment-baseline/fill]></text>
绘制图像
<image [width/height/xlink:href]></image>
特效对象–渐变特效
<defs><linearGradient [x1/y1/x2/y2]><stop [offset/stop-color]></stop></linearGradient></defs>
特效对象–高斯模糊滤镜
<defs><filter><feGaussionBlur [stdDeviation]></filter></defs>

地理定位

使用JS获取浏览器当前所在的地理坐标，实现LBS(Location Based Service，基于定位的服务)。
基本调用方法：
if(navigator.geolocation){
　　　　navigator.geolocation.getCurrentPosition(successFn,errorFn,{
　　　　　　enableHighAccuracy:true,//获得高精度位置，默认为false
　　　　　　timeout:5000,//获取地理位置的超时时间，默认不限时
　　　　　　maximumAge:3000//最长有效期
});
}
*errorFn就是获取地理位置信息失败后的回调函数，输出一些错误信息
*successFn是成功获取后的回调函数，可以结合一些框架实现地理定位，比如百度地图、Google Map API等

拖放API

为了鼠标拖放提供了7个事件
一、拖动的源对象(source)可以触发的事件
dragstart 拖动开始
drag 拖动进行中
dragrend 拖动结束
二、拖动的目标对象(target)可以触发的事件
dragenter 拖动进行时
dragover 源对象在目标对象上方时
dragleave 拖动离开时
drop 鼠标释放时
*特别注意的一点是，如果想触发drop事件，必须阻止dragover的默认行为
三、源对象和目标对象的数据传递
可使用全局变量

使用拖放事件的dataTransfer属性
源对象保存数据：
source.onxxx=function(e){
　　e.dataTransfer.setData(‘key’,’value’);
};
目标对象接收数据：
target.onxxx=function(e){
　　e.dataTransfer.getData(‘key’);
}

Web Worker

js是单线程的，webWorker允许js创建多个线程，但是子线程完全受主线程控制，而且不能操作Dom，从而来处理一些比较耗时的操作。

构造函数var worker = new Worker(‘worker.js’);

postMessage() 用来在主线程和子线程传递数据。
terminate() 终止子线程，无法在调用，除非重新创建 (worker.terminate();)
message 消息发送时触发，通过事件data属性获得传递的数据
error 当出错时触发，通过message属性获得错误的信息
1、可以在worker中可以通过importScripts(url)加载另外的脚本文件
2、可以使用定时器的方法，但其余的DOM操作不支持
3、可以使用AJAX发起请求
4、可以访问navigator的部分属性
5、不能跨域加载js文件
6、各个浏览器的差异性，例：Firefox中支持worker中再建worker，Chrome不支持

Demo
worker.js
onmessage=function (e) {
postMessage(‘”{e.data}”has been got’);  
}  
function count() {  
    for (var i = 0,sum = 0; i < 1000; i++) {  
        for (var j = 0; j < 1000000; j++) {  
            sum+=j;  
        }  
    }  
    postMessage(sum);  
}  
var before = new Date();  
postMessage(‘Before getResult:{before}’);
count();
var after = new Date();
postMessage(‘After getResult:${after}’);

webworker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webWorker</title>
</head>
<body onload="init()">
<script>
if(typeof(Worker)!=="undefined")
{
console.log('can');
}
else
{
console.log('cant');
}
function init() {
var worker = new Worker('worker.js');
worker.postMessage('Hello WorkerJS');
worker.onmessage = function (e) {
console.log(e.data);
}
}
</script>
</body>
</html>
输出 ：
can
Before getResult:before499999500000000AftergetResult:{after}
“${e.data}”has been got

Web Storage

一、window.sessionStorage–会话级存储

存储一个数据 sessionStorage[‘key’]=value;
/sessionStorage.setItem(‘key’,value);
读取一个数据 var data = sessionStorage.Storage(‘key’) ;
/ var data =sessionStorage.getItem(‘key’);
获取数据的个数 sessionStorage.length
清除所有的数据
sessionStorage.clear();
清除一个数据
sessionStorage.removeItem(‘key’);

二、window.localStorage–本地存储

存储一个数据 localStorage[‘key’]=value;
/localStorage.setItem(‘key’,value);
读取一个数据
var data = localStorage[‘key’];
/var data = localStorage.getItem(‘key’);
获取数据的个数 localStorage.lenth
清除所有的数据 localStorage.clear();
清除一个数据
localStorage.removeItem(‘key’);

Web Socket

为了解决http协议的request、response一一对应和它自身的被动性，以及ajax轮询等问题。一方可以发送多条信息，连接不中断，永久连接，但也导致了服务器连接的客户端数量有限。
var ws = new WebSocket(‘ws://地址：端口号’)；//创建ws客户端
ws.onopen=function(){//连接成功时触发
ws.send();//发送信息
ws.onmessage=function(e){//获得信息时触发
　　　　　　e.data;//接收的信息
　　　　}
　　}

@2017/4/23
——————————分割线——————————————