Html5_猿客奇谈

1>语义化标签

1)兼容问题

IE8以上兼容

解决方案：

1>document.createElement("标签名"),然后再给它样式，但是创建的标签并不是一个块标签，所有可以利用display:block;使标签成为块标签.

2>利用插件 html5shiv.js

2）具体内容

header

footer

nav导航

aside一般用于侧边栏

article在页面中表示一套结构完整且独立的内容部分，我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它

section页面上的版块

hgroup一个标题组合（已经废弃）

2>表单控件

1)简单介绍

<form>元素用于生成表单，该元素不会生成可视化部分。
<input>元素是表单元素中功能最丰富的控件
<label>元素用于在表单中定义标签

2）具体内容

以下当格式不正确的时候，验证不会通过的

email（移动端）提交时会进行格式的验证

url（移动端）提交时会进行格式的验证

tel:电话号码，移动端会变成数字键盘

search:搜索引擎，手机中键盘中的“搜索”

range:数值选择器 step:每次跳的步数 min:最小值 max：最大值 value:此时的值

time：显示时间，不含时区

date：显示日期

week：显示周

month：显示月

color：颜色

datetime:显示完整的日期

datetime-local:显示完整的日期，不含时区

新加属性：

 <input type="text" placeholder="请输入4到16个字符" autocomplete="on" autofocus>

 <input type="text" placeholder="请输入4到16个字符" autocomplete="on" autofocus>

palceholder:显示提示信息，

autocomplete:是否保存用户输入值，默认是on，关闭提示选择off

autofocus：鼠标焦点自动聚集，没有值

list和datalist:为输入框构造一个选择列表（list的值为datalist的ID）

required：必须填写，验证条件

pattern:正则验证，例如pattern="d{1,5}"只能输入1到5 的数字

formaction:在submit中定义提交地址,只在submit中有用

3)id,name,class比较

id:为了js方便获取这个元素

name：要跟服务器进行交互，服务器到时候要获取客户端表单提交的数据，它根据的是name

class：通过样式去批量控制元素

input设置为只读属性

disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。

readonly 属性规定输入字段为只读可复制，后台会接收到传值. readonly 属性可以防止用户对值进行修改

readonly unselectable="on" 该属性跟disable类似

3>用于绘画的canvas,svg

1)canvas制作动画

实例：http://www.hangge.com/blog/cache/detail_1019.html

1》已经为快速绘图做过优化，所以用它做出来的动画速度比较快

2》绘制简单居形的方法

<canvas id="canvas" width="400" height="400">
		<p>你的浏览器不支持"canvas"</p>
	</canvas>
	<script>
	var ctx=document.getElementById("canvas");
	var ctx=canvas.getContext('2d');//获取2dcanvas对象
	ctx.rect(0,0,20,20);
	ctx.fillStyle="red";//绘制或返回用于填充绘画的颜色
	ctx.fill();//填充当前的绘画
	ctx.stroke();//绘制已定义的路线
	</script>

3》绘直线

ctx.moveTo(10,10)//将笔触移到指定位置
ctx.lineTo(20,20);//绘制一条从当前位置到指坐标的位置
ctx.stroke();

2)Svg绘画

1》基本

矩形 < rect >
圆形 < circle >
椭圆 < ellipse >
线 < line >
折线 < polyline >
多边形 < polygon >
路径 < path >
文本 < text >

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="100"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
x,y 为图形左上角相对父元素svg的坐标，rx,ry分别为x,y方向的圆角半径；style定义样式

2》详解

矩形 - rect元素
x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。

圆 - circle元素
r：圆的半径。
cx：圆心坐标x值。
cy：圆心坐标y值。

椭圆 - ellipse元素
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心坐标x值。
cy：圆心坐标y值。

3》渲染

SVG是严格按照定义元素的顺序来渲染的。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素。

4》svg和canvas区别

Canvas	SVG
提供API通过JavaScript 绘制	SVG使用 XML 格式定义基于矢量的图形
逐像素进行渲染	每个被绘制的图形均被视为对象
依赖分辨率	不依赖分辨率(图像在放大或改变尺寸的情况下其图形质量不会有损失)
渲染速度快适合图像密集型的游戏	复杂度高会减慢渲染速度不适合游戏应用

