【四万字总结】对于HTML5的一些总结与实践

最新推荐文章于 2024-05-01 02:24:16 发布

我想养只猫 •͓͡•ʔ

最新推荐文章于 2024-05-01 02:24:16 发布

阅读量1.5w

点赞数 6

分类专栏：前端开发文章标签： html5 css3 前端

本文为博主原创文章，遵循【CC BY-NC-ND 4.0】版权协议，转载请附上原文出处链接和作者及本声明。

本文链接：https://blog.csdn.net/qq_41103843/article/details/121473850

版权

前端开发专栏收录该内容

35 篇文章 37 订阅

订阅专栏

简介

引言

HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。在本节中，我们将总览 HTML5 的新变化，HTML5 文档、HTML5 新特性等。

知识点

HTML5 代码规范
HTML5 的改变

在接下来我们将深入 HTML5 的各个新特性，了解它们的用途，掌握它们的语法，最终达到熟练使用 HTML5 的目标

代码规范

正确的文档类型

文档类型声明位于 HTML 文档的第一行：

<!DOCTYPE html>

可省略部分标签,但不推荐

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的，比如下面的写法也是正确的：

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>我是标题</h1>
<p>我是段落。</p>

但是不推荐省略掉，建议还是写成下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h1>我是标题</h1>
    <p>我是段落。</p>
  </body>
</html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母，建议使用小写字母，会显得更加好看一点，千万不要使用大小写混写，那样会显得很不专业。建议的写法如下：

<section>
  <p>我是段落。</p>
</section>

关闭所有HTML元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错：

<section>
  <p>我是段落甲。
  <p>我是段落乙。
</section>

建议写成下面这样：

<section>
  <p>我是段落甲。</p>
  <p>我是段落乙。</p>
</section>

关闭空HTML元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭,我们可以这样写：

<meta charset="utf-8">

建议的写法是还是关闭：

<meta charset="utf-8" />

使用小写属性名

同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母：

<div class="test"></div>

属性值

HTML5 属性值可以不用引号。但是属性值我们推荐使用引号，尤其是属性值有空格的话，一定要使用引号，不然不会起作用，属性的命名如果很长我们建议使用驼峰命名法：

<div class="test changeColor"></div>

图片属性

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。建议定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。比如：

<img src="syl.png" alt="HTML5" style="width:520px;height:1314px" />

空格前后的等号

等号的前后可以使用空格，也可以不使用，推荐少用空格。

<link rel="stylesheet" href="styles.css" />

避免一行代码过长

使用 HTML 编辑器，一行代码过长时左右滚动代码来查看是不方便的。如果实在太长，建议分为几行来写。

空格和缩近

不要无缘无故的添加空行，一般一个模块或一个功能添加一个空行便于区分，缩进使用两个空格，不建议使用 Tab。

注释

<!-- 这是注释 -->

快捷键为 Ctrl + /。当然我们首先要选中要注释的代码再使用快捷键。

注：编码风格建议统一，不要乱而杂，另外建议大家养成多写注释的习惯，因为时间久了，如果没有注释，可能你自己都不知道自己当初写的是啥。

HTML5 的改变

HTML5 是 HTML 最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 添加了许多新的语法特征，其中包括 <video>、<audio> 和 <canvas> 元素，同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如 <section>、<article>、<header> 和 <nav> 则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像 <a>、<cite> 和 <menu> 被修改，重新定义或标准化了。同时 apis 和 DOM 已经成为 HTML5 中的基础部分了。HTML5 还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

新特性和新规则

新特性

语义特性：HTML5 新标准中添加了拥有具体含义的 HTML 标签比如：<article>、<footer>、<header>、<nav>、 <section>。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
对本地离线存储的更好的支持。
用于媒介回放的 video 和 audio 元素。
用于绘画的 canvas 元素。
性能与集成特性：提供了非常显著的性能优化和更有效的计算机硬件使用。
设备兼容特性：能够处理各种输入和输出设备。
CSS3 特性。

新规则

新特性应该基于 HTML、CSS、DOM、JavaScript。
减少对外部插件的需求，比如 Flash。
HTML5 应该独立于设备
更多取代脚本的标记
更优秀的错误处理

新增的结构元素

HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。

首先我们来看一个普通的页面的布局方式：

/images/HTML5Untitled.png

以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。

而 HTML5 新标签带来的新的布局则是下面这种情况：

/images/HTML5Untitled1.png

代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>my page</title>
  </head>
  <body>
    <header>header</header>
    <nav>nav</nav>
    <article>
      <section>section</section>
    </article>
    <aside>aside</aside>
    <footer>footer</footer>
  </body>
</html>

注：上面的代码没有 CSS 样式，只是展示 HTML 结构。拥有具体含义的标签，使得代码有很直观的感受，搜索器也能很容易地抓取合适的信息。

section 标签

<section> 表示文档中的一个区域（或节）。比如章节、页眉、页脚或文档中的其他部分，一般来说会包含一个标题。

例子：

<body>
  <section>
    <h1>section是什么？</h1>
    <p>一个新章节</p>
  </section>
</body>

