什么是 HTML5?

HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

  1. <!DOCTYPE html>

最小的HTML5文档

下面是一个简单的HTML5文档：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>文档标题</title>
  6. </head>
  8. <body>
  9. 文档内容......
  10. </body>
  12. </html>

HTML5 的改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储
  • 访问本地文件
  • 本地 SQL 数据
  • 缓存引用
  • Javascript 工作者
  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

HTML5 使用 CSS3

  • 新选择器
  • 新属性
  • 动画
  • 2D/3D 转换
  • 圆角
  • 阴影效果
  • 可下载的字体

语义元素

HTML5 添加了很多语义元素如下所示：

标签 描述
定义页面独立的内容区域。
定义页面的侧边栏内容。
允许您设置一段文本，使其脱离其父元素的文本方向设置。
定义命令按钮，比如单选按钮、复选框或按钮
用于描述文档或文档某个部分的细节
定义对话框，比如提示框
标签包含 details 元素的标题
规定独立的流内容（图像、图表、照片、代码等等）。
定义
元素的标题
定义 section 或 document 的页脚。
定义了文档的头部区域
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释（中文注音或字符）。
定义字符（中文注音或字符）的解释或发音。
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节（section、区段）。
定义日期或时间。
规定在文本中的何处适合添加换行符。

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • </li><li><strike> </li></ul> <hr> <p><a name="dllkZ"></a></p> <h2 id="6z8gn9"><a name="6z8gn9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 浏览器支持</h2><p>现代的浏览器都支持 HTML5。<br />此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。<br />正因为如此，你可以 <strong>“教会”</strong> 浏览器处理 <strong>“未知”</strong> 的 HTML 元素。</p> <table> <thead> <tr> <th><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/21670865/1621512534409-8d6b821a-4a71-40b7-9205-6ee22bc7314c.jpeg#align=left&amp;display=inline&amp;height=32&amp;margin=%5Bobject%20Object%5D&amp;originHeight=32&amp;originWidth=32&amp;size=0&amp;status=done&amp;style=none&amp;width=32" alt=""></th> <th>甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <hr> <p><a name="OCFrv"></a></p> <h2 id="5ypurf"><a name="5ypurf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>将 HTML5 元素定义为块元素</h2><p>HTML5 定了 8 个新的 HTML <strong>语义（semantic）</strong> 元素。所有这些元素都是 <strong>块级</strong> 元素。<br />为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 <strong>display</strong> 属性值为 <strong>block</strong>:</p> <pre><code class="lang-html">header, section, footer, aside, nav, main, article, figure { display: block; } </code></pre> <hr> <p><a name="UcQJb"></a></p> <h2 id="7816ri"><a name="7816ri" class="reference-link"></a><span class="header-link octicon octicon-link"></span>为 HTML 添加新元素</h2><p>你可以为 HTML 添加新的元素。<br />该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <strong><myHero></strong> ： <a name="04E0C"></a></p> <h2 id="4ox3fx"><a name="4ox3fx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>实例</h2><pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;为 HTML 添加新元素&lt;/title&gt; &lt;script&gt; document.createElement(&quot;myHero&quot;) &lt;/script&gt; &lt;style&gt; myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;我的第一个标题&lt;/h1&gt; &lt;p&gt;我的第一个段落。&lt;/p&gt; &lt;myHero&gt;我的第一个新元素&lt;/myHero&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p><a name="MQgly"></a></p> <h2 id="eq2a38"><a name="eq2a38" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新元素</h2><p>自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。<br />为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。</p> <hr> <p><a name="zrln3"></a></p> <h2 id="bf3sbd"><a name="bf3sbd" class="reference-link"></a><span class="header-link octicon octicon-link"></span><canvas> 新元素</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-canvas.html"><canvas></a></td> <td style="text-align:left">标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API</td> </tr> </tbody> </table> <hr> <p><a name="zj5s9"></a></p> <h2 id="2q907o"><a name="2q907o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>新多媒体元素</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-audio.html"><audio></a></td> <td style="text-align:left">定义音频内容</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-video.html"><video></a></td> <td style="text-align:left">定义视频（video 或者 movie）</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-source.html"><source></a></td> <td style="text-align:left">定义多媒体资源 <video> 和 <audio></td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-embed.html"><embed></a></td> <td style="text-align:left">定义嵌入的内容，比如插件。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-track.html"><track></a></td> <td style="text-align:left">为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。</td> </tr> </tbody> </table> <hr> <p><a name="f2Xaq"></a></p> <h2 id="axtww6"><a name="axtww6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>新表单元素</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-datalist.html"><datalist></a></td> <td style="text-align:left">定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-keygen.html"><keygen></a></td> <td style="text-align:left">规定用于表单的密钥对生成器字段。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-output.html"><output></a></td> <td style="text-align:left">定义不同类型的输出，比如脚本的输出。</td> </tr> </tbody> </table> <hr> <p><a name="2Z0Ae"></a></p> <h2 id="fhx59t"><a name="fhx59t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>新的语义和结构元素</h2><p>HTML5提供了新的元素来创建更好的页面结构：</p> <table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-article.html"><article></a></td> <td style="text-align:left">定义页面独立的内容区域。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-aside.html"><aside></a></td> <td style="text-align:left">定义页面的侧边栏内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-bdi.html"><bdi></a></td> <td style="text-align:left">允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-command.html"><command></a></td> <td style="text-align:left">定义命令按钮，比如单选按钮、复选框或按钮</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-details.html"><details></a></td> <td style="text-align:left">用于描述文档或文档某个部分的细节</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-dialog.html"><dialog></a></td> <td style="text-align:left">定义对话框，比如提示框</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-summary.html"><summary></a></td> <td style="text-align:left">标签包含 details 元素的标题</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-figure.html"><figure></a></td> <td style="text-align:left">规定独立的流内容（图像、图表、照片、代码等等）。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-figcaption.html"><figcaption></a></td> <td style="text-align:left">定义 <figure> 元素的标题</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-footer.html"><footer></a></td> <td style="text-align:left">定义 section 或 document 的页脚。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-header.html"><header></a></td> <td style="text-align:left">定义了文档的头部区域</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-mark.html"><mark></a></td> <td style="text-align:left">定义带有记号的文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-meter.html"><meter></a></td> <td style="text-align:left">定义度量衡。仅用于已知最大和最小值的度量。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-nav.html"><nav></a></td> <td style="text-align:left">定义导航链接的部分。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-progress.html"><progress></a></td> <td style="text-align:left">定义任何类型的任务的进度。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-ruby.html"><ruby></a></td> <td style="text-align:left">定义 ruby 注释（中文注音或字符）。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-rt.html"><rt></a></td> <td style="text-align:left">定义字符（中文注音或字符）的解释或发音。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-rp.html"><rp></a></td> <td style="text-align:left">在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-section.html"><section></a></td> <td style="text-align:left">定义文档中的节（section、区段）。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-time.html"><time></a></td> <td style="text-align:left">定义日期或时间。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-wbr.html"><wbr></a></td> <td style="text-align:left">规定在文本中的何处适合添加换行符。</td> </tr> </tbody> </table> <hr> <p><a name="TX8lV"></a></p> <h2 id="fwuczb"><a name="fwuczb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>已移除的元素</h2><p>以下的 HTML 4.01 元素在HTML5中已经被删除:</p> <ul> <li><acronym></li><li><applet></li><li><basefont></li><li><big></li><li><center></li><li><dir></li><li><font></li><li><frame></li><li><frameset></li><li><noframes></li><li><strike></li><li><tt> </li></ul> <hr> <p><a name="KmdMA"></a></p> <h1 id="9m8d28"><a name="9m8d28" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Canvas</h1><p><canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。<br />在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513294265-b5159a76-bd3e-439f-8ad7-a0835a788b8d.png#align=left&amp;display=inline&amp;height=160&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=160&amp;originWidth=270&amp;size=8296&amp;status=done&amp;style=none&amp;width=270" alt="image.png"></p> <hr> <p><a name="J5orn"></a></p> <h2 id="46ayw1"><a name="46ayw1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是 canvas?</h2><p>HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<br /><canvas> 标签只是图形容器，您必须使用脚本来绘制图形。<br />你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p> <hr> <p><a name="OsTmQ"></a></p> <h2 id="af55dn"><a name="af55dn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>创建一个画布（Canvas）</h2><p>一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.<br /><strong>注意:</strong> 默认情况下 <canvas> 元素没有边框和内容。<br /><canvas>简单实例如下:</p> <pre><code class="lang-html">&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt; </code></pre> <p><strong>注意:</strong> 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.<br /><strong>提示:</strong>你可以在HTML页面中使用多个 <canvas> 元素.<br />使用 style 属性来添加边框:</p> <pre><code class="lang-html">&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #000000;&quot;&gt; &lt;/canvas&gt; </code></pre> <hr> <p><a name="NLrXC"></a></p> <h2 id="71ea1u"><a name="71ea1u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用 JavaScript 来绘制图像</h2><p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：</p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.fillStyle=&quot;#FF0000&quot;; ctx.fillRect(0,0,150,75); </code></pre> <p><strong>实例解析:</strong><br />首先，找到 <canvas> 元素:</p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); </code></pre> <p>然后，创建 context 对象：</p> <pre><code class="lang-javascript">var ctx=c.getContext(&quot;2d&quot;); </code></pre> <p>getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<br />下面的两行代码绘制一个红色的矩形：</p> <pre><code class="lang-javascript">ctx.fillStyle=&quot;#FF0000&quot;; ctx.fillRect(0,0,150,75); </code></pre> <p>设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。<br />fillRect(<em>x,y,width,height</em>) 方法定义了矩形当前的填充方式。</p> <hr> <p><a name="laM1g"></a></p> <h2 id="adfkvh"><a name="adfkvh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas 坐标</h2><p>canvas 是一个二维网格。<br />canvas 的左上角坐标为 (0,0)<br />上面的 fillRect 方法拥有参数 (0,0,150,75)。<br />意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。<br /><strong>坐标实例</strong><br />如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513632640-2db4827f-0274-4452-9d9f-c7c2b8673654.png#align=left&amp;display=inline&amp;height=164&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=164&amp;originWidth=349&amp;size=2123&amp;status=done&amp;style=none&amp;width=349" alt="image.png"></p> <hr> <p><a name="HGYmP"></a></p> <h2 id="9e5clw"><a name="9e5clw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 路径</h2><p>在Canvas上画线，我们将使用以下两种方法：</p> <ul> <li>moveTo(<em>x,y</em>) 定义线条开始坐标</li><li>lineTo(<em>x,y</em>) 定义线条结束坐标</li></ul> <p>绘制线条我们必须使用到 “ink” 的方法，就像stroke().<br />定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513713110-3d136ccf-483b-42e8-ab36-3578a143fe50.png#align=left&amp;display=inline&amp;height=130&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=130&amp;originWidth=250&amp;size=1836&amp;status=done&amp;style=none&amp;width=250" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </code></pre> <hr> <p>在canvas中绘制圆形, 我们将使用以下方法:</p> <pre><code class="lang-javascript">arc(x,y,r,start,stop) </code></pre> <p>实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513798944-91fd5a1b-d608-44b1-935e-aaf8fdd61e07.png#align=left&amp;display=inline&amp;height=210&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=210&amp;originWidth=292&amp;size=12279&amp;status=done&amp;style=none&amp;width=292" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </code></pre> <hr> <p><a name="5KaA7"></a></p> <h2 id="euqil8"><a name="euqil8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 文本</h2><p>使用 canvas 绘制文本，重要的属性和方法如下：</p> <ul> <li>font - 定义字体</li><li>fillText(<em>text,x,y</em>) - 在 canvas 上绘制实心的文本</li><li>strokeText(<em>text,x,y</em>) - 在 canvas 上绘制空心的文本</li></ul> <p>使用 fillText():<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513932867-dea108a7-5109-4f45-b093-82f3343a2177.png#align=left&amp;display=inline&amp;height=205&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=205&amp;originWidth=429&amp;size=16679&amp;status=done&amp;style=none&amp;width=429" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.font=&quot;30px Arial&quot;; ctx.fillText(&quot;Hello World&quot;,10,50); </code></pre> <p>使用 strokeText():<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513967244-556df6df-1b89-46cf-91d2-d6e4ef760c9d.png#align=left&amp;display=inline&amp;height=207&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=207&amp;originWidth=428&amp;size=17472&amp;status=done&amp;style=none&amp;width=428" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.font=&quot;30px Arial&quot;; ctx.strokeText(&quot;Hello World&quot;,10,50); </code></pre> <hr> <p><a name="31dLP"></a></p> <h2 id="agi5gc"><a name="agi5gc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 渐变</h2><p>渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。<br />以下有两种不同的方式来设置Canvas渐变：</p> <ul> <li>createLinearGradient(<em>x,y,x1,y1</em>) - 创建线条渐变</li><li>createRadialGradient(<em>x,y,r,x1,y1,r1</em>) - 创建一个径向/圆渐变</li></ul> <p>当我们使用渐变对象，必须使用两种或两种以上的停止颜色。<br />addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.<br />使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。<br />使用 createLinearGradient():<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621513992313-931d4b17-2d42-43f1-863b-5c17a1ccec04.png#align=left&amp;display=inline&amp;height=207&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=207&amp;originWidth=297&amp;size=11948&amp;status=done&amp;style=none&amp;width=297" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); // 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,&quot;red&quot;); grd.addColorStop(1,&quot;white&quot;); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </code></pre> <p>使用 createRadialGradient():<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621514045829-9eae62fb-a69f-4e17-85ba-f6ffde560a80.png#align=left&amp;display=inline&amp;height=202&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=202&amp;originWidth=322&amp;size=26501&amp;status=done&amp;style=none&amp;width=322" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); // 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,&quot;red&quot;); grd.addColorStop(1,&quot;white&quot;); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </code></pre> <hr> <p><a name="ECf2B"></a></p> <h2 id="1npa7y"><a name="1npa7y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 图像</h2><p>把一幅图像放置到画布上, 使用以下方法:</p> <ul> <li>drawImage(<em>image,x,y</em>)</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621514080916-d4cf0742-9726-4f65-818d-c2edd74e03a7.png#align=left&amp;display=inline&amp;height=840&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=840&amp;originWidth=330&amp;size=319980&amp;status=done&amp;style=none&amp;width=330" alt="image.png"></p> <pre><code class="lang-javascript">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); var img=document.getElementById(&quot;scream&quot;); ctx.drawImage(img,10,10); </code></pre> <hr> <p><a name="flO4k"></a></p> <h2 id="7v3e7e"><a name="7v3e7e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <canvas> 标签</h2><table> <thead> <tr> <th style="text-align:left">Tag</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-canvas.html"><canvas></a></td> <td style="text-align:left">HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。</td> </tr> </tbody> </table> <hr> <p><a name="5mitI"></a></p> <h1 id="1519u"><a name="1519u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 MathML</h1><p>HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>…</math> 。<br />MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。 <a name="iRcAf"></a></p> <h2 id="agh4xr"><a name="agh4xr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>MathML 实例</h2><p>以下是一个简单的 MathML 实例：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt; &lt;mrow&gt; &lt;msup&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt; &lt;mo&gt;+&lt;/mo&gt; &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt; &lt;mo&gt;=&lt;/mo&gt; &lt;msup&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt; &lt;/mrow&gt; &lt;/math&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/21670865/1621515324884-a91b0976-b4b0-49c9-b313-243298126376.jpeg#align=left&amp;display=inline&amp;height=524&amp;margin=%5Bobject%20Object%5D&amp;originHeight=524&amp;originWidth=1178&amp;size=0&amp;status=done&amp;style=none&amp;width=1178" alt=""><br />以下实例添加了一些运算符：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt; &lt;mrow&gt; &lt;mrow&gt; &lt;msup&gt; &lt;mi&gt;x&lt;/mi&gt; &lt;mn&gt;2&lt;/mn&gt; &lt;/msup&gt; &lt;mo&gt;+&lt;/mo&gt; &lt;mrow&gt; &lt;mn&gt;4&lt;/mn&gt; &lt;mo&gt;⁢&lt;/mo&gt; &lt;mi&gt;x&lt;/mi&gt; &lt;/mrow&gt; &lt;mo&gt;+&lt;/mo&gt; &lt;mn&gt;4&lt;/mn&gt; &lt;/mrow&gt; &lt;mo&gt;=&lt;/mo&gt; &lt;mn&gt;0&lt;/mn&gt; &lt;/mrow&gt; &lt;/math&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/21670865/1621515345978-ac9c620a-fc4d-4e47-89a8-12e695b941e6.jpeg#align=left&amp;display=inline&amp;height=616&amp;margin=%5Bobject%20Object%5D&amp;originHeight=616&amp;originWidth=1152&amp;size=0&amp;status=done&amp;style=none&amp;width=1152" alt=""><br />以下实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt; &lt;mrow&gt; &lt;mi&gt;A&lt;/mi&gt; &lt;mo&gt;=&lt;/mo&gt; &lt;mfenced open=&quot;[&quot; close=&quot;]&quot;&gt; &lt;mtable&gt; &lt;mtr&gt; &lt;mtd&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;/mtd&gt; &lt;mtd&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mtd&gt; &lt;/mtr&gt; &lt;mtr&gt; &lt;mtd&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;/mtd&gt; &lt;mtd&gt;&lt;mi&gt;w&lt;/mi&gt;&lt;/mtd&gt; &lt;/mtr&gt; &lt;/mtable&gt; &lt;/mfenced&gt; &lt;/mrow&gt; &lt;/math&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/21670865/1621515364132-9b0d5541-03e6-44a7-9b3a-386b797111a2.jpeg#align=left&amp;display=inline&amp;height=486&amp;margin=%5Bobject%20Object%5D&amp;originHeight=486&amp;originWidth=1176&amp;size=0&amp;status=done&amp;style=none&amp;width=1176" alt=""></p> <hr> <p><a name="8w0Eq"></a></p> <h1 id="2rexa8"><a name="2rexa8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 拖放（Drag 和 Drop）</h1><p>拖放（Drag 和 drop）是 HTML5 标准的组成部分。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621515454382-43a14998-ee8c-42b0-86c1-6900355393f3.png#align=left&amp;display=inline&amp;height=97&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=97&amp;originWidth=382&amp;size=5990&amp;status=done&amp;style=none&amp;width=382" alt="image.png"><br />将 <strong>RUNOOB.COM</strong> 图标拖动到矩形框中。</p> <hr> <p><a name="ZtcGY"></a></p> <h2 id="5rgc96"><a name="5rgc96" class="reference-link"></a><span class="header-link octicon octicon-link"></span>拖放</h2><p>拖放是一种常见的特性，即抓取对象以后拖到另一个位置。<br />在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。</p> <hr> <p><a name="EvUL8"></a></p> <h2 id="5wk0je"><a name="5wk0je" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 拖放实例</h2><p>下面的例子是一个简单的拖放实例：</p> <pre><code class="lang-html">&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} &lt;/style&gt; &lt;script&gt; function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData(&quot;Text&quot;); ev.target.appendChild(document.getElementById(data)); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;拖动 RUNOOB.COM 图片到矩形框中:&lt;/p&gt; &lt;div id=&quot;div1&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;&lt;/div&gt; &lt;br&gt; &lt;img loading=&quot;lazy&quot; id=&quot;drag1&quot; src=&quot;/images/logo.png&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; width=&quot;336&quot; height=&quot;69&quot;&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。</p> <hr> <p><a name="evHMA"></a></p> <h2 id="1myw7a"><a name="1myw7a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>设置元素为可拖放</h2><p>首先，为了使元素可拖动，把 draggable 属性设置为 true ：<br /><img draggable="true"></p> <hr> <p><a name="oWHek"></a></p> <h2 id="d344n5"><a name="d344n5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>拖动什么 - ondragstart 和 setData()</h2><p>然后，规定当元素被拖动时，会发生什么。<br />在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。<br />dataTransfer.setData() 方法设置被拖数据的数据类型和值：<br />function drag(ev)<br />{<br /> ev.dataTransfer.setData(“Text”,ev.target.id);<br />}<br />Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。</p> <hr> <p><a name="ihibT"></a></p> <h2 id="5p2izy"><a name="5p2izy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>放到何处 - ondragover</h2><p>ondragover 事件规定在何处放置被拖动的数据。<br />默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。<br />这要通过调用 ondragover 事件的 event.preventDefault() 方法：<br /><em>event</em>.preventDefault()</p> <hr> <p><a name="OTqaY"></a></p> <h2 id="alw5mj"><a name="alw5mj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>进行放置 - ondrop</h2><p>当放置被拖数据时，会发生 drop 事件。<br />在上面的例子中，ondrop 属性调用了一个函数，drop(event)：<br />function drop(ev)<br />{<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData(“Text”);<br /> ev.target.appendChild(document.getElementById(data));<br />}</p> <hr> <p>代码解释：</p> <ul> <li>调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）</li><li>通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。</li><li>被拖数据是被拖元素的 id (“drag1”)</li><li>把被拖元素追加到放置元素（目标元素）中</li></ul> <hr> <p><a name="qoTrs"></a></p> <h1 id="8t1y1m"><a name="8t1y1m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Geolocation（地理定位）</h1><p>HTML5 Geolocation（地理定位）用于定位用户的位置。</p> <hr> <p><a name="CTlLK"></a></p> <h2 id="a4pzpe"><a name="a4pzpe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 - 使用地理定位</h2><p>请使用 getCurrentPosition() 方法来获得用户的位置。<br />下例是一个简单的地理定位实例，可返回用户位置的经度和纬度:</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p id=&quot;demo&quot;&gt;点击按钮获取您当前坐标（可能需要比较长的时间获取）：&lt;/p&gt; &lt;button onclick=&quot;getLocation()&quot;&gt;点我&lt;/button&gt; &lt;script&gt; var x=document.getElementById(&quot;demo&quot;); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML=&quot;该浏览器不支持获取地理位置。&quot;; } } function showPosition(position) { x.innerHTML=&quot;纬度: &quot; + position.coords.latitude + &quot;&lt;br&gt;经度: &quot; + position.coords.longitude; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>实例解析:</p> <ul> <li>检测是否支持地理定位</li><li>如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。</li><li>如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象</li><li>showPosition() 函数获得并显示经度和纬度</li></ul> <p>上面的例子是一个非常基础的地理定位脚本，不含错误处理。</p> <hr> <p><a name="exuRm"></a></p> <h2 id="408sln"><a name="408sln" class="reference-link"></a><span class="header-link octicon octicon-link"></span>处理错误和拒绝</h2><p>getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p id=&quot;demo&quot;&gt;点击按钮获取您当前坐标（可能需要比较长的时间获取）：&lt;/p&gt; &lt;button onclick=&quot;getLocation()&quot;&gt;点我&lt;/button&gt; &lt;script&gt; var x=document.getElementById(&quot;demo&quot;); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else { x.innerHTML=&quot;该浏览器不支持定位。&quot;; } } function showPosition(position) { x.innerHTML=&quot;纬度: &quot; + position.coords.latitude + &quot;&lt;br&gt;经度: &quot; + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML=&quot;用户拒绝对获取地理位置的请求。&quot; break; case error.POSITION_UNAVAILABLE: x.innerHTML=&quot;位置信息是不可用的。&quot; break; case error.TIMEOUT: x.innerHTML=&quot;请求用户地理位置超时。&quot; break; case error.UNKNOWN_ERROR: x.innerHTML=&quot;未知错误。&quot; break; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>错误代码：</p> <ul> <li>Permission denied - 用户不允许地理定位</li><li>Position unavailable - 无法获取当前位置</li><li>Timeout - 操作超时</li></ul> <hr> <p><a name="2PXSH"></a></p> <h2 id="6h21gh"><a name="6h21gh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在地图中显示结果</h2><p>如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p id=&quot;demo&quot;&gt;点击按钮获取您当前坐标（可能需要比较长的时间获取）：&lt;/p&gt; &lt;button onclick=&quot;getLocation()&quot;&gt;点我&lt;/button&gt; &lt;div id=&quot;mapholder&quot;&gt;&lt;/div&gt; &lt;script&gt; var x=document.getElementById(&quot;demo&quot;); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else { x.innerHTML=&quot;该浏览器不支持获取地理位置。&quot;; } } function showPosition(position) { var latlon=position.coords.latitude+&quot;,&quot;+position.coords.longitude; var img_url=&quot;http://maps.googleapis.com/maps/api/staticmap?center=&quot; +latlon+&quot;&amp;zoom=14&amp;size=400x300&amp;sensor=false&quot;; document.getElementById(&quot;mapholder&quot;).innerHTML=&quot;&lt;img src=&#39;&quot;+img_url+&quot;&#39;&gt;&quot;; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML=&quot;用户拒绝对获取地理位置的请求。&quot; break; case error.POSITION_UNAVAILABLE: x.innerHTML=&quot;位置信息是不可用的。&quot; break; case error.TIMEOUT: x.innerHTML=&quot;请求用户地理位置超时。&quot; break; case error.UNKNOWN_ERROR: x.innerHTML=&quot;未知错误。&quot; break; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p><a name="t5oFe"></a></p> <h2 id="ae2idj"><a name="ae2idj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>给定位置的信息</h2><p>本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。<br />可用于:</p> <ul> <li>更新本地信息</li><li>显示用户周围的兴趣点</li><li>交互式车载导航系统 (GPS)</li></ul> <hr> <p><a name="0qlJj"></a></p> <h2 id="fr18zy"><a name="fr18zy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>getCurrentPosition() 方法 - 返回数据</h2><p>T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。</p> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">coords.latitude</td> <td style="text-align:left">十进制数的纬度</td> </tr> <tr> <td style="text-align:left">coords.longitude</td> <td style="text-align:left">十进制数的经度</td> </tr> <tr> <td style="text-align:left">coords.accuracy</td> <td style="text-align:left">位置精度</td> </tr> <tr> <td style="text-align:left">coords.altitude</td> <td style="text-align:left">海拔，海平面以上以米计</td> </tr> <tr> <td style="text-align:left">coords.altitudeAccuracy</td> <td style="text-align:left">位置的海拔精度</td> </tr> <tr> <td style="text-align:left">coords.heading</td> <td style="text-align:left">方向，从正北开始以度计</td> </tr> <tr> <td style="text-align:left">coords.speed</td> <td style="text-align:left">速度，以米/每秒计</td> </tr> <tr> <td style="text-align:left">timestamp</td> <td style="text-align:left">响应的日期/时间</td> </tr> </tbody> </table> <hr> <p><a name="5v5q4"></a></p> <h1 id="o7d6m"><a name="o7d6m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Video(视频)</h1><p><a name="j0Ke0"></a></p> <h2 id="9f5s08"><a name="9f5s08" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 (视频)- 如何工作</h2><p>如需在 HTML5 中显示视频，您所有需要的是：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt; &lt;source src=&quot;movie.mp4&quot; type=&quot;video/mp4&quot;&gt; &lt;source src=&quot;movie.ogg&quot; type=&quot;video/ogg&quot;&gt; 您的浏览器不支持 HTML5 video 标签。 &lt;/video&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><video> 元素提供了 播放、暂停和音量控件来控制视频。<br />同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。<br /><video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<br /><video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： <a name="RkF9E"></a></p> <h2 id="4en7g8"><a name="4en7g8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>视频格式与浏览器的支持</h2><p>当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:</p> <table> <thead> <tr> <th style="text-align:left">浏览器</th> <th style="text-align:left">MP4</th> <th style="text-align:left">WebM</th> <th style="text-align:left">Ogg</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">Internet Explorer</td> <td style="text-align:left">YES</td> <td style="text-align:left">NO</td> <td style="text-align:left">NO</td> </tr> <tr> <td style="text-align:left">Chrome</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> <tr> <td style="text-align:left">Firefox</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> <tr> <td style="text-align:left">Safari</td> <td style="text-align:left">YES</td> <td style="text-align:left">NO</td> <td style="text-align:left">NO</td> </tr> <tr> <td style="text-align:left">Opera</td> <td style="text-align:left">YES (从 Opera 25 起)</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> </tbody> </table> <ul> <li>MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</li><li>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</li><li>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</li></ul> <hr> <p><a name="hyX4e"></a></p> <h2 id="3az55r"><a name="3az55r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>视频格式</h2><table> <thead> <tr> <th style="text-align:left">格式</th> <th style="text-align:left">MIME-type</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">MP4</td> <td style="text-align:left">video/mp4</td> </tr> <tr> <td style="text-align:left">WebM</td> <td style="text-align:left">video/webm</td> </tr> <tr> <td style="text-align:left">Ogg</td> <td style="text-align:left">video/ogg</td> </tr> </tbody> </table> <hr> <p><a name="hIyQw"></a></p> <h2 id="epr8st"><a name="epr8st" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <video> - 使用 DOM 进行控制</h2><p>HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。<br /><video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.<br />其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。<br />例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div style=&quot;text-align:center&quot;&gt; &lt;button onclick=&quot;playPause()&quot;&gt;播放/暂停&lt;/button&gt; &lt;button onclick=&quot;makeBig()&quot;&gt;放大&lt;/button&gt; &lt;button onclick=&quot;makeSmall()&quot;&gt;缩小&lt;/button&gt; &lt;button onclick=&quot;makeNormal()&quot;&gt;普通&lt;/button&gt; &lt;br&gt; &lt;video id=&quot;video1&quot; width=&quot;420&quot;&gt; &lt;source src=&quot;mov_bbb.mp4&quot; type=&quot;video/mp4&quot;&gt; &lt;source src=&quot;mov_bbb.ogg&quot; type=&quot;video/ogg&quot;&gt; 您的浏览器不支持 HTML5 video 标签。 &lt;/video&gt; &lt;/div&gt; &lt;script&gt; var myVideo=document.getElementById(&quot;video1&quot;); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516039231-54124f35-0a42-436b-933a-1bf2a1e744b3.png#align=left&amp;display=inline&amp;height=364&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=364&amp;originWidth=628&amp;size=425021&amp;status=done&amp;style=none&amp;width=628" alt="image.png"></p> <hr> <p><a name="w53XZ"></a></p> <h2 id="159n6s"><a name="159n6s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Video 标签</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-video.html"><video></a></td> <td style="text-align:left">定义一个视频</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-source.html"><source></a></td> <td style="text-align:left">定义多种媒体资源,比如 <video> 和<audio></td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-track.html"><track></a></td> <td style="text-align:left">定义在媒体播放器文本轨迹</td> </tr> </tbody> </table> <hr> <p><a name="uiTal"></a></p> <h1 id="6qdpge"><a name="6qdpge" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Audio(音频)</h1><p><a name="jRkIV"></a></p> <h2 id="5mklqe"><a name="5mklqe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Audio - 如何工作</h2><p>如需在 HTML5 中播放音频，你需要使用以下代码：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;audio controls&gt; &lt;source src=&quot;horse.ogg&quot; type=&quot;audio/ogg&quot;&gt; &lt;source src=&quot;horse.mp3&quot; type=&quot;audio/mpeg&quot;&gt; 您的浏览器不支持 audio 元素。 &lt;/audio&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>control 属性供添加播放、暂停和音量控件。<br />在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。<br /><audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件</p> <hr> <p><a name="DsVQI"></a></p> <h2 id="d18cxt"><a name="d18cxt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>音频格式及浏览器支持</h2><p>目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:</p> <table> <thead> <tr> <th style="text-align:left">浏览器</th> <th style="text-align:left">MP3</th> <th style="text-align:left">Wav</th> <th style="text-align:left">Ogg</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">Internet Explorer 9+</td> <td style="text-align:left">YES</td> <td style="text-align:left">NO</td> <td style="text-align:left">NO</td> </tr> <tr> <td style="text-align:left">Chrome 6+</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> <tr> <td style="text-align:left">Firefox 3.6+</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> <tr> <td style="text-align:left">Safari 5+</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">NO</td> </tr> <tr> <td style="text-align:left">Opera 10+</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> <td style="text-align:left">YES</td> </tr> </tbody> </table> <hr> <p><a name="wJNja"></a></p> <h2 id="bsli3i"><a name="bsli3i" class="reference-link"></a><span class="header-link octicon octicon-link"></span>音频格式的MIME类型</h2><table> <thead> <tr> <th style="text-align:left">Format</th> <th style="text-align:left">MIME-type</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">MP3</td> <td style="text-align:left">audio/mpeg</td> </tr> <tr> <td style="text-align:left">Ogg</td> <td style="text-align:left">audio/ogg</td> </tr> <tr> <td style="text-align:left">Wav</td> <td style="text-align:left">audio/wav</td> </tr> </tbody> </table> <hr> <p><a name="nLvYp"></a></p> <h2 id="79m4u9"><a name="79m4u9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Audio 标签</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-audio.html"><audio></a></td> <td style="text-align:left">定义了声音内容</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-source.html"><source></a></td> <td style="text-align:left">规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用</td> </tr> </tbody> </table> <hr> <p><a name="2RY0t"></a></p> <h2 id="f5b5ma"><a name="f5b5ma" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新的 Input 类型</h2><p>HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。<br />本章全面介绍这些新的输入类型：</p> <ul> <li>color</li><li>date</li><li>datetime</li><li>datetime-local</li><li>email</li><li>month</li><li>number</li><li>range</li><li>search</li><li>tel</li><li>time</li><li>url</li><li>week</li></ul> <p><strong>注意:</strong>并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。</p> <hr> <p><a name="XcfPk"></a></p> <h2 id="fphudk"><a name="fphudk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: color</h2><p>color 类型用在input字段主要用于选取颜色，如下所示：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 选择你喜欢的颜色: &lt;input type=&quot;color&quot; name=&quot;favcolor&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516347687-a094dc68-6654-4c53-b927-a0d76447186e.png#align=left&amp;display=inline&amp;height=371&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=371&amp;originWidth=491&amp;size=93435&amp;status=done&amp;style=none&amp;width=491" alt="image.png"></p> <hr> <p><a name="OxrZn"></a></p> <h2 id="aswjvy"><a name="aswjvy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: date</h2><p>date 类型允许你从一个日期选择器选择一个日期。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 生日: &lt;input type=&quot;date&quot; name=&quot;bday&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516615407-d3b6ac2b-1f75-41ce-8af0-f5d143ec3063.png#align=left&amp;display=inline&amp;height=392&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=392&amp;originWidth=353&amp;size=13599&amp;status=done&amp;style=none&amp;width=353" alt="image.png"></p> <hr> <p><a name="gDpge"></a></p> <h2 id="fszchf"><a name="fszchf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: datetime</h2><p>datetime 类型允许你选择一个日期（UTC 时间）。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 生日 (日期和时间): &lt;input type=&quot;datetime&quot; name=&quot;bdaytime&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516579423-d9b3f4b7-2324-4493-8ab1-bdf2cbcb911a.png#align=left&amp;display=inline&amp;height=72&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=72&amp;originWidth=489&amp;size=3087&amp;status=done&amp;style=none&amp;width=489" alt="image.png"></p> <hr> <p><a name="QIcZQ"></a></p> <h2 id="2jox7q"><a name="2jox7q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: datetime-local</h2><p>datetime-local 类型允许你选择一个日期和时间 (无时区).</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 生日 (日期和时间): &lt;input type=&quot;datetime-local&quot; name=&quot;bdaytime&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516595749-3e6dafb7-4491-426b-87a4-a1c328e3aa52.png#align=left&amp;display=inline&amp;height=412&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=412&amp;originWidth=626&amp;size=22497&amp;status=done&amp;style=none&amp;width=626" alt="image.png"></p> <hr> <p><a name="briW8"></a></p> <h2 id="7xu7w8"><a name="7xu7w8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: email</h2><p>email 类型用于应该包含 e-mail 地址的输入域。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; E-mail: &lt;input type=&quot;email&quot; name=&quot;usremail&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 9 及更早 IE 版本不支持 type=&quot;email&quot; 。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516561720-eb0197be-5cad-40a9-b5bc-db3c9a4476d8.png#align=left&amp;display=inline&amp;height=122&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=122&amp;originWidth=632&amp;size=8536&amp;status=done&amp;style=none&amp;width=632" alt="image.png"></p> <hr> <p><a name="3HdNl"></a></p> <h2 id="3vjf3k"><a name="3vjf3k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: month</h2><p>month 类型允许你选择一个月份。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 生日 ( 月和年 ): &lt;input type=&quot;month&quot; name=&quot;bdaymonth&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516642831-6258d91b-7ca5-4c3b-8c91-0af17d5303b6.png#align=left&amp;display=inline&amp;height=279&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=279&amp;originWidth=459&amp;size=10702&amp;status=done&amp;style=none&amp;width=459" alt="image.png"></p> <hr> <p><a name="TZjha"></a></p> <h2 id="coy1q1"><a name="coy1q1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: number</h2><p>number 类型用于应该包含数值的输入域。<br />您还能够设定对所接受的数字的限定：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 数量 ( 1 到 5 之间): &lt;input type=&quot;number&quot; name=&quot;quantity&quot; min=&quot;1&quot; max=&quot;5&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;b&gt;注意:&lt;/b&gt;Internet Explorer 9 及更早 IE 版本不支持 type=&quot;number&quot; 。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516671558-612beac9-1da2-45e7-a922-4e9f8848c7a6.png#align=left&amp;display=inline&amp;height=105&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=105&amp;originWidth=602&amp;size=9167&amp;status=done&amp;style=none&amp;width=602" alt="image.png"><br />使用下面的属性来规定对数字类型的限定：</p> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">disabled</td> <td style="text-align:left">规定输入字段是禁用的</td> </tr> <tr> <td style="text-align:left">max</td> <td style="text-align:left">规定允许的最大值</td> </tr> <tr> <td style="text-align:left">maxlength</td> <td style="text-align:left">规定输入字段的最大字符长度</td> </tr> <tr> <td style="text-align:left">min</td> <td style="text-align:left">规定允许的最小值</td> </tr> <tr> <td style="text-align:left">pattern</td> <td style="text-align:left">规定用于验证输入字段的模式</td> </tr> <tr> <td style="text-align:left">readonly</td> <td style="text-align:left">规定输入字段的值无法修改</td> </tr> <tr> <td style="text-align:left">required</td> <td style="text-align:left">规定输入字段的值是必需的</td> </tr> <tr> <td style="text-align:left">size</td> <td style="text-align:left">规定输入字段中的可见字符数</td> </tr> <tr> <td style="text-align:left">step</td> <td style="text-align:left">规定输入字段的合法数字间隔</td> </tr> <tr> <td style="text-align:left">value</td> <td style="text-align:left">规定输入字段的默认值</td> </tr> </tbody> </table> <hr> <p><a name="O5qmW"></a></p> <h2 id="fqo3tq"><a name="fqo3tq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: range</h2><p>range 类型用于应该包含一定范围内数字值的输入域。<br />range 类型显示为滑动条。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot; method=&quot;get&quot;&gt; Points: &lt;input type=&quot;range&quot; name=&quot;points&quot; min=&quot;1&quot; max=&quot;10&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 9 及更早 IE 版本不支持 type=&quot;range&quot;。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>请使用下面的属性来规定对数字类型的限定：</p> <ul> <li>max - 规定允许的最大值</li><li>min - 规定允许的最小值</li><li>step - 规定合法的数字间隔</li><li>value - 规定默认值</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516719313-450c0662-7ce4-4f89-897a-4bab68a91352.png#align=left&amp;display=inline&amp;height=115&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=115&amp;originWidth=616&amp;size=8601&amp;status=done&amp;style=none&amp;width=616" alt="image.png"></p> <hr> <p><a name="Tc5P9"></a></p> <h2 id="23mx9u"><a name="23mx9u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: search</h2><p>search 类型用于搜索域，比如站点搜索或 Google 搜索。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; Search Google: &lt;input type=&quot;search&quot; name=&quot;googlesearch&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516762978-0e310505-5638-4b9b-a859-f3cc6996f6d0.png#align=left&amp;display=inline&amp;height=74&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=74&amp;originWidth=379&amp;size=2849&amp;status=done&amp;style=none&amp;width=379" alt="image.png"></p> <hr> <p><a name="jBL5S"></a></p> <h2 id="bn4cr2"><a name="bn4cr2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: tel</h2><pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 电话号码: &lt;input type=&quot;tel&quot; name=&quot;usrtel&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516810544-40876877-4a34-4e2c-9460-4d62c3497302.png#align=left&amp;display=inline&amp;height=80&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=80&amp;originWidth=300&amp;size=2183&amp;status=done&amp;style=none&amp;width=300" alt="image.png"></p> <hr> <p><a name="7PoZ3"></a></p> <h2 id="87b58d"><a name="87b58d" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: time</h2><p>time 类型允许你选择一个时间。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 选择时间: &lt;input type=&quot;time&quot; name=&quot;usr_time&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516844746-89791ef4-8525-4c1c-8482-da101694f4f6.png#align=left&amp;display=inline&amp;height=369&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=369&amp;originWidth=273&amp;size=12802&amp;status=done&amp;style=none&amp;width=273" alt="image.png"></p> <hr> <p><a name="OH7QS"></a></p> <h2 id="3p2bop"><a name="3p2bop" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: url</h2><p>url 类型用于应该包含 URL 地址的输入域。<br />在提交表单时，会自动验证 url 域的值。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 添加你的主页: &lt;input type=&quot;url&quot; name=&quot;homepage&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 9及更早 IE 版本不支持 type=&quot;url&quot; 。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516905629-37a85fd6-d499-46de-b426-01f1bee37273.png#align=left&amp;display=inline&amp;height=129&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=129&amp;originWidth=584&amp;size=10250&amp;status=done&amp;style=none&amp;width=584" alt="image.png"></p> <hr> <p><a name="gkxuk"></a></p> <h2 id="4ef4ss"><a name="4ef4ss" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型: week</h2><p>week 类型允许你选择周和年。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot;&gt; 选择周: &lt;input type=&quot;week&quot; name=&quot;year_week&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621516935108-4ea3a5c1-2b85-49d8-a82b-4e54b34d90b6.png#align=left&amp;display=inline&amp;height=390&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=390&amp;originWidth=423&amp;size=18741&amp;status=done&amp;style=none&amp;width=423" alt="image.png"></p> <hr> <p><a name="Ilqb8"></a></p> <h2 id="9xvhch"><a name="9xvhch" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <input> 标签</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-input.html"><input></a></td> <td style="text-align:left">描述input输入器</td> </tr> </tbody> </table> <hr> <p><a name="1f4Qy"></a></p> <h1 id="4z4z9r"><a name="4z4z9r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 表单元素</h1><p>HTML5 有以下新的表单元素:</p> <ul> <li><datalist></li><li><keygen></li><li><output> </li></ul> <hr> <p><a name="R9a0c"></a></p> <h2 id="9kylmm"><a name="9kylmm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <datalist> 元素</h2><p><datalist> 元素规定输入域的选项列表。<br /><datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：<br />使用 <input> 元素的列表属性与 <datalist> 元素绑定.</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo-form.php&quot; method=&quot;get&quot;&gt; &lt;input list=&quot;browsers&quot; name=&quot;browser&quot;&gt; &lt;datalist id=&quot;browsers&quot;&gt; &lt;option value=&quot;Internet Explorer&quot;&gt; &lt;option value=&quot;Firefox&quot;&gt; &lt;option value=&quot;Chrome&quot;&gt; &lt;option value=&quot;Opera&quot;&gt; &lt;option value=&quot;Safari&quot;&gt; &lt;/datalist&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt; Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621517070555-c1fc68f1-65b3-474a-a553-dfe9e0ab03fb.png#align=left&amp;display=inline&amp;height=238&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=238&amp;originWidth=667&amp;size=11894&amp;status=done&amp;style=none&amp;width=667" alt="image.png"></p> <hr> <p><a name="fN69G"></a></p> <h2 id="gf49hy"><a name="gf49hy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <keygen> 元素</h2><p><keygen> 元素的作用是提供一种验证用户的可靠方法。<br /><keygen>标签规定用于表单的密钥对生成器字段。<br />当提交表单时，会生成两个键，一个是私钥，一个公钥。<br />私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=&quot;demo_keygen.php&quot; method=&quot;get&quot;&gt; 用户名: &lt;input type=&quot;text&quot; name=&quot;usr_name&quot;&gt; 加密: &lt;keygen name=&quot;security&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;/form&gt; &lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt; Internet Explorer 不支持 keygen 标签。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621517141924-8fcd7da7-3135-4311-942f-febadc3abd4f.png#align=left&amp;display=inline&amp;height=96&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=96&amp;originWidth=444&amp;size=6968&amp;status=done&amp;style=none&amp;width=444" alt="image.png"></p> <hr> <p><a name="h3NeL"></a></p> <h2 id="88m0rb"><a name="88m0rb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <output> 元素</h2><p><output> 元素用于不同类型的输出，比如计算或脚本输出：</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form oninput=&quot;x.value=parseInt(a.value)+parseInt(b.value)&quot;&gt;0 &lt;input type=&quot;range&quot; id=&quot;a&quot; value=&quot;50&quot;&gt;100 +&lt;input type=&quot;number&quot; id=&quot;b&quot; value=&quot;50&quot;&gt; =&lt;output name=&quot;x&quot; for=&quot;a b&quot;&gt;&lt;/output&gt; &lt;/form&gt; &lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt; Edge 12及更早 IE 版本的浏览器不支持 output 元素。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621517182598-84854235-93e1-4a2e-9b9d-021c7dd64f50.png#align=left&amp;display=inline&amp;height=104&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=104&amp;originWidth=563&amp;size=8425&amp;status=done&amp;style=none&amp;width=563" alt="image.png"></p> <hr> <p><a name="YelPB"></a></p> <h2 id="fahir2"><a name="fahir2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新表单元素</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-datalist.html"><datalist></a></td> <td style="text-align:left"><input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-keygen.html"><keygen></a></td> <td style="text-align:left"><keygen> 标签规定用于表单的密钥对生成器字段。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="https://www.runoob.com/tags/tag-output.html"><output></a></td> <td style="text-align:left"><output> 标签定义不同类型的输出，比如脚本的输出。</td> </tr> </tbody> </table> <hr> <p><a name="63SDX"></a></p> <h1 id="fo3t9k"><a name="fo3t9k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 表单属性</h1><p><a name="g34yO"></a></p> <h2 id="2wu52y"><a name="2wu52y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新的表单属性</h2><p>HTML5 的 <form> 和 <input>标签添加了几个新属性.<br /><form>新属性：</p> <ul> <li>autocomplete</li><li>novalidate</li></ul> <p><input>新属性：</p> <ul> <li>autocomplete</li><li>autofocus</li><li>form</li><li>formaction</li><li>formenctype</li><li>formmethod</li><li>formnovalidate</li><li>formtarget</li><li>height 与 width</li><li>list</li><li>min 与 max</li><li>multiple</li><li>pattern (regexp)</li><li>placeholder</li><li>required</li><li>step</li></ul> <hr> <p><a name="GKh9E"></a></p> <h1 id="g1qon4"><a name="g1qon4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 语义元素</h1><p>语义= 意义<br />语义元素 = 有意义的元素</p> <hr> <p><a name="KXfkE"></a></p> <h2 id="3mkqy"><a name="3mkqy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是语义元素?</h2><p>一个语义元素能够清楚的描述其意义给浏览器和开发者。<br /><strong>无语义</strong> 元素实例: <div> 和 <span> - 无需考虑内容.<br /><strong>语义</strong>元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.</p> <hr> <p>许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.<br />HTML5 提供了新的语义元素来明确一个Web页面的不同部分:</p> <ul> <li><header></li><li><nav></li><li><section></li><li><article></li><li><aside></li><li><figcaption></li><li><figure></li><li><footer><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/21670865/1621517823915-213486ad-944f-41ee-be77-4bfc3e84f4c2.jpeg#align=left&amp;display=inline&amp;height=369&amp;margin=%5Bobject%20Object%5D&amp;originHeight=369&amp;originWidth=500&amp;size=0&amp;status=done&amp;style=none&amp;width=500" alt=""></li></ul> <hr> <p><a name="PxUwD"></a></p> <h2 id="fk37e5"><a name="fk37e5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <section> 元素</h2><section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<br />根据W3C HTML5文档: section 包含了一组内容及其标题。 ```html &lt;!DOCTYPE html&gt; <html> <head> <meta charset="utf-8"> </head> <body> <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF’s Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> <p></body> </html></p> <pre><code> --- &lt;a name=&quot;712lY&quot;&gt;&lt;/a&gt; ## HTML5 &lt;article&gt; 元素 &lt;article&gt; 标签定义独立的内容。.&lt;br /&gt;&lt;article&gt; 元素使用实例: - Forum post - Blog post - News story - Comment&lt;br /&gt; ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;article&gt; &lt;h1&gt;Internet Explorer 9&lt;/h1&gt; &lt;p&gt; Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。&lt;/p&gt; &lt;/article&gt; &lt;/body&gt; &lt;/html&gt; </code></pre><hr> <p><a name="J4xV2"></a></p> <h2 id="gakors"><a name="gakors" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <nav> 元素</h2><nav> 标签定义导航链接的部分。<br /><nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中! ```html &lt;!DOCTYPE html&gt; <html> <head> <meta charset="utf-8"> </head> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> <p></body> </html></p> <pre><code>![image.png](https://cdn.nlark.com/yuque/0/2021/png/21670865/1621517999192-c145045b-043a-4460-a171-1f03f16f4f2f.png#align=left&amp;display=inline&amp;height=51&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=51&amp;originWidth=335&amp;size=2807&amp;status=done&amp;style=none&amp;width=335) --- &lt;a name=&quot;KSZ9r&quot;&gt;&lt;/a&gt; ## HTML5 &lt;aside&gt; 元素 &lt;aside&gt; 标签定义页面主区域内容之外的内容（比如侧边栏）。&lt;br /&gt;aside 标签的内容应与主区域的内容相关. ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;My family and I visited The Epcot center this summer.&lt;/p&gt; &lt;aside&gt; &lt;h4&gt;Epcot Center&lt;/h4&gt; &lt;p&gt;The Epcot Center is a theme park in Disney World, Florida.&lt;/p&gt; &lt;/aside&gt; &lt;/body&gt; &lt;/html&gt; </code></pre><p><img src="https://cdn.nlark.com/yuque/0/2021/png/21670865/1621518048500-f3a3b37c-a142-4d0e-b00f-7a899ce881b4.png#align=left&amp;display=inline&amp;height=146&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=146&amp;originWidth=602&amp;size=11453&amp;status=done&amp;style=none&amp;width=602" alt="image.png"></p> <hr> <p><a name="IkDjA"></a></p> <h2 id="d216uo"><a name="d216uo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <header> 元素</h2><p><header>元素描述了文档的头部区域<br /><header>元素主要用于定义内容的介绍展示区域.<br />在页面中你可以使用多个<header> 元素.<br />以下实例定义了文章的头部:</p> <pre><code class="lang-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;article&gt; &lt;header&gt; &lt;h1&gt;Internet Explorer 9&lt;/h1&gt; &lt;p&gt;&lt;time pubdate datetime=&quot;2011-03-15&quot;&gt;&lt;/time&gt;&lt;/p&gt; &lt;/header&gt; &lt;p&gt; Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的&lt;/p&gt; &lt;/article&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p><a name="FWQb8"></a></p> <h2 id="g0thny"><a name="g0thny" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <footer> 元素</h2><footer> 元素描述了文档的底部区域.<br /><footer> 元素应该包含它的包含元素<br />一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等<br />文档中你可以使用多个 <footer>元素. ```html &lt;!DOCTYPE html&gt; <html> <head> <meta charset="utf-8"> </head> <body> <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer> <p></body> </html></p> <pre><code> --- &lt;a name=&quot;x5UpS&quot;&gt;&lt;/a&gt; ## HTML5 &lt;figure&gt; 和 &lt;figcaption&gt; 元素 &lt;figure&gt;标签规定独立的流内容（图像、图表、照片、代码等等）。&lt;br /&gt;&lt;figure&gt; 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。&lt;br /&gt;&lt;figcaption&gt; 标签定义 &lt;figure&gt; 元素的标题.&lt;br /&gt;&lt;figcaption&gt;元素应该被置于 &quot;figure&quot; 元素的第一个或最后一个子元素的位置。 ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.&lt;/p&gt; &lt;figure&gt; &lt;img src=&quot;img_pulpit.jpg&quot; alt=&quot;The Pulpit Rock&quot; width=&quot;304&quot; height=&quot;228&quot;&gt; &lt;figcaption&gt;Fig.1 - A view of the pulpit rock in Norway.&lt;/figcaption&gt; &lt;/figure&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>