4>媒体元素video,audio

<video src="http://www.webhek.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>

</video>

1）video

1>属性

src ：视频的属性，url地址，src地址可控制播放区,http://xxxx.com/video.mp4#t=10,20 表示播放范围10s-20s

poster：视频封面，没有播放时显示的图片

preload：none（不预加载）|metadata（部分预加载）|auto（全部预加载）。默认为auto

autoplay：自动播放，是一个布尔属性，当出现时，表示自动播放，去掉是表示不自动播放。

自动播放为<video autoplay />或者<video autoplay=”autoplay” />

loop：循环播放，是一个布尔属性

controls：浏览器自带的控制条，需要浏览器启用本身的播放控制栏。控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

width：视频宽度

height：视频高度

2）audio

<audio id="media" src="test.mp3"></audio>

1>控制函数功能说明

load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载

play()加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放

pause() 暂停处于播放状态的音频、视频文件

2>只读属性属性说明

duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN

paused 如果媒体文件被暂停，则返回true，否则返回false

ended 如果媒体文件播放完毕，则返回true

startTime 返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区

error 在发生了错误后返回的错误代码

currentSrc 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

3>audio 可脚本控制的特性值

autoplay 自动播放已经加载的的媒体文件，或查询是否已设置为autoplay

loop 将媒体文件设置为循环播放，或查询是否已设置为loop

currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置

controls 显示或者隐藏用户控制界面

volume 在0.0到1.0间设置音量值,或查询当前音量值

muted 设置是否静音

autobuffer 媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

·  //播放暂停切换  
·  function playAudio() {  
·      if(media.paused) {  
·          play();  
·      } else {  
·          pause();  
·      }  
·  }

3）source标签

1>知识点

Source标签用于给媒体（audio标签同样可以包含此标签，所以这儿用媒体）指定多个可选择的文件地址，但是浏览器最终只能选一个，且只能在媒体标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

2>属性

此标签包含src、type、media三个属性。

src：用于指定媒体的地址，和video标签的一样。

Type：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

media：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。

5>Localstorage,sessionstorage

6>新的API

1)用于请求动画的API requestAnimationFrame（请求动画帧）

1》概念：

requestAnimationFrame它最大的优势是由系统来决定回调函数的执行时机。就是说如果屏幕刷新率是60Hz,那么回调函数就每1000/60被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75，也就是说requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu。

requestAnimationFrame函数会返回一个资源标识符，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调

2》优点：

1.CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

2.函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。

2)FileReader图片上传

1》作用

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

var reader = new FileReader();

2》FileReader接口的方法：有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

readAsBinaryString(file) : 将文件读取为二进制编码,
readAsText(file,[encoding]) : 将文件读取为文本,

3. readAsDataURL(file) : 将文件读取为DataURL,

4. abort(none) : 中断读取操作.

3》FileReader接口事件：用于捕获读取文件时的状态。

1. onabort : 中断,

2. onerror : 出错,

3. onloadstart : 开始,

4. onprogress : 正在读取,

5. onload : 读取成功,

6. onloadend : 读取完成，无论成功失败(无论成功失败)。

4》例子

