HTML5 新特性

新增API

语义：能够让你更恰当地描述你的内容是什么。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行（离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中使用文件[FileReader]）。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择(canvas、webGL)。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用（WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件）。
设备访问 Device Access：能够处理各种输入和输出设备（触控事件touch、使用地理位置定位、检测设备方向）。

语义元素

<section></section> 包含了一组内容及其标题。

<article></article> 定义独立的内容

<nav></nav> 定义导航链接部分区域

<aside></aside>标签定义页面主区域内容之外的内容,与主区域的内容相关;侧边栏

表引入外部内容

<address></address>作者地址元素

<data value='433322'></data>将一个指定内容和机器可读的翻译联系在一起。value指定元素内容对应的机器可读的翻译

<figure>img<figcaption>元素代表一段独立的内容，经常与说明caption配合使用</figcaption></figure> figcaption定义figure的标题

<mark></mark>元素突出显示的文本通常和当前用户活动具有某种关联性，而<strong></strong>用来表示文本在上下文中的重要性

<progress value='70' max='100'>70%</progess>进度条

对于不支持HTML5的浏览器，默认为inline;只需另为定义一下section,article,aside,footer,header,nav,hgroup{display:block;}；2还需要引入goole的html5shiv.js

如果禁用脚本：则加上noscript标签

嵌入媒体：<audio controls></audio>、<video></video>

　　属性：src=url

　　　　　controls:显示标准的HTML5控制器

　　　　　autoplay:是音频自动播放

　　　　　loop：音频重复循环播放

　　　　　preload='auto' 表缓冲文件的属性，其值有：none不缓冲；auto缓冲音频文件；metadata缓冲文件的元数据

<source src='' type=''>来指定多个文件，为不同浏览器提供可支持的编码格式<video><source src='' type='video/ogg'...><source type='video/mp4' ...></video>　　

js操作媒体var v=document.getElementByTagName('video')[0];

　　　　　v.play(); v.pause(); v.volume+=0.1; v.volume-=0.1;

　　　　终止媒体下载：v.pause();v.src=''; or v.removeAttribute('src');

　　　　在媒体中查找：v.seekable.start();返回开始时间

　　　　　　　　　　　v.seekable.end();返回结束时间

　　　　　　　　　　　v.currentTime = 122;设定在122s

　　　　　　　　　　　v.played.end(); 返回浏览器播放的秒数

　　　　　　　　　　　v.muted;是否静音，默认为false，表示有声音

　　　　　arc='..../...#20,50'　默认从20s 到50s；02:30:00

　　　　　v.networkState 检测加载的媒体

<track>元素被当作媒体元素audio video 的子元素来使用，允许指定计时字幕，如自动处理字幕／

表单元素<input>type特性

　　search:会自动取掉换行符

　　tel:可加pattern maxlength限制输入的值

　　url

　　新增属性 <input list='brower'> <datalist id='brower'><option value='v1'><option value='v2'></datalist>

　　　　　　pattern 正则表达式

　　　　　　form 定义该input属于那个<form>元素的

　　　　　　formmethord:覆盖get post

　　　　　　formnovalidate 该input不验证

<form>元素新特性：novalidate:设置了该特性不会再表单提交之前进行验证

placeholder autofocus

web存储：

web存储的主要目的：提供一种在cookie之外存储会话数据的途径；提供一种存储大量可以跨会话存在的数据机制。

localStorage和sessionStorage对象都是以windows对象属性的形式存在的

localStorage 对象存储的数据没有时间限制 localStorage.lastname="Smith";localStorage.lastname；持久保存客户端文档或用户偏好设置。

sessionStorage 方法针对一个session进行数据存储，当用户关闭浏览器窗口时，数据会被删除,针对小段数据的存储。

setItem()直接设置新的属性来存储数据

／／无法解析sessionStorage.begin();//确保在这段代码执行的时候不会发生其他磁盘写入操作

//使用sessionStorage方法存储数据
sessionStorage.setItem('name','Nicholas');
//使用属性存储数据
sessionStorage.book = 'Profession JavaScript';

／／无法解析sessionStorage.commit(); 在所有设置完成后调用commit()方法

getItem()或者通过直接访问属性名来获取数据。

//使用方法读取数据
var name = sessionStorage.getItem('name');
//使用属性读取数据
var book = sessionStorage.book;

删除数据可以使用delete操作符删除对象属性，也可以调用removeItem()方法

delete sessionStorage.name;

sessionStorge.removeItem('book')

length属性、key()方法迭代sessionStorage的值

for (var i = 0,len=sessionStorage.length;i<len;i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" +value)
}

清除所有数据：localStorage.clear()

localStorage规定：要访问同一个localStorage对象，页面必须来自于同一个域名，使用同一种协议，在同一个端口。

//使用方法存储数据
localStorage.setItem('name','Nichoalas');
//使用属性存储数据
localStorage.book = 'Professional JavaScript';
//使用方法读取数据
var name = localStorage.getItem('name')
//使用属性读取数据
var book = localStorage.book;

开启离线缓存：<html manifest="demo.appcache">

File API

