HTML5简介
HTML5是HTML最新的修订版本，于2014年10月由万维联盟（W3C）完成标准指定。
HTML5的设计目的是为了在移动设备上支持多媒体，并且完全支持CSS3
HTML5新元素
<canvas> 新元素
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容，比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出，比如脚本的输出。 |
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构
| 标签 | 描述 |
|---|---|
| <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> | 规定在文本中的何处适合添加换行符。 |
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML5 Canvas
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
什么是canvas？
<canvas> – 元素用于图形的绘制，通过脚本（一般是JavaScript）来完成
<canvas> – 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
创建一个画布
<canvas id="myCanvas" width="200" height="100"></canvas>
<!-- 此标签需要指定 id 属性和 width 与 height 属性 -->注意：默认情况下 <canvas> 元素没有边框和内容
使用 JavaScript 来绘制图像
canvas 元素本身事没有绘图能力的，需要由Javascipt来绘图
// 绘制一个矩形
var c=document.getElementById("myCanvas"); // 找到 <canvas> 元素
var ctx=c.getContext("2d"); // 创建 context 对象
ctx.fillStyle="#FF0000"; // 设置fillStyle属性
ctx.fillRect(0,0,150,75); // fileRect方法定义了举行当前的填充方式getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
Canvas 坐标
canvas – 是一个二维网格
canvas – 的左上角坐标为(0,0)
上面的 fillRect(0,0,150,75) 意思是：在画布上(0,0)的位置为起始点，绘制 150×75 的矩形
Canvas 路径
使用Canvas画直线，需要使用两个方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
再加上一个启动绘制的方法 stroke
// 绘制直线
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); // moveTo(x,y) 定义线条开始坐标
ctx.lineTo(200,100); // lineTo(x,y) 定义线条结束坐标
ctx.stroke(); // 使用 stroke 方法来绘制线条使用Canvas画圆，需要使用一个方法：
- arc(x, y, radius, startAngle, endAngle, counterclockwise) 定义一个中心位置在(x,y)，半径为radius，弧度为startAngle，结束弧度为counterclockwise的圆（从三点钟方向开始绘制）
//绘制圆形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); // 创建一个新的线条
ctx.arc(95,50,40,0,2*Math.PI); //画一个中心位置在(95,50)，半径为40，弧度为0，结束弧度为2PI的圆
ctx.stroke();Canvas 文本
使用canvas绘制文本，需要使用的属性和方法
font 定义地体
fillText(text,x,y) – 在convas上绘制实心的文本
strokeText(text,x,y) – 在canvas上绘制空心的文本
//绘制文本
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的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
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);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);HTML5 SVG
SVG 定义为可缩放矢量图形。
HTML5 支持内联 SVG。
HTML <svg> 元素是 SVG 图形的容器。
SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SBG 是可伸缩的
- SVG 图像可在任何分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中
<!-- 嵌入一个边框为黑色，填充为红色的圆形 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>SVG 与 Canvas 两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处
| Canvas | SVG |
|---|---|
| 依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用 |
HTML5 MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>…</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>效果
HTML5 拖放（Drag 和 Drop）
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img decoding="async" 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 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。
放到何处 – ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法
event.preventDefault()进行放置 – ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id (“drag1”)
- 把被拖元素追加到放置元素（目标元素）中
HTML5 Geolocation（地理定位）
HTML5 Geolocation（地理定位）用于定位用户的位置
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的
HTML5 – 使用地理定位
使用 getCurrentPosition() 方法来获得用户的位置
getCurrentPosition() 方法 – 返回数据
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
HTML5 Video（视频）
HTML5 提供了播放视频文件的标准
<video> 标签的使用
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>注：<video> 元素中可以使用多个<source>元素，浏览器将会使用第一个被检索到的<source>
HTML5 <video> – 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
HTML5 Video 标签
HTML5 Audio（音频）
HTML5 提供了播放音频文件的标准
<audio> 标签的使用
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>注：<audio> 元素中可以使用多个<source>元素，浏览器将会使用第一个被检索到的<source>
HTML5 Audio 标签
HTML5 Input 类型
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 类型：color
color 类型用在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">Input 类型：date
date 类型允许你从一个日期选择器选择一个日期
生日: <input type="date" name="bday">Input 类型：datetime
datetime 类型允许你选择一个日期（UTC 时间）
生日 (日期和时间): <input type="datetime" name="bdaytime">Input 类型：datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区)
生日 (日期和时间): <input type="datetime-local" name="bdaytime">Input 类型：email
email 类型用于应该包含 e-mail 地址的输入域
E-mail: <input type="email" name="email">Input 类型：month
month 类型允许你选择一个月份
生日 (月和年): <input type="month" name="bdaymonth">Input 类型：number
number 类型用于应该包含数值的输入域，您还能够设定对所接受的数字的限定
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">使用下面的属性来规定对数字类型的限定
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段是禁用的 |
| max | 规定允许的最大值 |
| maxlength | 规定输入字段的最大字符长度 |
| min | 规定允许的最小值 |
| pattern | 规定用于验证输入字段的模式 |
| readonly | 规定输入字段的值无法修改 |
| required | 规定输入字段的值是必需的 |
| size | 规定输入字段中的可见字符数 |
| step | 规定输入字段的合法数字间隔 |
| value | 规定输入字段的默认值 |
Input 类型：search
search 类型用于搜索域，比如站点搜索或 Google 搜索
Search Google: <input type="search" name="googlesearch">Input 类型：tel
tel 类型用于输入电话号码
电话号码: <input type="tel" name="usrtel">Input 类型：time
time 类型允许你选择一个时间
选择时间: <input type="time" name="usr_time">Input 类型：url
url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值
添加您的主页: <input type="url" name="homepage">Input 类型：week
week 类型允许你选择周和年
选择周: <input type="week" name="week_year">HTML5 表单元素
HTML5 新的表单元素
HTML5 有以下新的表单元素:
- <datalist>
- <keygen>
- <output>
HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>HTML5 <keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>HTML5 <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>HTML5 表单属性
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：
- autocomplete
- novalidate
<input>新属性：
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 与 width
- list
- min 与 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
<form> / <input> autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
当用户在该域中开始输入时，浏览器应该在该域中显示填写的选项
提示：autocomplete 属性可能在 form 元素中是开启的，而在 input 元素中时关闭的
注意：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form><form> novalidate 属性
novalidate 属性是一个 boolean（布尔）属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form><form> autofocus属性
autofocus 属性是一个布尔属性
autofocus 属性规定在页面加载时，域自动地获得焦点
First name:<input type="text" name="fname" autofocus><input> form 属性
form 属性规定输入域所属的一个或多个表单
提示:如需引用一个以上的表单，请使用空格分隔的列表
<!-- 位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分) -->
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1"><inut> formaction 属性
formaction 属性用于描述表单提交的URL地址
formaction 属性会覆盖 <form> 元素中的action属性
注意: formaction 属性用于 type=”submit” 和 type=”image”.
<!-- 以下HTMLform表单包含了两个不同地址的提交按钮 -->
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form><input> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=”post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
注意：该属性与 type=”submit” 和 type=”image” 配合使用
<!-- 第一个提交按钮以默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据 -->
<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form><input> formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的 method 属性。
注意: 该属性可以与 type=”submit” 和 type=”image” 配合使用。
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form><input> formnovalidate 属性
novalidate 属性是一个 boolean 属性
novalidate属性描述了 <input> 元素在表单提交时无需被验证
formnovalidate 属性会覆盖 <form> 元素的novalidate属性
注意: formnovalidate 属性与 type=”submit” 一起使用
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form><input> formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
formtarget 属性覆盖 <form>元素的target属性.
注意: formtarget 属性与 type=”submit” 和 type=”image” 配合使用。
<!-- 第一个提交按钮在当前页面提交，第二个提交按钮会新开一个页面再提交 -->
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form><input> height 和 width 属性
height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
注意：height 和 width 属性只适用于 image 类型的<input> 标签。
提示：图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）
<!-- 定义了一个图像提交按钮, 使用了 height 和 width 属性 -->
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"><input> list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist><input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><input> multiple 属性
multiple 属性是一个 boolean 属性
multiple 属性规定<input> 元素中可选择多个值
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file
Select images: <input type="file" name="img" multiple><inut> pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
注意：pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。
<input type="text" name="fname" placeholder="First name"><input> required 属性
required 属性是一个 boolean 属性
required 属性规定必须在提交之前填写输入域（不能为空）
注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
Username: <input type="text" name="usrname" required><input> step 属性
step 属性为输入域规定合法的数字间隔
如果 step=”3″，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week
<!-- 规定input step 步长为3 -->
<input type="number" name="points" step="3">HTML5 语义元素
语义= 意义
语义元素 = 有意义的元素
什么是语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者
无语义 元素实例: <div> 和 <span> – 无需考虑内容
语义元素实例: <form>, <table>, and <img> 清楚的定义了它的内容
HTML5 中新的语义元素
许多现有网站都包含以下HTML代码： <div id=”nav”>, <div class=”header”>, 或者 <div id=”footer”>, 来指明导航链接, 头部, 以及尾部
HTML5 提供了新的语义元素来明确一个web页面的不同部分
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
HTML5 <section> 元素
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>HTML5 <article> 元素
<article> 标签定义独立的内容
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>HTML5 <nav> 元素
<nav> 标签定义导航链接的部分，但不是所有链接都包含在 <nav> 元素中
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>HTML5 <aside> 元素
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）
aside 标签的内容应与主区域的内容相关
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>HTML5 <header> 元素
<header>元素描述了文档的头部区域
<header>元素主要用于定义内容的介绍展示区域
在页面中你可以使用多个<header> 元素
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>HTML5 <footer> 元素
<footer> 元素描述了文档的底部区域.
<footer> 元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
HTML5 <figure> 和 <figcaption> 元素
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响
<figcaption> 标签定义 <figure> 元素的标题
<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置
<figure>
<img decoding="async" loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>HTML5 Web 存储
HTML5 web 存储，一个比 cookie 更好的本地存储方式
什么是 HTML5 Web 存储
webstorage（HTML5 Web 存储）是将数据存储在用户客户端的一种方式，先前有cookie；webstorage相较于cookie更加高效安全，存储容量更大
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
- localStorage – 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
- sessionStorage – 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
// 存储
localStorage.setItem("sitename", "goblog");
//使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对
// 查找
document.getElementById("result").innerHTML = "网站名：" + localStorage.getItem("sitename");
//检索键值为 "sitename" 的值然后将数据插入 id="result" 的元素中也可以这样子写
// 存储
localStorage.sitename = "goblog";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;移除 localStorage 中的 “sitename”
localStorage.removeItem("sitename");不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能
什么是 Web Workers
当 HTML 页面执行脚本时，页面的状态是不可相应的，知道脚本运行完成
而web workders 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的正常响应
创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker
在这里，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML 页面传回一段消息。
注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它
下面的代码检测是否存在 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 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法
w.terminate();HTML5 SSE
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新
Server-Sent 事件 -单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达
接受 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
//创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
//每接收到一次更新，就会发生 onmessage 事件
//当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中服务端代码实例
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）
服务器端事件流的语法是非常简单的。把 “Content-Type” 报头设置为 “text/event-stream”。现在，您可以开始发送事件流了
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>ASP 代码
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>EventSource 对象
除了上述事件外还有这些事件
| 事件 | 描述 |
|---|---|
| onopen | 当通往服务器的连接被打开 |
| onmessage | 当接收到消息 |
| onerror | 当发生错误 |
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值：0 – 表示连接尚未建立。1 – 表示连接已建立，可以进行通信。2 – 表示连接正在进行关闭。3 – 表示连接已经关闭或者连接不能打开。 |
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
结语
至此，您已经完成HTML5的学习，下面为您提供了 HTML5 代码规范，方便您写出更加优美的 HTML 代码