document.getElementById('upload-file').addEventListener('change', function() {
	var file;
	var destination = document.getElementById('destination');
	destination.innerHTML = '';
	// 循环用户多选的文件
	for(var x = 0, xlen = this.files.length; x < xlen; x++) {
		file = this.files[x];
		if(file.type.indexOf('image') != -1) { 
// 非常简单的交验
		    var reader = new FileReader();
		    reader.onload = function(e) {
			var img = new Image();
			img.src = e.target.result; // 显示图片的地方
destination.appendChild(img);
			};
		reader.readAsDataURL(file);
		}
	}});

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />
<-- 显示图片的地方 -->
<div id="destination"></div>

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
//判断浏览器是否支持FileReader接口  
if(typeof FileReader == 'undefined'){  
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
    //使选择控件不可操作  
    file.setAttribute("disabled","disabled");  
}   
function readAsDataURL(){  
    //检验是否为图像文件  
    var file = document.getElementById("file").files[0];  
    if(!/image/w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
    var reader = new FileReader();  
    //将文件以Data URL形式读入页面  
    reader.readAsDataURL(file);  
    reader.onload=function(e){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML='<img src="' + e.target.result +'" alt="" />';  
    }  
}   
function readAsBinaryString(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以二进制形式读入页面  
    reader.readAsBinaryString(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}   
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以文本形式读入页面  
    reader.readAsText(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
</script>

<p>  
    <label>请选择一个文件：</label>  
    <input type="file" id="file" />  
    <input type="button" value="读取图像" onclick="readAsDataURL()" />  
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
    <input type="button" value="读取文本文件" onclick="readAsText()" />  
</p>  
<div id="result" name="result"></div>

2》Web Worker 可以分为两种不同线程类型

一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。

3》专用线程

1)专用线程创建方式:在创建专用线程的时候，需要给 Worker 的构造函数提供一个指向 JavaScript 文件资源的 URL，这也是创建专用线程时所需要的唯一参数。

var worker = new Worker('dedicated.js')

2)专用线程通信：

接收来至工作线程示例代码

worker.onmessage = function (event) { ... };

专用线程发送数据(专用线程不仅仅支持传输二进制数据，也支持结构化的 JavaScript 数据格式。)在这里有一点需要注意，为了高效地传输 ArrayBuffer 对象数据，需要在 postMessage 方法中的第二个参数中指定它。

worker.postMessage({ 
 operation: 'list_all_users', 
 //ArrayBuffer object 
 input: buffer, 
 threshold: 0.8, 
}, [buffer]);
异常处理
worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}
结束worker
worker.terminate();

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

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

4》共享线程

共享线程是为了避免线程的重复创建和销毁过程，降低了系统性能的消耗，共享线程SharedWorker可以同时有多个页面的线程链接。

1）共享线程的创建：构造函数使用 URL 作为第一个参数，指向 JavaScript 资源文件的 URL，如果提供了第二个构造参数，那么这个参数将被用于作为这个共享线程的名称。

var worker = new SharedWorker('sharedworker.js', ’ mysharedworker ’ );

2）与共享线程通信

接收数据

 worker.port.onmessage = function (event) { define your logic here... };

发送数据

 worker.port.postMessage('put your message here … ');

5》使用场景

使用工作线程做后台数值（算法）计算

比如：计算两个非常大的数字的最小公倍数和最大公约数。

使用共享线程处理多用户并发连接

创建一个共享线程用于接收从不同连接发送过来的指令，然后实现自己的指令处理逻辑，指令处理完成后将结果返回到各个不同的连接用户。

4)postMessage跨域交换数据(ie8+兼容)

1》解决问题：

不能和服务器交换数据，只能在两个窗口之间交换数据（两个窗口能通信的前提是，一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是从另一个窗口通过window.open()或者超链接的形式打开的），也就是说要交换数据必须能获取目标窗口的引用，不然两个窗口毫无联系，想通信也无能为力。

2》使用方式：

2.1>otherWindow.postMessage(message,targetOrigin,[transfer]);

otherWindow->是对接收方窗口的引用，一般表示方式：

window.frames[0],document.getElementsByTagName(‘iframe’)[0],window.opener...

message:发送的内容，支持字符串，数字，json等几乎所有形式的数据

targetOrigin：接收方url（协议+主机+端口），也可以是url形式，但之后的内容（形如xxx.html）会自动忽略

2.2>接收方一般监听message事件，获取postMessage传来的消息

window.addEventListener(‘message’,function(event){

})

event有3个主要的参数：

data：传递过来的消息

source：发送消息的窗口对象

origin：发送消息的源（协议+主机+端口号）

3》安全性：

postMessage采用“双向安全机制”，发送方发送数据的时候，会确认接收方的源，而接受方监听message事件后，也可以用event.origin判断是否来自正确可靠地发送方。

4》例子

<--http://localhost:81-->
<iframe src="http://localhost:8080/index.html"></iframe>
<script>
document.getElementsByTagName('iframe')[0].contentWindow.postMessage({"age":10},'http://localhost:8080')
window.addEventListener('message',function(e){
	console.log(e)
})
<--http://localhost:8080-->
<script>
window.addEventListener('message',function(e){
	if(e.origin!=='http://localhost:81')
		return;
		console.log(e);
		e.source.postMessage('hello world',e.origin)
})
</script>