获取文件：var selfile = document.getElementById('input').files[0];

属性：selfiles.length 选了几个文件

　　　　单独文件：

再选择一个或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件，每个File对象都有下列只读属性:

name:本地文件系统的文件名

size:文件的字节大小

type:字符串，文件的MIME类型。

lastModifiedDate:字符串，文件上一次被修改的事件（chrome）

拖拽拖放drag drop

dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素。
drag:拖拽元素时触发，这个事件对象是被拖拽元素。
dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素。
dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素。
dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素。
drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素。
dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素。

<div id='div1' ondrop='drop(event)'  ondragover='allowDrop(event)'>
</div>
<img id='drag1' src=''  draggable='true' ondragstart='drag(event)' />


<script>
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData('Text',ev.target.id);}
function drop(ev){ev.preventDefault();                                 //通过利用dataTransfer对象传递
                 var data=ev.dataTransfer.getData('Text');
                 ev.target.appendChild(document.getElementById(data));}
</script>

读取文件FileReader:

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件，可以使用Blob或File对象来指定所要处理的文件或数据

var reader = new FileReader();

var reader = new FileReader();

reader.onload = function(ofile){
  document.getElementById('preview').src = ofile.target.result;      
};

function loadImageFile(){
    var oFile = document.getElementById('uploadImage').files[0];
    reader.readAsDataURL(oFile);
}

方法：　abort(); 终止读取文件

　　　　readAsArrayBuffer();

　　　　readAsBinaryString();

　　　　readAsDataURL();

　　　　readAsText();

状态常量： EMPTY 0; LOADING 1; DONE 2;

属性：error ; readyState ; result ;

Canvas：

是一个可以使用js在一个会版上（html元素）绘制图形。

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>   //canvas中间的内容为替换内容
</canvas>

方法：getContext('2D');获得上下文和他的绘画功能

var canvas = document.getElementById('canvas');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(200,0,0);
    ctx.fillRect(10,10,55,50);
    //绘制矩形
    ctx.fillStyle = 'rgb(0,0,200,0.3);
    ctx.fillRect(30,30,55,50);
  
    //绘制路径
　　ctx.beginPath();
　　ctx.moveTo(75,50);
　　ctx.lineTo(100,75);
　　ctx.lineTo(100,25);
　　ctx.fill();

　　绘制文字
　　ctx.font = '46px serif';
　　ctx.fillText('Hello world',10,50);

　　var img = new Image();
　　img.src = 'myImage.png';    设置图片源地址

canvas提供三种方法绘制矩形：

ctx.fillRect(x,y,width,height): 绘制一个填充的矩形

　　.strokeRect(x,y,width,height): 绘制一个矩形的边框

　　.clearRect(x,y,width,height): 清除指定矩形区域，让清楚部分完全透明

　　绘制路径

　　.beginPath()

　　.closePath()

　　.stroke()通过线条绘制图形轮廓；

　　.fill()通过填充路径的内容区域生成实心的剧图形

　　绘制圆弧

　　.arc(x,y,radius,startAngle,endAngle,anticlockwise)画一个以x,y为圆心，radius为半径，从startAngle开始，endAngle结束，顺时针false

　　.arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，再以直线链接两个控制点

　　绘制文本

　　.fillText(text,x,y [,maxWidth])

.strokeText(text,x,y [,maxWidth])

　　绘制图片

drawImage(image, x, y)其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标

.moveTo(x,y)移动笔触

　　.lineTo(x,y)绘制直线

　　.fillStyle = color

　　.strokeStyle = color

worker接口会生成真正的操作系统级别的线程；可以向由他的创建者指定的时间监听函数传递消息，这样worker生成的所有的任务都会接受到这些消息。js属于单线程环境，无法同时运行多个脚本，web Worker可以一次生成多个线程用于长时间运行任务

var myWorker = new Worker('my_task.js');

myWorker.postMessage('ali'); html页面向worker发送消息

myWorker.onmessage = function(oEvent){oEvent.data}; html监听worker发来的数据

myWorker.terminate(); self.close(); work线程立即被杀死，不会留下任何机会让它完成自己的操作或清理工作。

//echo.js
onmessage = function(e){
    
        postMessage('echo:' + e.data);      //向页面发送消息
}


