学习笔记（2）HTML5新特性
目录
- 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，语义化标签
| 标签 | 说明 |
|---|---|
| 定义页面头部内容 | |
| 定义页面尾部内容 | |
| 设置页面导航菜单 | |
| 定义对话框 |
2，增加表单input输入类型
| 输入类型 | 描述 |
|---|---|
| color | 选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| time | 选择一个时间 |
3，视频和音频
<audio controls>
<source src="home.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签。
audio>
<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 +
"
经度（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>
<div
id="rectangle"
ondrop="handleDrop(event)"
ondragover="allowDrop(event)"
>
div>
<hr>
<img
src="./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 Workertitle>
head>
<body>
<h1>welcome to web Workerh1>
<p>Count numbers: <output id="result">output>p>
<button onclick="startWorker()">开始 Workerbutton>
<button onclick="stopWorker()">停止 Workerbutton>
<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 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
链接: 点击进入.