注：不要把 <section> 元素作为一个普通的 div 容器来使用。一般来说，一个 <section> 应该出现在文档大纲中。

article 标签

<article> 标签定义独立的内容。常常使用在论坛帖子，报纸文章，博客条目，用户评论等独立的内容项目之中。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。

例子：

<body>
  <article>
    <h1>实验楼是什么</h1>
    <p>一个在线学习的网站</p>
  </article>
</body>

nav 标签

<nav> 标签定义导航链接的部分：描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。

例子：

<body>
  <nav>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </nav>
</body>

注：并不是所有的链接都必须使用 <nav> 标签，它只用来将一些热门的链接放入导航栏。一个网页也可能含有多个 <nav> 标签,例如一个是网站内的导航列表,另一个是本页面内的导航列表。

header 标签

<header> 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

通常 header 标签至少包含一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

例子：

<body>
  <header>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </header>
</body>

footer 标签

<footer> 标签定义 section 或 document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。它和 header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入了 footer 标签，那么它就相当于该区段的页脚了。

例子：

<body>
  <footer>
    <span>Copyright @2013-2019 实验楼在线教育</span>
  </footer>
</body>

aside 标签

<aside> 标签表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

例子：

<body>
  <aside>
    <h1>实验楼简介</h1>
    <p>一个在线学习的网站</p>
  </aside>
</body>

废弃的元素

HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。

纯表现元素

纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。

对可用性产生负面影响的元素

对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 html5 中已不支持 frame 框架，只支持 iframe 框架，html5 中同时将 frameset、frame 和 noframes 这三个元素废除。

只有部分浏览器支持的元素

对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持，特别是 bgsound 元素以及 marquee 元素，只被 IE 支持，所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代，bgsound 元素可由 audio 元素替代，marquee 可以由 javascript 编程的方式替代。

表单

引言

表单是一个容器，用来收集客户端要提交到服务端的信息。本节中，我们将来学习 HTML5 的表单的特性，包括表单元素、表单属性以及表单输入类型等。

知识点

HTML5 表单元素
HTML5 表单属性
HTML5 输入类型

HTML5 的表单新增了许多特性，如表单的输入类型限定、表单的字段属性、表单的组织方式等，多加练习，合理运用它们，你页面的表单部分会变得更加合理化。

表单元素

datalist 元素

datalist 元素用于为文本框提供一个可供选择的列表，使用 datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option>black</option>
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>white</option>
      <option>yellow</option>
    </datalist>
  </body>
</html>

也可以写成下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option value="black"> </option>
      <option value="blue"> </option>
      <option value="green"> </option>
      <option value="red"> </option>
      <option value="white"> </option>
      <option value="yellow"> </option>
    </datalist>
  </body>
</html>

运行效果为：

/images/HTML5Untitled2.png

新增属性

autocomplete 属性

autocomplete 属性规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

例子：

<body>
  <form action="#" method="get" autocomplete="on">
    Name:<input type="text" name="name" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled3.png

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。

例子：

<body>
  <form action="#" method="get">
    Name：<input type="text" name="user_name" autofocus="autofocus" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled4.png

注：大家可以把上面代码中 autofocus 属性删掉对比看看效果。

form 属性

form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。

例子：

<body>
  <form action="#" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" value="提交" />
  </form>

  <p>
    下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把
    first name 和 last name的值都提交。
  </p>

  Last name: <input type="text" name="lname" form="user_form" />
</body>

运行效果为：

/images/HTML5Untitled5.png

注：如需引用一个以上的表单，请使用空格分隔的列表。

multiple 属性

multiple 属性规定输入域中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。

例子：

<body>
  <form action="#" method="get" id="user_form">
    选择文件: <input type="file" name="file" multiple="multiple" />
    <input type="submit" value="提交" />
  </form>
</body>

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

例子：

<body>
  <form action="#" method="get" id="user_form" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" value="提交" />
  </form>
</body>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern）是正则表达式。pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

例子：

<body>
  <form action="#" method="get">
    Name:
    <input type="text" name="name" pattern="[A-z]{4}" title="请输入四个字母" />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled6.png

注：想要了解更多正则表达式的语法，请访问正则表达式手册。

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。

例子：

<body>
  <form action="#" method="get">
    <input type="search" name="user_search" placeholder="实验楼" />
    <input type="submit" value="提交" />
  </form>
</body>

实例：

/images/HTML5Untitled7.png

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

例子：

<body>
  <form action="#" method="get">
    <input type="search" name="user_search" required="required" />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled8.png

输入类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

例子：

<body>
  <form action="#" method="get">
    E-mail: <input type="email" name="user_email" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled9.png

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

例子：

<body>
  <form action="#" method="get">
    Url: <input type="url" name="user_url" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled10.png

Input 类型 - number

number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。

例子：

<body>
  <form action="#" method="get">
    number：<input
      type="number"
      name="points"
      min="0"
      max="10"
      step="2"
      value="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled11.png

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。

例子：

<body>
  <form action="#" method="get">
    range:
    <input
      type="range"
      name="points"
      min="1"
      max="10"
      value="2"
      step="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled12.png

Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。
datetime-local - 选取时间、日、月、年（本地时间）

