1，语义化标签
2，增加表单input输入类型
3，视频和音频
4，Canvas绘图
5，SVG
6，Geolocation Api
7，拖放API
- 7.1，一个例子
8，Web Worker
- 8.1，基础
- 8.2，限制
- 8.3，一个例子
9，Web Storage
- 9.1，介绍
- 9.2，使用
- 9.3，cookie，session，localStorage，sessionStorage的区别？
10，WebSocket
- 10.1，简介

1，语义化标签

标签	说明
<header></header>	定义页面头部内容
<footer></footer>	定义页面尾部内容
<nav></nav>	设置页面导航菜单
<dialog></dialog>	定义对话框

2，增加表单input输入类型

输入类型	描述
color	选取颜色
date	从一个日期选择器选择一个日期
email	包含 e-mail 地址的输入域
month	选择一个月份
time	选择一个时间

3，视频和音频

<audio>标签定义声音，比如音乐或其他音频流。
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

<!--     control 属性供添加播放、暂停和音量控件。   --><audio controls><source src="home.ogg" type="audio/ogg">您的浏览器不支持 audio 标签。</audio>

<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。


<video width="520" height="300" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
</video>

4，Canvas绘图

canvas标签本身并不绘制图形，它只是图形容器，使用JavaScript脚本来绘制图形。

在HTML中，使用canvas标签创建一个画布，

width：设置画布宽度，
height：设置画布高度，
border：设置画布边框（默认无边框）

<div><canvas id="myCanvas" width="300" height="200" style="border:1px solid black;"></canvas>
</div>

在js中，执行逻辑

drawCircle(){console.log('开始执行画圆')//拿到canvas元素let c =document.getElementById("myCanvas");//定义ctx对象，并执行对应的逻辑let ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();
},

5，SVG

SVG是指可伸缩的矢量图形，使用 XML 格式定义图像。

6，Geolocation Api

HTML5中，Geolocation（地理定位）用于定位用户的位置。

     <h1>welcome to 地理定位</h1><div ><button @click="getLocation">定位</button><div id="demo"></div></div>

在js中调用Geolocation 接口，有2个参数，1是成功的回调函数，2是失败的回调函数。

         getLocation() {console.log('开始定位!!!')let x = document.getElementById("demo");if (navigator.geolocation) {/* this.viewSuccess，成功的回调函数* this.viewError，失败的回调函数  * */navigator.geolocation.getCurrentPosition(this.viewSuccess, this.viewError);} else {x.innerHTML = "Geolocation is not supported by this browser.";}},

成功的回调函数。返回数据有经度、纬度、响应的时间日期等信息。

返回数据	描述
coords.latitude	纬度
coords.longitude	经度
timestamp	响应的日期

viewSuccess(position) {console.log("定位成功");console.log(position)let x = document.getElementById("demo");x.innerHTML = "纬度（Latitude）: " + position.coords.latitude +"<br />经度（Longitude）: " + position.coords.longitude;
},

失败的回调函数，返回数据有编号、原因。

     viewError(error) {console.log("定位失败");console.log(error);let x = document.getElementById("demo");switch (error.code) {case error.PERMISSION_DENIED:x.innerHTML = "用户禁止地理定位。"break;case error.POSITION_UNAVAILABLE:x.innerHTML = "无法获取当前位置。"break;case error.TIMEOUT:x.innerHTML = "请求超时。"break;case error.UNKNOWN_ERROR:x.innerHTML = "未知错误。"break;}},

7，拖放API

拖放：抓取某物并拖入不同的位置。

1，设置元素可拖放，draggable设置为true，
2，设置ondragstart事件，规定元素被拖动时发生的事情，
3，设置 ondragover 事件，规定被拖动的数据被放置到何处，
4，当放开被拖数据时，会发生 ondrop 事件。

