标签的变化

新标签

<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

<article>	定义页面的侧边栏内容
<aside>	定义页面内容之外的内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义运行中的进度（进程）。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

删除的标签

<big>

<dir>

<font>

<frame>

本地存储

LocaleStorage

很有用也非常简单使用的在浏览器里赛东西的方法。想起以前碰到过的cookie不够用了的情况，现在真幸福啊！

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

SessionStorage

和LocalStoarage查不多了，只是浏览器关了就没有了，存储jwt的token最好了。

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
var webworker=newWorker('myWebWorkerFile.js');
</script>

WebWorker

webworker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

返回的webworker对象，该对象可以完成与worker线程(myWorkerFile.js)的通信:

通过webworker.postMessage()向线程发送消息
通过 webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息
通过 webworker.οnerrοr=function(evt){}来监听线程中的错误消息
通过webworker.terminate()来告诉 worker线程立即终止执行

<script type="text/javascript">
//主线程
var worker =newWorker("myWorkerFile.js");
worker.onmessage =function(event){switch(event.data.type){case"debug":console.log(event.data.message);break;//other types of data}
};worker.postMessage({type:"start",value: 12345
});//myWorkerFile.js
self.onmessage =function(event){if(event.data.type =="start"){process(event.data.value);}
};function process(number){self.postMessage({type:"debug",message:"Starting processing..."});//codeself.postMessage({type:"debug",message:"Processing finished"});
}
</script>

WebSocket

WebSocket是html5规范新引入的技术，允许后台随时向前端发送文本或者二进制消息，WebSocket是一种全新的协议，不属于http无状态协议，协议名为”ws”，这意味着一个websocket连接地址会是这样的写法：ws://twaver.com:8080 /webSocketServer。

典型的应用场景包括：页游，聊天，图文在线直播等。

一个例子：webSocket实现web及时聊天的例子

转载于:https://my.oschina.net/johnsonchen/blog/510862

回炉夜话 - HTML5相关推荐

html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
HTML5调用手机的Datepicker(日期选择器)
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
[重磅] 让HTML5达到原生的体验系列之中的一个避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
html5 FileReader初识
使用html5的FileReader可以实现多媒体文件的预览功能,代码如下: <html> <head> <script type="text/javascri ...

回炉夜话 - HTML5