例子：

<body>
  <form action="#" method="get">
    Date: <input type="date" name="user_date" /><br />
    <input type="submit" value="提交" />
    <br /><br />
    Month: <input type="month" name="user_month" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled13.png

Input 类型 - color

color 类型用于选择颜色。

例子：

<body>
  <form action="#" method="get">
    <input type="color" name="colordemo" />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：

/images/HTML5Untitled14.png

Canvas API

引言

HTML5 Canvas 是现代浏览器都支持的 HTML5 非插件绘图的功能，Canvas 就是一个画布，主要用于图形表示、图表绘制、游戏制作等。本小节我们将会学习如何一步一步使用 canvas 绘制图形。

知识点

Canvas 元素
绘制简单图形
直线绘制
矩形绘制
圆和椭圆的绘制
填充和渐变
文字绘制
图片绘制

Canvas 是 HTML5 网页图形表示、图表绘制、游戏制作的基础，需要多次练习加以熟练掌握，只有这样在操作 HTML5 图形图表时才能得心应手。

Canvas 元素

canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性和 height 属性用来设置画布的宽和高，单位是 px。默认的画布的高度是 150px，宽度是 300px。

<body>
  <canvas
    id="myCanvas"
    width="200"
    height="100"
    style="border:2px solid #000000;"
  >
  </canvas>
</body>

注意: 默认情况下 <canvas> 元素没有边框和内容，标签通常需要指定一个 id 属性 (脚本中经常引用)。

绘制简单图形

canvas 元素本身并不能实现图形绘制，所有的绘制工作必须要和 JavaScript 脚本结合起来。首先，给 canvas 元素添加一个 id 属性，这样能够让我们在 JavaScript 脚本中通过 id 属性找到对应的 canvas 元素。

<canvas
  id="myCanvas"
  width="200"
  height="100"
  style="border:2px solid #000000;"
>
  <!-- 添加id属性值为myCanvas -->
</canvas>

添加了 id 属性后，找到对应的 canvas 元素：

var myCanvas = document.getElementById('myCanvas');
// 通过document.getElementById来找到id为myCanvas的元素

然后通过 canvas 元素的 getContext()方法获取上下文，即创建 Context 对象，以获取允许进行绘制的 2D 环境。

var ctx = myCanvas.getContext('2d');

最后通过 Context 对象的相关方法完成绘制，比如：fillStyle()等。

ctx.fillStyle = 'red';
//设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
ctx.fillRect(0, 0, 100, 100);

整体的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" style="width:200;height:100">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      var myCanvas = document.getElementById('mycanvas');
      var ctx = myCanvas.getContext('2d');
      //设置颜色
      ctx.fillStyle = 'red';
      //设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
      ctx.fillRect(0, 0, 100, 100);
    </script>
  </body>
</html>

/images/HTML5Untitled15.png

注意：

进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，x 轴水平方向向右延伸，y 轴垂直向下延伸，如图：

/images/HTML5Untitled16.png

直线绘制

strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。
lineWidth：设置或返回当前的线条宽度，以像素计。
beginPath()：起始一条路径，或重置当前路径。
closePath()：创建从当前点回到起始点的路径。
moveTo()：把路径移动到画布中的指定点，不创建线条。
lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。
stroke()：绘制已定义的路径。

绘制一条直线例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      // 开始路径绘制
      ctx.beginPath();
      // 设置路径起点，坐标为(20,20)
      ctx.moveTo(20, 20);
      // 添加一个(200,200)的新点
      ctx.lineTo(200, 200);
      // 设置线宽
      ctx.lineWidth = 2.0;
      // 设置线的颜色
      ctx.strokeStyle = '#CC0000';
      // 绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled17.png

绘制三角形例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      // 开始路径绘制
      ctx.beginPath();
      // 设置路径起点，坐标为(20,20)
      ctx.moveTo(20, 20);
      // 添加一个(200,200)的新点
      ctx.lineTo(200, 200);
      // 添加一个(400,20)的新点
      ctx.lineTo(400, 20);
      //创建从当前点回到起始点的路径
      ctx.closePath();
      // 设置线宽
      ctx.lineWidth = 2.0;
      // 设置线的颜色
      ctx.strokeStyle = '#CC0000';
      // 绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled18.png

矩形绘制

rect() 方法介绍

使用 rect() 方法创建矩形。语法为：

ctx.rect(x,y,width,height);

参数说明：

x 表示矩形左上角的 x 坐标。
y 表示矩形左上角的 y 坐标。
width 表示矩形的宽度，以像素计。
height 表示矩形的高度，以像素计。

注：使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制矩形
      ctx.rect(10, 10, 100, 200);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled19.png

strokeRect() 方法介绍

使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：

ctx.strokeRect(x, y, width, height);

注：参数与 rect() 方法一致，唯一的区别是这里不需要再加一句 stroke() 或 fill() 方法。无法填色。

前面绘制矩形的例子也可以这样写：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制矩形
      ctx.strokeRect(10, 10, 100, 200);
    </script>
  </body>
