文章目录
- HTML5
- HTML5 浏览器支持
- HTML5新元素
- HTML5 Canvas
- 浏览器支持
- 创建一个画布（Canvas）
- 使用 JavaScript 来绘制图像
- 画线、画圆、写字、渐变效果
- 放图片
- HTML5 内联 SVG
- 什么是SVG
- SVG优势
- 把 SVG 直接嵌入 HTML 页面
- SVG 与 Canvas两者间的区别
- Canvas 与 SVG 的比较
- HTML5 MathML
- MathML 实例
- HTML5 拖放（Drag 和 Drop）
- HTML5 Video(视频)
- HTML5 Audio(音频)
- HTML5 新的 Input 类型
- HTML5 新的表单元素
- HTML5 < datalist> 元素
- HTML5 < keygen> 元素
- HTML5 < output> 元素
- HTML5 新的表单属性
HTML5 新特性（新增的语义化标签、对于表单增强的一些标签、新增的API，比如本地存储）
HTML5
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后，初始化新标签的CSS：（HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block）
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
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> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。
HTML5 < canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript) 来完成.
< canvas> 标签只是图形容器，必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
浏览器支持
表格中的数字表示支持 < canvas> 元素的第一个浏览器版本号。
创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 < canvas> 元素来绘制。
注意: 默认情况下 < canvas> 元素没有边框和内容。
< canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意： 标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。
提示： 我们可以在HTML页面中使用多个 元素。
使用 style 属性来添加边框：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
效果：
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
实例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.fillStyle = "#FF0000";ctx.fillRect(0, 0, 150, 75);</script></body></html>
实例解析：
画线、画圆、写字、渐变效果
代码笔记：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// 画线：// 在Canvas上画线，我们将使用以下两种方法：// 1、moveTo(x,y) 定义线条开始坐标// 2、lineTo(x,y) 定义线条结束坐标// 绘制线条我们必须使用到 "ink" 的方法，就像stroke()。ctx.moveTo(0, 0);ctx.lineTo(200, 100);ctx.stroke();// 画圆：// 在canvas中绘制圆形, 我们将使用以下方法:// arc(x,y,r,start,stop)// 实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill()。ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx.stroke();// 写字：// 使用 canvas 绘制文本，重要的属性和方法如下：// font - 定义字体// fillText(text,x,y) - 在 canvas 上绘制实心的文本// strokeText(text,x,y) - 在 canvas 上绘制空心的文本// 1) 实心 使用 fillText():ctx.font = "30px Arial";ctx.fillText("Hello World", 10, 50);// 2) 空心 使用 strokeText():ctx.font = "30px Arial";ctx.strokeText("Hello World", 10, 80);// 渐变：// 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。// 以下有两种不同的方式来设置Canvas渐变：// 1、createLinearGradient(x,y,x1,y1) - 创建线条渐变// 2、createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变// 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。// addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.// 使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。// 1) 创建一个线性渐变。使用渐变填充矩形:// 创建渐变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);// 2) 创建一个径向/圆渐变。使用渐变填充矩形：// 创建渐变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);</script></body></html>
放图片
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");img.onload = function() {ctx.drawImage(img,10,10);}
</script></body>
</html>
效果：
HTML5 内联 SVG
什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg></body>
</html>
效果：
SVG 与 Canvas两者间的区别
- SVG 是一种使用 XML 描述 2D 图形的语言。
- Canvas 通过 JavaScript 来绘制 2D 图形。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加JavaScript 事件处理器。
- 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
- Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
HTML5 MathML
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
注意： 大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。
MathML 实例
实例一代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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>
实例一效果：
实例二代码：
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mrow><mn>4</mn><mo></mo><mi>x</mi></mrow><mo>+</mo><mn>4</mn></mrow><mo>=</mo><mn>0</mn></mrow></math>
实例二效果：
实例三代码：
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>A</mi><mo>=</mo><mfenced open="[" close="]"><mtable><mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd></mtr><mtr><mtd><mi>z</mi></mtd><mtd><mi>w</mi></mtd></mtr></mtable></mfenced></mrow></math>
实例三效果：
HTML5 拖放（Drag 和 Drop）
拖放（Drag 和 drop） 是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 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 loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"></body>
</html>
HTML5 Video(视频)
< video> 元素提供了 播放、暂停和音量控件 来控制视频。
同时 < video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
< video> 与</ video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
< video> 元素支持多个 < source> 元素。< source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
当前， < video> 元素支持三种视频格式：MP4, WebM, 和 Ogg。
HTML5 < video> 和 < audio> 元素同样拥有方法、属性和事件。
< video> 和 < audio>元素的方法、属性和事件可以使用JavaScript进行控制。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，< video> 元素开始播放、已暂停，已停止，等等。
例中简单的方法，向我们演示了如何使用 < video> 元素，读取并设置属性，以及如何调用方法。
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div style="text-align:center"><button onclick="playPause()">播放/暂停</button><button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button><br><video id="video1" width="420"><source src="../笔记图片/01.mp4" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video></div><script>var myVideo = document.getElementById("video1");function playPause() {if (myVideo.paused)myVideo.play();elsemyVideo.pause();}function makeBig() {myVideo.width = 560;}function makeSmall() {myVideo.width = 320;}function makeNormal() {myVideo.width = 420;} </script></body></html>
效果显示：
HTML5 Audio(音频)
control 属性供添加播放、暂停和音量控件。
在 < audio> 与 </ audio> 之间你需要插入浏览器不支持的元素的提示文本 。
< audio> 元素允许使用多个 < source> 元素. < source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
目前, < audio>元素支持三种音频格式文件：MP3, Wav, 和 Ogg。
代码示例：
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。 这些新特性提供了更好的输入控制和验证。
注意： 并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
以下是HTML5 新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
代码笔记：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form><!-- Input 类型: color --><!-- color 类型用在input字段主要用于选取颜色。 -->选择你喜欢的颜色: <input type="color" name="favcolor"><br><!-- Input 类型: date --><!-- date 类型允许你从一个日期选择器选择一个日期。 -->生日: <input type="date" name="bday"><br><!-- Input 类型: datetime --><!-- datetime 类型允许你选择一个日期（UTC 时间）。 谷歌浏览器不支持。 -->生日 (日期和时间): <input type="datetime" name="bdaytime"><br><!-- Input 类型: datetime-local --><!-- datetime-local 类型允许你选择一个日期和时间 (无时区)。 -->生日 (日期和时间): <input type="datetime-local" name="bdaytime"><br><!-- Input 类型: email --><!-- email 类型用于应该包含 e-mail 地址的输入域。 --><!-- 提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。 -->E-mail: <input type="email" name="email"><br><!-- Input 类型: month --><!-- month 类型允许你选择一个月份。 -->生日 (月和年): <input type="month" name="bdaymonth"><br><!-- Input 类型: number --><!-- number 类型用于应该包含数值的输入域。 --><!-- 我们还能够设定对所接受的数字的限定： --><!-- 使用下面的属性来规定对数字类型的限定：属性 | 描述disabled | 规定输入字段是禁用的max | 规定允许的最大值maxlength | 规定输入字段的最大字符长度min | 规定允许的最小值pattern | 规定用于验证输入字段的模式readonly | 规定输入字段的值无法修改required | 规定输入字段的值是必需的size | 规定输入字段中的可见字符数step | 规定输入字段的合法数字间隔value | 规定输入字段的默认值--><!-- 定义一个数值输入域(限定): -->数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"><br><!-- Input 类型: range --><!-- range 类型用于应该包含一定范围内数字值的输入域。 --><!-- range 类型显示为滑动条。 --><!-- 定义一个不需要非常精确的数值（类似于滑块控制）: --><!-- 可以使用下面的属性来规定对数字类型的限定：max - 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔value - 规定默认值 -->Points: <input type="range" name="points" min="1" max="10"><input type="submit"><br><!-- Input 类型: search --><!-- search 类型用于搜索域，比如站点搜索或 Google 搜索。 -->Search Google: <input type="search" name="googlesearch"><input type="submit"><br><!-- Input 类型: tel --><!-- 定义输入电话号码字段： 谷歌浏览器不支持。-->电话号码: <input type="tel" name="usrtel"><br><!-- Input 类型: time --><!-- time 类型允许你选择一个时间。 -->选择时间: <input type="time" name="usr_time"><br><!-- Input 类型: url --><!-- url 类型用于应该包含 URL 地址的输入域。 --><!-- 在提交表单时，会自动验证 url 域的值。 -->添加你的主页: <input type="url" name="homepage"><input type="submit"><p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p><!-- Input 类型: week --><!-- week 类型允许你选择周和年。 --><!-- 定义周和年 (无时区): -->选择周: <input type="week" name="week_year"></form></body></html>
效果显示：
HTML5 新的表单元素
HTML5 有以下新的表单元素:
- < datalist>
- < keygen>
- < output>
注意： 不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。
HTML5 < datalist> 元素
< datalist> 元素规定输入域的选项列表。
< datalist> 属性规定 form 或 input 域应该拥有自动完成功能。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
使用 < input> 元素的列表属性与 < datalist> 元素绑定。
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="demo-form.php" method="get"><!-- HTML5 <datalist> 元素 --><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit"></form>
</body></html>
注意： Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。
HTML5 < keygen> 元素
< keygen> 元素的作用是提供一种验证用户的可靠方法。
< keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key） 存储于客户端，公钥（public key） 则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- HTML5 <keygen> 元素 --><form action="demo_keygen.php" method="get">用户名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit"></form></body></html>
注意： Internet Explorer 不支持 keygen 标签。
HTML5 < output> 元素
< output> 元素用于不同类型的输出，比如计算或脚本输出：
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- HTML5 <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></body></html>
注意： Edge 12及更早 IE 版本的浏览器不支持 output 元素。
效果显示：
HTML5 新的表单属性
