前言

HTML5 知识点一文汇总。

新增的属性

input 属性

placeholder
新的type类型

calendar类

date：Chrome支持，Safari、IE不支持
time
week
datetime-local
month

其他类

number
color
email
range：显示为滑动条
search
tel
url

contentEditable

是否可编辑，true、false。

属性可继承。

它被广泛的应用，比如很多网页编辑器，内容切换编辑状态等等，都可以通过这个属性来实现。

draggable

可拖拽。

所有的标签元素，当拖拽周期结束时，默认事件是回到原处。

默认可拖拽的标签：a 标签、img 标签，默认: draggable：true;

拖拽的组成

被拖拽的物体
目标区域（目标元素）

被拖拽物体的生命周期

被拖拽物体的 拖拽事件：

拖拽开始：ondragstart
拖拽进行中：ondrag
拖拽结束：ondragend

<script>
var oDrag = document.getElementById('drag');
// 开始事件
oDrag.ondragstart = function (e) {
    console.log('start!', e);
}
// 移动事件
oDrag.ondrag = function (e) {
    console.log('dragging!', e);
}
// 结束事件
oDrag.ondragend = function (e) {
    console.log('end!', e);
}
</script>

目标区域的生命周期

目标区域的拖拽事件

鼠标进入触发：ondragenter
鼠标在目标区域上移动触发：ondragover
鼠标离开触发：ondragleave
被拖拽物体在目标区域放下触发：ondrop

注意

需在 ondragover 阶段阻止默认行为（ondragleave），不让被拖拽物体回到原处。

oTarget.ondragover = function (e) { 
    console.log('over!', e); 
    e.preventDefault() 
} 

oTarget.ondrop = function (e) { console.log('drop', e); }

DdataTransfer

拖放行为。

DataTransfer - Web API 接口参考 | MDN (mozilla.org)

一个例子，带你了解神秘的 DataTransfer - 掘金 (juejin.cn)

hidden

规定元素仍未或不再相关。

data-val

用于存储页面或应用程序的私有定制数据。

自定义属性

新增的标签

语义化标签

HTML5 新元素 | 菜鸟教程 (runoob.com)

canvas

画板。

HTML DOM Canvas 对象 | 菜鸟教程 (runoob.com)

svg

SVG 教程 | 菜鸟教程 (runoob.com)

Audio、Video

HTML 音频/视频 | 菜鸟教程 (runoob.com)

使用

<audio controls="controls"> 
    <source src="./media/luffy.ogg"></source> 
    <source src="./media/luffy.mp3"></source> 
    本网页不支持媒体标签 
</audio>

媒体标签内部，还可以通过<source>标签来进行多种类型的兼容，比如低版本 IE 不支持 mp3 文件，那么我们就可以通过上面的代码来进行低版本浏览器的兼容，点击播放按钮，浏览器就会从上至下解析，直到解析成功，如果不成功，则显示不支持媒体标签，如下图所示：

播放、暂停

oV.play();

oV.pause();

oV.paused 播放状态。

时间进度

oV.duration 总时间；

oV.currentTime 当前时间；

video.duration值为NAN 问题？

直接在定时函数中获取：

setInterval(function(){ 
    console.info(video.duration); 
},1000);

直接监听canplay事件获取：

canplay：当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。

video.oncanplay=function(){
    console.info(video.duration);
}

onloadedmetadata ：事件在指定视频/音频（audio/video）的元数据加载后触发。

视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。

video.onloadedmetadata=function(){
console.info(video.duration);
}

进度条

只有 http 协议中有 Content-Range 这个属性，视频才能点击跳转。

API

geoLocation 位置信息

获取地理信息

一些系统不支持这个功能。

定位GPS，台式机几乎都没有GPS，笔记本绝大多数都没有GPS，智能手机几乎都有GPS。

可以通过网络来粗略的估计地理位置。

window.navigator.geolocation.getCurrentPosition( 
(pos) => { 
    console.log('获取地理信息成功') 
    console.log(pos); 
}, 
() => { console.log('获取地理信息失败') })

注意：

获取的周期比较长。

https、file 协议可以获取。

http 协议是不能获取地理信息位置的。

网页本身没有获取的能力，需借助浏览器。

如果使用谷歌浏览器：谷歌浏览器获取地理位置，使用的是谷歌地图。

使用https 获取

需要在https 的域下。

翻墙后获取。

位置信息

longitude: 能够大于90度的就是经度。最大值180.