</html>

fillRect() 方法介绍

使用 fillRect() 方法创建实心矩形。语法为：

ctx.fillRect(x, y, width, height);

注：参数说明与前面一致，默认的填充颜色为黑色，可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled20.png

clearRect() 方法介绍

使用 clearRect() 方法清空给定矩形内的指定像素。语法为：

ctx.clearRect(x, y, width, height);

注：参数说明与前面一致。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制矩形
      ctx.fillRect(10, 10, 100, 200);
      //清空指定像素
      ctx.clearRect(20, 20, 50, 50);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled21.png

圆和扇的绘制

使用 arc() 方法绘制圆或者椭圆。语法为：

ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);

参数说明：

x 表示圆的中心的 x 坐标。
y 表示圆的中心的 y 坐标。
r 表示圆的半径。
sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。
eAngle 表示结束角，以弧度计。
counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //开始路径绘制
      ctx.beginPath();
      //绘制圆
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled22.png

当然绘制扇形也很简单，只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了，来看看例子。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //开始路径绘制
      ctx.beginPath();
      //绘制圆
      ctx.arc(100, 75, 50, 0, 0.5 * Math.PI);
      //闭合
      ctx.moveTo(100, 125);
      ctx.lineTo(100, 75);
      ctx.lineTo(150, 75);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled23.png

填充和渐变

填充

使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：

ctx.fillStyle = color | gradient | pattern;

参数说明：

color 表示绘图填充的颜色。默认值是 #000000。
gradient 表示用于填充绘图的渐变对象（线性或放射性）。
pattern 表示用于填充绘图的 pattern 对象。

例子：

绘制实心矩形，填充颜色为红色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //填充为红色
      ctx.fillStyle = 'red';
      //绘制实心矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled24.png

渐变

使用 createLinearGradient() 方法创建线性渐变。语法为：

ctx.createLinearGradient(x0, y0, x1, y1);

参数说明：

x0 表示渐变开始点的 x 坐标。
y0 表示渐变开始点的 y 坐标。
x1 表示渐变结束点的 x 坐标。
y1 表示渐变结束点的 y 坐标。

使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：

gradient.addColorStop(stop, color);

参数说明：

stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。
color 表示在结束位置显示的 CSS 颜色值。

注：addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //设置渐变色
      var gradient = ctx.createLinearGradient(0, 0, 170, 0);
      gradient.addColorStop(0, 'red');
      gradient.addColorStop('0.2', 'orange');
      gradient.addColorStop('0.5', 'yellow');
      gradient.addColorStop('0.7', 'green');
      gradient.addColorStop(1, 'blue');
      //填充色为渐变色
      ctx.fillStyle = gradient;
      //绘制实心矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled25.png

使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数说明：

x0 表示渐变的开始圆的 x 坐标。
y0 表示渐变的开始圆的 y 坐标。
r0 表示开始圆的半径。
x1 表示渐变的结束圆的 x 坐标。
y1 表示渐变的结束圆的 y 坐标。
r1 表示结束圆的半径。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //设置渐变色
      var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
      gradient.addColorStop(0, 'red');
      gradient.addColorStop('0.2', 'orange');
      gradient.addColorStop('0.5', 'yellow');
      gradient.addColorStop('0.7', 'green');
      gradient.addColorStop(1, 'blue');
      //填充色为渐变色
      ctx.fillStyle = gradient;
      //绘制实心矩形
      ctx.fillRect(10, 10, 190, 150);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled26.png

fill() 方法

   使用 `fill()` 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 `fillStyle` 属性。

语法为：

ctx.fill();

注：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制矩形
      ctx.rect(20, 20, 150, 100);
      ctx.fillStyle = 'red';
      ctx.fill();
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled27.png

文字绘制

fillText() 方法

使用 fillText() 方法在在画布上绘制实心文本。语法为：

ctx.fillText(text, x, y, maxWidth);

参数说明：

text 规定在画布上输出的文本。
x 表示开始绘制文本的 x 坐标位置（相对于画布）。
y 表示开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 表示允许的最大文本宽度，以像素计。可选。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //绘制实心文本
      ctx.fillText('Hello Syl!', 10, 50);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled28.png

strokeText() 方法

使用 strokeText() 方法在画布上绘制空心文本。语法为：

ctx.strokeText(text, x, y, maxWidth);

注：参数说明与 fillText() 方法一致。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //设置字体样式
      ctx.font = '50px Georgia';
      //绘制空心文本
      ctx.strokeText('Hello Syl!', 10, 50);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled29.png

font 属性

   使用 `font` 属性设置或返回画布上文本内容的当前字体属性。`font` 属性使用的语法与 CSS `font` 属性相同。

textAlign 属性

使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：

ctx.textAlign = 'center|end|left|right|start';

参数说明：

start 默认值，表示文本在指定的位置开始。
center 表示文本的中心被放置在指定的位置。
end 表示文本在指定的位置结束。
left 表示文本左对齐。
right 表示文本右对齐。