//html页面
<script>
    if (typeof (Worker) != 'undefined') {
          var  worker = new Worker('echo.js');
          worker.postMessage('text.value);
         worker.onmessage = function(e){e.data};
    }
</script>

webSocket

引入webSocket协议，因为http协议是单线程的，只允许Browser向webServer发送请求资源后才能返回相应的数据。。但要想开发一个基于web的应用程序去获取服务器的实时数据，例如股票的行情，需要客户端与服务器端反复通信，不断发送请求，浪费带宽和CPU利用率。而websocket是在Browser的新网络协议，能支持客户端的服务器端的双向通信。

webSocket协议是一种双向通信协议，建立在TCP之上，同http一样通过TCP来传输数据，但不同点是1 WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；2 webSocket需要通过握手连接，类似于TCP也需要客户端与服务器端进行三次握手连接，成功后才能进行相互通信。（在建立握手的过程，数据是通过http协议传输的）

webSocket API

　　var ws = new webSocket('ws://echo.websocket.org'); //实例化一个webSocket对象，连接到ws协议的服务器地址

　　ws.onopen = function(){ws.send('test');}; //建立连接成功后，触发onopen，发送消息，

　　ws.onmessage = function(evt){console.log(evt.data);　　ws.close();}; //客户端接收到服务器传来的数据data，然后请求关闭连接，触发onclose事件

　　ws.onclose = function(evt){console.log('webSocketClosed');};

　　ws.onerror = function(evt){console.log('webSocketError!);};

Geolocation API

地理定位通过 navigator.geolocation提供

方法1:获取当前位置 getCurrentPosition(); 接受三个参数，成功回调函数；可选失败回调函数；可选选项对象。

成功回调函数，接受position对象参数，有coords和timestamp属性；coords对象又饱含的属性：

latitude:以十进制度数表示的纬度。
longitude:以十进制度数表示的经度。
accuracy:经、纬度坐标的精度，以米为单位。有些浏览器还可能会在coords对象中提供如下属性。
altitude:以米为单位的海拔高度，如果没有相关数据则值为null。
altitudeAccuracy:海拔高度的精度，以米为单位，数值越大越不精确。
heading：指南针的方向，0°表示正北，值为NaN表示没有检测到数据。
speed：速度，每秒移动多少米，如果没有相关数据则为null。

navigator.geolocation.getCurrentPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function(error) {
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
}, {
    enableHighAccuracy: true,          //尽可能准确的位置信息
    timeout: 5000,                          //等待信息的最长时间
    maximumAge: 25000                 //有效时间
});

方法2 跟踪用户的位置 watchPosition(),用法同上

var watchId = navigator.geolocation.watchPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function(error) {
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
});
clearWatch(watchId);      //取消监控操作

DOM节点操作QuerySelector

persent message

window.performance.timing 时间戳

可以跨域的请求AJAX

以前var xhr = XMLHttpRequest();

　　　　xhr.onreadystatechange = function(){}

　　　　xhr.open(url,'GET',false); //同域

　　　　xhr.send()

跨域：设置服务器的相应头：header('Access-Control-Allow-Origin:*或www.baidu.com,www.qq.com') //*允许所有雨都可以向此域发起请求

触摸事件：start mousedown mouseup mousemove click end

viewport固定整个页面宽度：<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no'/>

移动端性能陷阱：

1 减少或避免 repaint页面重绘,reflow页面回流

2 缓存可缓存的数据 HTML5之前：用http的response Headers做缓存；之后 localStorage.getItem()

3 使用CSS3 transform代替DOM操作

4 不要给非static定位元素增加CSS3动画 (如absolute relative元素)

5 适当使用硬件加速如1 经canvas绘制 2给position:relative的元素，开启transform:translate3d(0,0,0);硬件加速，调动GPU作处理

移动端开发原则：轻量级、维护简单、快速开发、高性能。

Application Cache :

Manifest：<html manifest = "xxx.manifest">

特点：Manifest 文件有变化才更新

一次必须更新Manifest 中的所有文件下次才生效

缺点：延迟更新失败

<audio src="audio.mp3" preload="auto" controls autoplay loop></audio>  //autoplay是音频自动播放，loop使音频自动重复播放，controls显示自动播放器

2.接口中定义播放：var v = document.getElementsByTagName('audio')[0];
　　　　　　　　　v.play();播放
　　　　　　　　　v.pause();暂停
　　　　　　　　　v.volume+=0.1;加音量
　　　　　　　　　v.volume-=0.1;减音量

特殊元素：

移动端：1，使用css3动画，使用gpu渲染，效率高 ;

　　　　2‘使用Canvas代替Image标签，触发gpu渲染；drawImage API:drawImage(image,x,y);drawImage(img,x,y,width,height);

　　　　3、加载Image使用Image()对象方法，var img = new Image(); img.onload = function(){}; img.src = "http....";可以动态获取其height等，以适用不同屏幕自适应。代替<image>标签。

框架：zepto.js 轻量级框架，类似jquery

touch事件：引入touch module

touchsatrt 、 touchmove 、 touchend 、 touchcancel、

touch in zepto.js:tap\singleTap\doubleTap\longTap\swipe\swipeLeft\swipeRight\swipeUp\swipeDown;

CSS3动画：框架：－－Animation.css

@keyframes XXX{0%:{}25%:{}...}

animation-name动画名称: XXX;

animation-duration持续时间:5s;

animation-delay执行延迟时间:2s;

animation-timing-function动画形变函数指定:linear;

animation-play-state播放状态指定:running;

animation-direcction:alternate;

动画事件：当动画之行结束时触发事件：webkitAnimationEnd()

window.history.back();

window.history.forward();

window.history.go(-1);

window.history.go(1);

window.history.length;

history.pushState(data,'',url)

history.onpopstate = function(){}

posted @ 2016-11-03 17:30 筱qian 阅读(191) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

筱qian

HTML5 新特性

公告