html5学习笔记
html5介绍
html5中的一些有趣的新特性：1. 用于绘画的canvas元素 2.用于媒介回放的video和audio元素 3.对本地离线存贮的更好的支持 4.新的特殊内容元素，article、footer、header、nav、section 5.新的表单控件，calendar、date、time、email、url、search
html5声明：<!DOCTYPE html>
canvas
介绍
canvas只是图形容器，用于图形的绘制，通过脚本（通常是JavaScript）来完成。可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像。
html代码：<canvas id="myCanvas" width="200" height="100">
js代码：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
//首先找到canvas元素
//然后创建context对象
//getContext("2d")对象是内建的html5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//fillStyle属性可以是css颜色，渐变，或图案，默认是#000000（黑色）
//fillRect(x,y,width,height)方法定义了矩形当前的填充方式canvas是个二维网格，左上角坐标为（0,0）
路径
//在canvas上画线，使用两种方法：moveTo(x,y)定义线条开始坐标；lineTo(x,y)定义线条结束坐标；绘制线条必须使用“ink”方法，就像stroke()
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
//在canvas中绘制圆形，使用arc(x,y,r,start,stop),在绘制圆形时使用“ink”的方法，比如stroke()或者fill()。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();文本
//使用canvas绘制文本，重要的属性和方法：font定义字体；fillText(text,x,y)在canvas上绘制实心的文本；stroke(text,x,y)在canvas上绘制空心的文本。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("hello world", 10, 50);
//空心字体
ctx.strokeText("hello world", 10, 50);渐变
//线性渐变：createLinearGradient(x,y,x1,y1);
//径向渐变：createRadialGradient(x,y,r,x1,y1,r1);
//当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//创建渐变
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);图像
//drawImage(image,x,y);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = documnet.getElementById("scream");
ctx.drawImage(img,10,10);SVG
SVG是可伸缩矢量图形，使用XML格式定义图形
SVG与canvas两者间的区别：SVG是一种使用XML描述2D图形的语言。canvas通过JavaScript来绘制2D图形。SVG基于XML，所以可以为某个元素添加JavaScript事件处理器。
拖放
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
//html代码
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
//首先设置元素为可拖放，把draggable属性设置为true
//规定当元素被拖动时会发生什么，ondragstart属性调用一个函数，drag（event），他规定了被拖放的数据。dataTransfer.setData()方法设置被拖数据的数据类型和值。Text是一个DOMString表示要添加到drag object的拖放数据的类型。
//ondragover事件规定在何处放置被拖动的数据。默认的无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式event.preventDefault();
//当放置被拖数据时，会发生drop事件video
//video元素支持三种视频格式：MP4，WebM和Ogg
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。
</video>audio
//audio元素支持三种音频格式文件：MP3，Wav和Ogg
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。
</audio>语义元素
无语义元素：div，span
语义元素：form，table，img清楚地定义了他的内容
web存储
web存储，一个比cookie更好的本地存储方式。web存储更加的安全和快速，这些数据不会被保存在服务器上。
客户端存储数据的两个对象为：localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除；sessionStorage：用户临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
//不管是localStorage，还是sessionStorage，可使用的API都相同，以localStorage为例
localStorage.setItem(key, value);//保存数据
localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear()//删除所有数据
localStorage.key(index);//得到某个索引的key
//可以用JSON.stringify()来存储对象数据，将对象转换为字符串,JSON.parse()将字符串转换为JSON对象webSocket
webSocket是html5开始提供的一种在单个TCP连接上进行全双工通讯的协议。webSocket允许服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
webSocket对象的属性，readyState：0表示连接尚未建立，1表示连接已建立，可以进行通信，2表示连接正处在关闭，3表示连接已经关闭或者连接不能打开。
var Socket = new WebSocket(url, [protocol]);//创建webSocket对象，url指定连接的url，第二个参数是可选的，指定了可接受的子协议
//webSocket事件
Socket.onopen //连接建立时触发
Socket.onmessage //客户端接收服务端数据时触发
Socket.onerror //通信发生错误时触发
Socket.onclose //连接关闭时触发
//webSocket方法
Socket.send() //使用连接发送数据
Socket.close() //关闭连接webSocket协议本质上是一个基于TCP的协议。为了建立一个webSocket连接，客户端浏览器首先要向服务端发送一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，服务端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务端的webSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会存在知道客户端或者服务端的某一方主动的关闭连接。