注：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //画一条线便于展示
      ctx.strokeStyle = 'blue';
      ctx.moveTo(200, 20);
      ctx.lineTo(200, 180);
      ctx.stroke();
      //设置字体样式
      ctx.font = '20px Georgia';
      //值为start的情况
      ctx.textAlign = 'start';
      ctx.strokeText('Hello Syl!', 200, 20);
      //值为center的情况
      ctx.textAlign = 'center';
      ctx.strokeText('Hello Syl!', 200, 60);
      //值为end的情况
      ctx.textAlign = 'end';
      ctx.strokeText('Hello Syl!', 200, 100);
      //值为left的情况
      ctx.textAlign = 'left';
      ctx.strokeText('Hello Syl!', 200, 140);
      //值为right的情况
      ctx.textAlign = 'right';
      ctx.strokeText('Hello Syl!', 200, 180);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled30.png

textBaseline 属性

textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：

ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom';

参数说明：

alphabetic 表示文本基线是普通的字母基线。默认值。
top 表示文本基线是 em 方框的顶端。
hanging 表示文本基线是悬挂基线。
middle 表示文本基线是 em 方框的正中。
ideographic 表示文本基线是表意基线。
bottom 表示文本基线是 em 方框的底端。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //画一条线便于展示
      ctx.strokeStyle = 'blue';
      ctx.moveTo(20, 100);
      ctx.lineTo(1314, 100);
      ctx.stroke();
      //设置字体样式
      ctx.font = '30px Georgia';
      //值为alphabetic的情况
      ctx.textBaseline = 'alphabetic';
      ctx.fillText('Hello Syl!', 20, 100);
      //值为top的情况
      ctx.textBaseline = 'top';
      ctx.fillText('Hello Syl!', 220, 100);
      //值为hanging的情况
      ctx.textBaseline = 'hanging';
      ctx.fillText('Hello Syl!', 420, 100);
      //值为middle的情况
      ctx.textBaseline = 'middle';
      ctx.fillText('Hello Syl!', 620, 100);
      //值为ideographic的情况
      ctx.textBaseline = 'ideographic';
      ctx.fillText('Hello Syl!', 820, 100);
      //值为bottom的情况
      ctx.textBaseline = 'bottom';
      ctx.fillText('Hello Syl!', 1020, 100);
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled31.png

图片绘制

在 Terminal 输入以下命令获取图片绘制用到的图片：

wget https://labfile.oss.aliyuncs.com/courses/1248/a.png

使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。

canvas 绘制图片的基本格式为：

//创建一个图片对象
var image = new Image();
//设置图片的路径
image.src = 'xxx';
//当图片加载完成后
image.onload = function () {
  //绘制图片
  ctx.drawImage();
};

语法 1，在画布上定位图像：

ctx.drawImage(img, x, y);

语法 2，在画布上定位图像，并规定图像的宽度和高度：

ctx.drawImage(img, x, y, width, height);

语法 3，剪切图像，并在画布上定位被剪切的部分：

ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

参数说明：

img 规定要使用的图像、画布或视频。
sx 表示开始剪切的 x 坐标位置。可选值。
sy 表示开始剪切的 y 坐标位置。可选值。
swidth 表示被剪切图像的宽度。可选值。
sheight 表示被剪切图像的高度。可选值。
x 表示在画布上放置图像的 x 坐标位置。
y 表示在画布上放置图像的 y 坐标位置。
width 表示要使用的图像的宽度（伸展或缩小图像）。可选值。
height 表示要使用的图像的高度，（伸展或缩小图像）。可选值。

例子 1，在画布上定位图像并作出一个立体的效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = 'a.png';
      //当图片加载完成后
      image.onload = function () {
        //输出5张照片
        for (var i = 0; i < 5; i++) {
          //参数：（1）绘制的图片  （2）坐标x，（3）坐标y
          ctx.drawImage(image, 100 + i * 80, 100 + i * 80);
        }
      };
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled32.png

例子 2，在画布上定位图像，并规定图像的宽度和高度：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = 'a.png';
      //当图片加载完成后
      image.onload = function () {
        //绘制图片
        ctx.drawImage(image, 100, 100, 150, 150);
      };
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled33.png

例子 3，剪切图像，并在画布上定位被剪切的部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById('mycanvas');
      //获取Context上下文
      var ctx = myCanvas.getContext('2d');
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = 'a.png';
      //当图片加载完成后
      image.onload = function () {
        //绘制图片
        ctx.drawImage(image, 100, 100, 150, 150, 150, 150, 150, 150);
      };
    </script>
  </body>
</html>

运行效果为：

/images/HTML5Untitled34.png

视频音频与拖放

引言

在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，很多人可能和我一样遇到过 Flash 插件崩溃的问题，让人相当烦躁，而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观，在这个实验中，我们将为大家介绍如何在网页中播放我们的视频音频文件。同时，我们也会学习 HTML5 对元素的拖放操作。

下面给大家一个在线的音频视频转换网站：http://cn.office-converter.com/

知识点

HTML5 视频介绍
HTML5 音频介绍
HTML5 拖放概述
HTML5 拖放使用

拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。

视频介绍

标准

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式和浏览器支持如下所示：

