HTML5 新特性

Love The Way You Lie 2023-08-17 16:20 58阅读 0赞

新增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' οndrοp='drop(event)'  οndragοver='allowDrop(event)'>
    </div>
    <img id='drag1' src=''  draggable='true' οndragstart='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 中的所有文件 下次才生效

缺点：延迟 更新失败

![983106-20161106095920174-1610195134.jpg][]

<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;