提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
HTML5是应用超文本标记语言(HTML)的第五次修改，html语言第5版本。HTML5是为了适应移动互联网时代产生的
HTML5语法主要是DOCTYPE（DOCTYPE声明方法：<!DOCTYPE html>）和指定字符编码(对mate元素追加charset属性指定编码：<mate charset="UTF-8">) 和 html4有所区别.
一、语义化标签
标签的语义化，就是根据内容结构，选择合适的标签编写相应的代码内容。正确的标签做正确的事。语义化标签的好处：1.方便开发人员的代码阅读和后期维护。2.提高用户体验（img 的 alt，title）。3.有利于seo搜索引擎优化。4.便于网络爬虫解析文档 。
<header><header/> 定义文档的头部
<nav><nav/> 定义导航链接
<section><section/> 定义文档中的节，段落，
<article><article/> 定义页面独立内容区域
<aside><aside/> 定义页面的侧边栏内容
<detailes><detailes/> 定义文档某部分细节
<summary><summary/> 标签包含了details元素的标题
<dialog><dialog/> 定义对话框，提示框
二、新增Input表单的类型、和属性
1.类型
tel、number、date、time、week、month、url、email、color、rang
<!-- 输入格式也限制为不同模式 -->
<!-- 输入必须为邮箱类型 -->
<li>email邮箱：<input type="email"></li>
<!-- 输入必须为网址类型 -->
<li>url网络地址：<input type="url"></li>
<!-- 输入必须为日期类型 -->
<li>date日期：<input type="date"></li>
<!-- 输入必须为时间类型 -->
<li>time时间：<input type="time"></li>
<!-- 输入必须为数值类型 -->
<li>number数量：<input type="number" min="5" max="20"></li>
<!-- 输入必须为数值类型 -->
<li>tel电话号码：<input type="tel"></li>
<li>color颜色：<input type="color"></li>
<li>周/年：<input type="week"></li>
<li>月/年：<input type="month"></li>
<li>范围：<input type="range"></li>2.属性
required: ture 必填属性
placeholder:'提示文本'
autofocus 自动聚焦
pattern 正则验证内容
multiple 可选多个值（）上传文件
width，height 宽度高度 type=image
autocomplete on/off 是否展示历史输入
min/max 设置元素最大值最小值
<!-- 新增表单属性
required 表单必填属性，
placeholder 提示文本
autofocus页面加载完成自动聚焦输入框
autocomplete 当用户输入信息时显示历史输入信息on/off
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值
multiple 规定<input> 元素中可选择多个值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
-->
<li>search搜索框：<input type="search" required="required" placeholder="请输入文字" autofocus='autofocus' autocomplete="on"></li>
<li><input type="submit" value="提交"></li>
<!-- multiple 提交多文件 -->
<li><input type="file" value="提交" multiple="multiple"></li>三、audio、video音频和视频
HTML5 提供了播放音频、视频文件的标准，即使用 <audio>、<video> 元素，元素内允许使用多个 <source> 元素. <source> 元素可以链接不同类型的文件，浏览器将使用第一个支持的文件。
属性：
autoplay=true 自动播放
autoplay 自动播放
controls 播放控件
mute 静音播放
loop 循环播放
poster 预加载图片
<!--
src 文件路径/url
autoplay 是否自动播放，
controls 播放控件，
mute 静音播放，
宽度、高度，
loop 是否循环播放，
poster 预加载图片...... -->
<video src="关羽.mp4" autoplay = "autoplay" controls = "controls" muted = "muted" width = "700px" height="350px" poster="3.jpg"></video>
<video>
<source src="关羽.mp4" type="audio/mp4">
<source src="关羽.ogg" type="audio/ogg">
<source src="关羽.webm" type="audio/webm">
</video>
<h1>多媒体音频标签audio、</h1><br>
<!--
src 文件路径/url
autoplay 是否自动播放，
controls 播放控件，
mute 静音播放，
宽度、高度，
loop 是否循环播放， -->
<audio src="关羽.mp3" autoplay = "autoplay" controls = "controls" muted = "muted" width = "700px" height="350px" poster="3.jpg"></audio>
<audio autoplay>
<source src="关羽.mp3" type="audio/mpeg">
<source src="关羽.ogg" type="audio/ogg">
<source src="关羽.wav" type="audio/wav">
</audio>四、Canvas绘图
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 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 - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
实例
使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
使用 strokeText():
实例
使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
实例
创建一个线性渐变。使用渐变填充矩形:
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);
使用 createRadialGradient():
创建一个径向/圆渐变。使用渐变填充矩形：
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)
实例
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
五、SVG绘图
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
六、地理定位
七、拖拽API
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动图片到矩形框中:</p>
<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">
</body>
</html>首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
八、WebStorage
使用HTML5可以在本地存储用户的浏览数据。早些时候本地存储使用的是cookies。cookie只有4kb大小，它是一种纯文本文件每次发起http请求都会携带cookie，而且cookies有安全问题，如果cookie被拦截了，那就可获得session的所有信息，只有转发cookie就能达到目的。
LocalStorage和SessionStorage都是HTML5提出的存储方案。大小一般为5MB，可以存储更多信息。均受到同源策略的限制。
SessionStorage 主要用于临时保存同一窗口的数据，刷新不会删除，，但是页面关闭或者窗口关闭，SessionStorage就会被清除。
LocalStorage 主要用于长期保存数据，可以在同一浏览器不同窗口使用，永久存储，除非手动删除，不然不会清除。
HTML5还提供了相应的操作webStorage 的 API：
setItem(key,value) 保存数据
getItem(key) 读取数据
removeItem(key) 删除单个数据
clear() 清除所有数据
key(index) 获取某个索引的key
九、WebWorker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
在创建 web worker 之前，请检测用户的浏览器是否支持它。
if(typeof(Worker) !== "undefined") {
} else {
console.log("抱歉，你的浏览器不支持 Web Workers...");
}在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Worker</title>
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