/images/HTML5Untitled35.png

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <video width="320" height="240" controls="controls">
      <source
        src="https://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
        type="video/ogg"
      />
      <source
        src="https://labfile.oss.aliyuncs.com/courses/1248/video.mp4"
        type="video/mp4"
      />
      你的浏览器不支持video元素
    </video>
  </body>
</html>

注：<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。video 元素允许多个 source 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

<body>
  <video
    src="https://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
    width="320"
    height="240"
    controls="controls"
  >
    你的浏览器不支持video元素
  </video>
</body>

video 标签的属性如下所示：

/images/HTML5Untitled36.png

这些属性设置都很简单，大家可以自行尝试体验一番。

字幕的简单使用

使用常用的 WebVtt 字幕格式，在 <video> 中使用 <track> 元素引入字幕。例如：

<track
  src="https://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt"
  srclang="zh"
  kind="subtitles"
  label="中文"
  default
/>
<track
  src="https://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt"
  srclang="en"
  kind="subtitles"
  label="English"
/>

track 元素属性说明：

src：指定资源 url。
srclang：资源的语言，例如：中文 zh，英文 en。
kind：默认值是 subtitles 字幕，captions 标题、音效及其他音频信息，descriptions 视频的文本描述，chapters 章节导航，metadata 元数据。
label：选择字幕时候出现的文字。
default：default 指的是默认会显示的字幕。例如两个 <track> 元素，如果都没有 default 属性，那都不显示，需要用户手动调出。另外，default 只能出现在一个 <track> 元素上。

例子：

首先我们在终端中分别输入以下命令，获取所需字幕文件：

wget https://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt
wget https://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt

<body>
  <video
    src="https://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
    width="320"
    height="240"
    controls="controls"
  >
    你的浏览器不支持video元素
    <track
      src="video_ch.vtt"
      srclang="en"
      kind="subtitles"
      label="中文"
      default
    />
    <track src="video_en.vtt" srclang="en" kind="subtitles" label="English" />
  </video>
</body>

video_ch.vtt 中的内容为：

WEBVTT 00:00:01.000 --> 00:00:04.000 不准在课堂上打游戏 00:00:05.000 -->
00:00:09.000 好好学习，天天向上！

video_en.vtt 中的内容为：

WEBVTT 00:00:01.000 --> 00:00:04.000 Don't play games in class！ 00:00:05.000
--> 00:00:09.000 Study hard and make progress every day！

运行效果如下所示：

/images/HTML5Untitled37.png

通过上面的案例，我们了解了简单的视频制作以及为视频添加字幕和切换字幕。

音频介绍

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

音频格式和浏览器支持如下所示：

/images/HTML5Untitled38.png

例子：

<body>
  <audio controls="controls">
    <source
      src="https://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
      type="audio/ogg"
    />
    <source
      src="https://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
      type="audio/mpeg"
    />
    你的浏览器不支持audio元素
  </audio>
</body>

注：<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素，source 元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

<body>
  <audio
    src="https://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
    controls="controls"
  >
    你的浏览器不支持video元素
  </audio>
</body>

audio 标签的属性如下所示：

/images/HTML5Untitled39.png

拖放概述

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。

注：img元素和 a 元素（必须指定 href）默认允许拖放。

在 Terminal 中输入以下命令获取本节使用到的图片：

wget https://labfile.oss.aliyuncs.com/courses/1248/drag-image.png

图片的下载位置，请注意在后续 html 文件所在同目录下。

浏览器支持：

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

**注释：**在 Safari 5.1.2 中不支持拖放。