latitude: 纬度最大值是90.

accuaracy: 精度。准确度。

deviceorientation 体感

只有带有陀螺仪的设备才支持体感。

苹果设备的页面只有在 https 协议下才能使用这些接口。

alpha：指北（指南针），当为0的时候值北，180 指南。

beta：平方的时候为0。手机立起来（短边接触桌面），直立的时候 beta为90。

gamma：平放的时候。手机立起来（长边接触桌面），直立的时候 gamma为90。

        window.addEventListener('deviceorientation', (e) => {
            console.log(e);
        })

devicemotion 手机摇摆

window.addEventListener('devicemotion', (e) => {
    console.log(e);
})

requestAnimationFrame 动画优化

屏幕刷新频率:

屏幕刷新的频率：每秒60次。

如果变化，一秒超过60次，必然会有一些动画帧被丢掉。

requestAnimationFrame()：

requestAnimationFrame() 动画优化。

兼容性极差，几乎用不到。

调用一次

相当于setTimeout，只移动了一次。

function move() {
    const oMain = document.getElementById('main')
    if(main.offsetLeft > 700) return 
    main.style.left = main.offsetLeft + 20 + 'px'
}
requestAnimationFrame(move);

持续调用

移动是均匀的。requestAnimationFrame 是每秒60帧。

function move() {
    const oMain = document.getElementById('main')
    if(main.offsetLeft > 700) return 
    main.style.left = main.offsetLeft + 20 + 'px'
    requestAnimationFrame(move);
}
move()

模拟。

function move() {
    const oMain = document.getElementById('main')
    if(main.offsetLeft > 700) return 
    main.style.left = main.offsetLeft + 20 + 'px'
}
setInterval(move, 1000 / 60)

cancelAnimationFrame 清除移动

var timer = null 
function move() {
    const oMain = document.getElementById('main')
    if(main.offsetLeft > 700) {
        cancelAnimationFrame(timer);
        returm 
    } 
    main.style.left = main.offsetLeft + 20 + 'px'
    timer = requestAnimationFrame(move);
}
move()

history

popstate 和 hashchange 事件：

先触发popstate。

回退事件 popstate

只要url变了就会触发。

hashchange 事件

hash值变了触发，锚点变了触发。

localStorage、sessionStorage

localStorage 和 cookie:

每次请求的时候都有可能传送很多无用的信息到后端。

存储的内容较小，约4K。 s

localStorage

只能存储字符串。

发送请求的时候不会把数据发出去。

存放较多的内容。5M左右。

长期存放在浏览器的，写入local Storage（无论窗口是否关闭都会存储）

localStorage.name='DD';
localStorage.setItem('name', 'DD');
localStorage.getItem('name');    // 获取
localStorage.removeItem('name'); // 删除

sessionStorage

会话临时需要存储的变量。

每次窗口关闭的时候，sessionStorage 都会自动清空。

sessionStorage.name='DD';

WebWorer

worker 是多线程的，是真的多线程，不是伪多线程。

worker 不能操作dom,没有window对象，不能读取本地文件。可以发ajax，可以计算。

在worker中能否继续创建worker？

在理论上是可以的。但是实际上没有任何一款浏览器支持。

计算案例：

直接计算

console.log('====================='); console.log('====================='); 
let result = 0; 
let count=1000000; 
for ( let i = 0; i < count; i++) result +=i; 
console.log(result); 
console.log('====================='); console.log('=====================');

使用worker

主线程和辅线程之间用 postMessage() 发送消息。

用onMessage() 接受消息。

主线程

console.log('====================='); console.log('====================='); 
let count=1000000; 
let worker=new Worker('./work.js') 
worker.postMessage({ num: count, }) 

worker.onmessage= function(e) { console.log(e.data); } console.log('====================='); console.log('=====================');

辅线程 work.js

this.onmessage = function (e) { 
    let result=0; 
    for ( let i = 0; i < e.data.num; i++)result+=i; 
    this.postMessage(result); 
}

停止工作

主线程中：worker.terminate()

辅线程中：this.close()（自己停止）

Fetch

传说中要替代Ajax 的东西。

WebSocket

通信。在线聊天，聊天室。

FileReader

文件读取、预览。

好文推荐

BAT大佬推荐使用的HTML5的十个功能 - 掘金 (juejin.cn)

10个好用的 HTML5 特性 - 掘金 (juejin.cn)

【HTML5】HTML5 参考手册

前言