7.1，一个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拖拽</title><style >#rectangle{width: 200px;height: 100px;border: 2px solid black;margin-bottom: 20px;}#vue_logo{width: 100px;height: 60px;border: 3px solid red;}</style>
</head>
<body><h1>welcome to 拖放</h1><p>请把vue图形logo拖放到矩形中</p><divid="rectangle"ondrop="handleDrop(event)"ondragover="allowDrop(event)"></div><hr><!--01，设置元素可拖放--><imgsrc="./HTML_logo.jpg"alt=""draggable="true"id="vue_logo"ondragstart="handleDragStart(event)">
</body>
<script type="text/javascript">/*** 03， 设置 ondragover  事件，规定被拖动的数据被放置到何处* */function allowDrop(ev) {/*** 元素默认无法被放置到其他元素中。为了实现拖放，需要阻止元素的默认的处理方式，* 使用 preventDefault()方法完成：*/ev.preventDefault();}/*** 02，ondragstart事件，规定元素被拖动时发生的事情* */function handleDragStart(ev) {/*** dataTransfer.setData()：设置被拖动数据的数据类型和值：* */ev.dataTransfer.setData("Text",ev.target.id);}/***   4，当放开被拖数据时，会发生 ondrop 事件。* */function handleDrop(ev){ev.preventDefault();/*** 获得被拖放的数据,拿到被拖元素的id，* */var data=ev.dataTransfer.getData("Text");/**** 将被拖元素添加到目标元素中* */ev.target.appendChild(document.getElementById(data));}
</script>
</html>

8，Web Worker

8.1，基础

JavaScript ，是单线程；同一个时间只能做一件事。
Web Worker允许 JavaScript 脚本创建多个线程。但是子线程完全受主线程控制。

8.2，限制

Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document；

8.3，一个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>web Worker</title>
</head>
<body><h1>welcome to  web Worker</h1><p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">开始 Worker</button><button onclick="stopWorker()">停止 Worker</button><br><br></body>
<script>var w;function startWorker() {/**** 1，检测浏览器是否支持webWorker* */if(typeof(Worker) !== "undefined") {/*** 3，检测是否存在 worker，如果不存在，创建一个新的 web worker 对象，然后运行 Web Worker文件中的代码：* */if(typeof(w) == "undefined") {w = new Worker("demo_workers.js");}/*** 3.2，向 web worker 添加一个 "onmessage" 事件监听器，将Web Worker文件中的数据，传送到当前页面中，* */w.onmessage = function(event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";}}function stopWorker() {/*** 4，终止 Web Worker* */w.terminate();/*** 复用web worker* */w = undefined;}
</script>
</html>

Web Worker文件

/**
* 2，创建 Web Worker 文件
* */
var i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);
}timedCount();

9，Web Storage

9.1，介绍

Web Storage，一种比 cookie 更好的本地存储方式。

9.2，使用

Web Storage存储数据的两个对象为：
localStorage ：窗口或浏览器关闭也一直保存，用于长久数据的保存，没有过期时间，直到手动去除。
sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage对象（sessionStorage对象）常用的api。

// 存
localStorage.setItem("className", "red");
sessionStorage.setItem("className", "red");//取
localStorage.getItem("className");
sessionStorage.getItem("className");//删（1个）
localStorage.removeItem("className");//删（所有）
localStorage.clear();//得到某个索引的key
localStorage.key(index);

9.3，cookie，session，localStorage，sessionStorage的区别？

（1）cookie数据存放在客户的浏览器上，session数据放在服务器上，session中保存的是对象，cookie中保存的是字符串。
（2）存储大小限制不同，cookie数据不能超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作保存长久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

10，WebSocket

10.1，简介

注意：以下内容转载于菜鸟教程\color{#FF3030}{注意：以下内容转载于菜鸟教程}注意：以下内容转载于菜鸟教程

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

链接: 点击进入.

学习笔记（2）HTML5新特性相关推荐

dma接收双缓存 stm32_「STM32学习笔记」USART 新特性
之前的学习笔记"SPI不够用?USART来帮忙"一文中介绍了用如何把USART当做SPI来用的方法.此外,ST的USART还有很多新特性,没准有你不知道的. 在此,我们整理出来以下 ...
前端学习笔记之CSS3新特性3D转换 3.23
1 3D转换概念我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子. 特点: 1.近大远小. 2.物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果. 三维坐 ...
【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
Web全栈~03.HTML5新特性
Web基本笔记~03.HTML5新特性上一期 HTML5 新增 type 类型 email 定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证) E-mail: ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持创建一个画布(Canvas) 使用 JavaScript 来绘制图像画线.画圆.写字.渐变效果 ...

学习笔记（2）HTML5新特性

目录