拖放使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #div1 {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 1px solid red;
      }
    </style>
    <script type="text/javascript">
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData('Text', ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData('Text');
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>

  <body>
    <p>请把图片拖放到矩形中：</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img
      id="drag1"
      src="drag-image.png"
      draggable="true"
      ondragstart="drag(event)"
    />
  </body>
</html>

运行效果为：

/images/HTML5Untitled40.png

下面将为大家一一介绍拖放是如何实现的。

确定是可拖动的

为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：

<img draggable="true" ondragstart="drag(event)" />

定义拖动数据

每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性（ DataTransfer 对象）也有管理拖动数据的方法。setData() 方法添加一个项目的拖拽数据，如下面的示例代码所示：

function drag(ev) {
  ev.dataTransfer.setData('Text', ev.target.id);
}

在这个例子中数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

定义一个放置区

ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,如下所示：

function allowDrop(ev) {
  ev.preventDefault();
}

进行放置

当放置被拖数据时，会发生 drop 事件。如下所示：

function drop(ev) {
  //调用 preventDefault() 来避免浏览器对数据的默认处理
  ev.preventDefault();
  //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  var data = ev.dataTransfer.getData('Text');
  //被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
  ev.target.appendChild(document.getElementById(data));
}

上面只是简单的讲解了一个图片拖放的案例，想要了解更多拖放的知识，请访问：MDN HTML 拖放 API

Web Storage 和文件上传

引言

Web Storage 有两种存储数据的新方法，HTML5 Web Storage 的使用可以提高网页的效率，在不影响网站性能的情况下可以存储大量数据。同时，HTML5 中提供了文件操作的 API，使我们不必再借助第三方插件进行文件模块的开发。

知识点

Web Storage 概述
localStorage 方法
sessionStorage 方法
HTML5 文件上传概述
如何实现文件上传
文件读取

HTML5 的存储特性解决了 Cookie 遗留下来的一些限制，可以带给用户更好的使用体验。HTML5 文件操作 API 的出现，使我们网页可以做到跨平台、跨浏览器应用，不再受限于第三方软件的限制。

Web Storage概述

早些时候，本地存储使用的是 cookie。但是 Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

HTML5 定义了本地存储规范 Web Storage，提供了两种存储类型 API：localStorage 和 sessionStorage。

先说说 cookie：

大小的限制：cookie 的大小被限制在 4KB。
带宽的限制：只要涉及 cookie 的请求，cookie 数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie 数据都会消耗网络的带宽。
cookie 会频繁的在网络中传送，而且数据在网络中是可见的，因此在不加密的情况下，是有安全风险的。

Web Storage 数据存储机制相比于 Cookie 有明显的优势：

存储空间的大小一般为 5~10MB，与具体浏览器有关。
存储内容仅仅存储在本地客户端，不会被发送到服务器。
提供了更丰富、更易用的接口、操作更方便。

localStorage 方法

特点：持久化的本地存储，除非主动手动删除，否则数据一直不会过期。

方法

1.设置

setItem(key,value) // 在本地客户端存储一个字符串类型的数据。
setItem.key=value //  也可以像这样直接存储。

保存数据：

localStorage.setItem(key, value);

保存添加数据例子：

//方法1向本地存储中添加一个名为name,值为"syl"的key-value对象
localStorage.setItem('name', 'syl');
//方法2
localStorage['price'] = 1314;
//方法3
localStorage.amount = 520;

注：使用 setItem 方法保存数据时，将第一个参数 key 指定为键名，将第二个参数 value 指定为键值，保存时不允许保存相同的键名，保存后可以修改键值，但不允许改键名（只能重新取键名，然后再保存键值）。

2.获取

getItem(key)      // 读取已存储在本地的数据，获取键值。
localStorage.key //  也可以像这样直接获取值。

读取数据：

localStorage.getItem(key);

注：使用 getItem 方法读取数据时，将参数指定为键名，返回键值。

3.删除

removeItem(key)       // 移除已存储在本地数据，通过键名作为参数删除数据。
localStorage.clear() //  也可以一次性清除

删除单个数据：

localStorage.removeItem(key);

注：通过 key 删除本地数据。

例子

<body>
  <h1>简单Web留言本</h1>
  <textarea id="memo" cols="60" rows="6"></textarea><br />
  <input type="button" value="新增留言" onclick="saveStorage('memo');" />
  <input type="button" value="清空数据" onclick="clearStorage();" />
  <input
    type="button"
    value="清空最后一个数据"
    onclick="clearsingleStorage();"
  />
  <hr />
  <p id="msg"></p>
  <script type="text/javascript">
    //savaStorage是一个新增留言的函数
    function saveStorage(id) {
      //获取textarea的value值
      var data = document.getElementById(id).value;
      //获取当前时间
      var time = new Date().toUTCString();
      //将当前时间作为键名，textarea的value值（也就是用户输入的值）的值作为键值
      localStorage.setItem(time, data);
      //显示留言
      showMsg('msg');
    }
    //showMsg是一个显示留言的函数
    function showMsg(id) {
      var result = '<table border="1">';
      //遍历本地储存数据
      for (var i = 0; i < localStorage.length; i++) {
        //获取key值
        var key = localStorage.key(i);

        //获取value值
        var value = localStorage.getItem(key);
        //显示数据
        result += '<tr><td>' + value + '</td><td>' + key + '</td></tr>';
      }
      result += '</table>';
      var target = document.getElementById(id);
      target.innerHTML = result;
    }
    //显示留言
    showMsg('msg');
    //clearStorage是一个清空留言的函数
    function clearStorage() {
      //清空数据
      localStorage.clear();
      //显示留言
      showMsg('msg');
    }
    //clearsingleStorage是一个删除单个数据的函数
    function clearsingleStorage() {
      localStorage.removeItem(localStorage.key(localStorage.length - 1));
      //显示留言
      showMsg('msg');
    }
  </script>
</body>

运行效果如下所示：

/images/HTML5Untitled41.png

sessionStorage 方法

直接关闭页面，再重新运行查看一下效果。

sessionStorage 方法将数据保存在 session 对象中，所谓 session 直译过来就是会话，再通俗一点讲就是指用户在浏览某个网站时，从进入网站到关闭浏览器的这段时间，session 对象可以用来保存在这段时间内所要求保存的任何数据。我们称之为会话级别的本地存储。

注：当浏览器窗口被关闭时，session 对象保存的数据会被删除。

sessionStorage 方法的使用与 localStorage 方法的使用类似，这里不在累赘：

例子：

<body>
  <script type="text/javascript">
    if (sessionStorage.pagecount) {
      sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    } else {
      sessionStorage.pagecount = 1;
    }
    document.write('你刷新了本页面 ' + sessionStorage.pagecount + ' 次');
  </script>

  <p>刷新页面看看效果。</p>

  <p>关闭浏览器再运行看看效果</p>
</body>

注：上面的案例 sessionStorage 改成 localStorage 也就可以简单的记录自己的网站的浏览人数了，当然这只是我们自己写简单网站，自己看自己浏览次数的使用方法。请大家自行尝试一下 sessionStorage 保存数据，读取数据，删除单个数据，清空数据的写法。

文件上传概述

在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列的操作。

实现文件上传

在 HTML4 标准中文件上传控件只接受一个文件，而在新标准中，只需要设置 multiple，就支持多文件上传。按住 Ctrl 或者 Shift 即可选择多个文件。

<input type="file" class="file" multiple />

获取文件信息

选中文件通过 HTMLInputElement.files 属性返回，返回值是一个 FileList 对象，这个对象是一个包含了许多 File 文件的列表。比如我们首先运行上面例子的代码，然后随便上传一个文件（这里上传的是一个名为 700.png 的图片），然后按 F12 进入控制台，输入代码:

file.files;

运行效果为：

/images/HTML5Untitled42.png

从运行效果我们可以看出每个 File 对象包含了以下信息：

lastModified 表示 UNIX timestamp 形式的最后修改时间。
lastModifiedDate 表示 Date 形式的最后修改时间。
name 表示文件名。只读字符串，只包含文件名称，不包含任何路径。
size 表示文件的字节大小，只读的 64 位整数。
type 表示文件的 MIME 类型。当类型不确定时为 “”。
webkitRelativePath 此处为空，当在 input 上加 webkitdirectory 属性时，用户可选择文件夹，此时 webkitRelativePath 表示文件夹中文件的相对路径。

注：FileList 对象由 DOM 提供，列出了所有用户选择的文件，每一个代表了一个 File 对象。你可以通过检查文件列表的 length 属性决定用户可以选则多少文件。各个 File 对象可以方便地通过访问文件列表来获取，像访问数组那样。

限制文件上传类型

如果我们需要限制用户上传文件的类型，比如某处我们只希望能够上传图片，那么我们可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。比如：

<!-- 表示只接受 png 图片 -->
accept="/images/HTML5png" 或 accept=".png"

<!-- 表示接受PNG/JPEG 文件. -->
accept="/images/HTML5png, /images/HTML5jpeg" 或 accept=".png, .jpg, .jpeg"

<!-- 表示接受任何图片文件类型. -->
accept="/images/HTML5*"

<!-- 表示接受任何 MS Doc 文件类型. -->
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

例子：

<form>
  <div>
    <label for="profile_pic">上传图片</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png"
    />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

文件读取

以上 File 对象只获取到了对文件的描述信息，但没有获得文件中的数据。HTML5 中提供了 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

首先创建一个 FileReader 实例：

var reader = new FileReader();

属性

FileReader.error 属性表示在读取文件时发生的错误，只读。语法为：

var error = instanceOfFileReader.error;

FileReader.readyState 属性表示 FileReader 状态的数字，只读。取值如下：

/images/HTML5Untitled43.png

语法为：

var state = instanceOfFileReader.readyState;

FileReader.result 属性表示文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作，只读。

事件处理

/images/HTML5Untitled44.png

方法

/images/HTML5Untitled45.png

我们常用的是上传一个图片并显示出来和上传文本显示文本，因为这里只对 FileReader.readAsDataURL() 和 FileReader.readAsText() 方法进行举例说明，想要了解更多的知识可以访问 MDN FileReader

请上传 .txt 、.jpg 、.png 文件。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>文件读取</title>
    <script type="text/javascript">
      //检查浏览器是否支持FileReader
      if (typeof FileReader == 'undified') {
        alert('您老的浏览器不行了！');
      }

      function showDataByURL() {
        var resultFile = document.getElementById('fileDemo').files[0];
        if (resultFile) {
          //创建一个 FileReader 实例
          var reader = new FileReader();
          //读取文件数据
          reader.readAsDataURL(resultFile);
          /*读取的过程就相当于 加载过程 */
          /*读取完毕  预览 */
          reader.onload = function (e) {
            var urlData = this.result;
            document.getElementById('result').innerHTML +=
              "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
          };
        }
      }

      function showDataByText() {
        var resultFile = document.getElementById('fileDemo').files[0];
        if (resultFile) {
          var reader = new FileReader();
          reader.readAsText(resultFile, 'gb2312');
          reader.onload = function (e) {
            var urlData = this.result;
            document.getElementById('result').innerHTML += urlData;
          };
        }
      }
    </script>
  </head>

  <body>
    <input type="file" name="fileDemo" id="fileDemo" multiple="multiple" />
    <input
      type="button"
      value="显示图片"
      id="readAsDataURL"
      onclick="showDataByURL();"
    />
    <input
      type="button"
      value="显示文本"
      id="readAsText"
      onclick="showDataByText();"
    />
    <div id="result"></div>
  </body>
</html>