HTML5 简介

HTML5 不仅是定义 HTML 标准的最新的版本，还是一系列用来制作现代富web内容的相关技术总称。

HTML5 具有新的元素，属性和行为，并具有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。

HTML5 及其相关技术是作为一系列小型标准而制定的甚至为某些技术进行了高度的细化，其标准内容设计为所有Open Web开发人员都可以使用，但是这样做的弊端是难以全面掌握指定的各个标准情况并且部分标准还存在一些歧义，导致浏览器中表现不一致。

我们将根据HTML5功能分为以下8大类：

  • 语义：开发者可以更细致的描述文档结构，提高文档的可读性与对搜索引擎的友好。
  • 通信：能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
  • 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备访问：能够处理各种输入和输出设备。
  • CSS3: 让作者们来创作更加复杂的主题吧！

新增语义标签

概念：HTML5 引入了新的HTML元素，通过使用标准语义去描述web文档的结构，使得文档更精确，提高SEO性能与用户体验。

  • <header>(常用)：标签定义文档的页眉（介绍信息）。
  • <main>： 标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
  • <footer>(常用)：标签定义文档或节的页脚，通常包含版权或法律声明，有时还包含一些链接。在部分的情况下，页脚可能包含切片内容的发布日期，许可证信息等。<article>，<section>，<aside>，和<nav>可以有自己的<footer>。尽管有页脚的名称，页脚也不一定位于页面或节的末尾。
  • <section>(常用)：标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分根据语义进行相关分组。
  • <article>(常用)：标签规定独立的自包含内容。它不单指主要内容，还可以用于注释和小部件。该标签常用环境：论坛帖子、报纸文章、博客条目、用户评论。
  • <nav>(常用)：包含经常出现在网站上的导航链接。导航可以具有主菜单和辅助菜单，但是不能将一个<nav>元素嵌套在另一个 <nav>元素中。
  • <aside>(常用)：元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
  • <hgroup>(常用)： 代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起。
1
2
3
4
5
<hgroup>
    <h1>HTML</h1>
    <h2>HTML5标准 — Last Updated 12 August 2020</h2>
</hgroup>
<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
  • <figure>(常用)： 标签规定独立的流内容（图像、图表、照片、代码等等）。 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元
  • <figcation>(常用)： 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。该标签在<figure>块里是第一个或最后一个。并且该元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
1
2
3
4
5
<figure>
    <img src="/src/images/cat.jpg"
         alt="一只正在睡觉的猫">
    <figcaption>一只正在睡觉的猫</figcaption>
</figure>
  • <time>(常用)： 用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。此元素内必须包含一个机器可读的格式表示日期或时间，有安排日程表功能的应用可以利用这一点。
1
2
<p>The concert starts at <time>20:00</time>.</p>
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
  • <mark>：标记文本元素，该标签代表突出显示的文字，例如可以为了标记特定上下文中的文本而使用这个标签。 举个例子，它可以用来显示搜索引擎搜索后关键词。

注意： 不要把 <mark> 元素和 <strong> 元素搞混淆；<strong> 元素用来表示文本在上下文的重要性的， 而 <mark> 元素是用来表示上下文的关联性的。

  • <data>：元素将一个指定内容和机器可读的翻译(例商品的编码)联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 <time>。
1
2
3
4
5
6
<p>新产品</p>
<ul>
    <li><data value="0100398">迷你安格斯牛排堡</data></li>
    <li><data value="0100399">巨无安格斯牛排堡</data></li>
    <li><data value="0100400">三层巨无霸安格斯牛排堡</data></li>
</ul>
  • <progress>：元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
1
<progress id="file" max="100" value="70"> 70% </progress>
  • <meter>：元素用来显示已知范围的标量值或者分数值。
1
2
<p>加热烤箱至 <meter min="200" max="500"
                value="350">350 度</meter>.</p>

HTML5改进标签

表单

概念：在 HTML5 中对 web 表单进行了部分改进，增加了一些新的属性，一些新的<input>元素type 属性值，新的表单元素以及强制校验API。

新增属性：

属性名 描述
autocomplete input元素，用于表单的自动填充功能
autofocus input元素,页面加载时自动聚焦到此表单控件
form input元素,将控件和一个form元素联系在一起
formaction 当input元素type为image, submit时，用于提交表单的URL
formenctype 当input元素type为image, submit时，表单数据集的编码方式，用于表单提交
formmethod 当input元素type为image, submit时，用于表单提交的HTTP方法
formnovalidate 当input元素type为image, submit时，提交表单时绕过对表单控件的验证
formtarget 当input元素type为image, submit时，表单提交的浏览上下文
height 和 width 当input元素type为image时，设置元素的宽高
list 绝大部分input元素,自动填充选项的 <datalist> 的id值
min 和 max 当input元素type为number时，当前数字表单元素可以输入的最小最大值
multiple 当input元素type为email, file时。是否允许多个值(布尔值)
pattern (regexp) 当input元素type为password, text, tel，匹配有效 value 的模式（pattern）
placeholder 当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容
required 绝大部分input元素,表示此值为必填项或者提交表单前必须先检查该值(布尔值)
step 当input元素type为number时，当前数字表单元素有效的递增值
novalidate from元素关闭浏览器的自动校验，这允许我们使用脚本控制表单校验。

新增type：

类型名 属性值
color 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。
time 于输入时间的控件，不包括时区。
week 用于输入以年和周数组成的日期，不带时区。
datetime 于输入时间的控件，不包括时区。
datetime-local 输入日期和时间的控件，使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。(目前支持的浏览器为数不多)
email 编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。
month 输入年和月的控件，不带时区。
number 只能输入数字的输入框。
range 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用min 和 max来规定值的范围。
search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
tel 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
url 用于输入 URL 的控件。类似 text 输入，在支持的浏览器上会有URL的规则验证提示，在支持动态键盘的设备上有相应的键盘。

表单校验：

介绍：当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。

概念：HTML5提供一个新功能可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的。这些属性可以让你定义一些规则，用于限定用户的输入，如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。

当一个元素校验通过时：

该元素将可以通过 CSS 伪类 :valid 进行特殊的样式化；

如果用户尝试提交表单，如果没有其它的控制来阻止该操作（比如JavaScript即可阻止提交），那么该表单的数据会被提交。

如果一个元素未校验通过：

该元素将可以通过 CSS 伪类 :invalid 进行特殊的样式化；

如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交。

表单校检相关属性:

  • required 属性，限制表单为必填
1
2
3
4
<form>
    <input id="username" name="username" required>
    <button>Submit</button>
</form>
  • minlength 属性和 maxlength 属性，限制输入的长度。 min 和 max 属性，限制输入的数字大小
1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
    <div>
        <label for="username">请输入你的用户名?</label>
        <input id="username" name="username" required minlength="2" maxlength="8">
    </div>
    <div>
        <label for="number">你的年龄?</label>
        <input type="number" id="age" name="age" value="19" min="1" max="99">
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>
  • pattern 属性, 使用正则表达式作为属性值可以用来对表单的内容进行校检
1
2
3
4
5
6
<!--密码长度7-14位，必须以大写字母开头，后面允许输入数字字母下划线和。 -->
<form>
  <label for="psd">请输入密码</label>
  <input id="psd" name="psd" required pattern="^[A-Z][0-9a-zA-Z_/.]{6,13}$">
  <button>Submit</button>
</form>
  • 自定义错误信息，每次我们提交无效的表单数据时， 浏览器总会显示错误信息。 但是显示的信息取决于你所使用的浏览器（不同浏览器表现不一致）。

注意：

  1. 要自定义这些消息的外观和文本，你必须使用 JavaScript； 不能使用 HTML 和 CSS 来改变。 HTML5 提供 constraint validation API 来检测和自定义表单元素的状态。 除此之外，他可以改变错误信息的文本。
  2. 越来越多的浏览器支持限制校验API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：<button>, <input>,<fieldset>,<output>,<select>,<textarea>

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
    <label for="psd">请输入密码</label>
    <input id="psd" name="psd" required pattern="^[A-Z][0-9a-zA-Z_/.]{6,13}$">
    <button>Submit</button>
</form>

<script>
    var psd = document.getElementById("psd");

    psd.addEventListener("input", function (event) {
        if (psd.validity.patternMismatch) {
            psd.setCustomValidity("密码为7到14位必须以大写字母开头只支持数字字母_.请核对格式后认真输入！");
        } else {
            psd.setCustomValidity("");
        }
    });
</script>
  1. 约束校验的 API 的属性
属性 描述
validationMessage 一个本地化消息，描述元素不满足校验条件时（如果有的话）的文本信息。如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串。
validity 一个 ValidityState 对象，描述元素的验证状态。
validity.customError 如果元素设置了自定义错误，返回 true ；否则返回false。
validity.patternMismatch 如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeOverflow 如果元素的值高于所设置的最大值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeUnderflow 如果元素的值低于所设置的最小值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.stepMismatch 如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.tooLong 如果元素的值超过所设置的最大长度，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.typeMismatch 如果元素的值出现语法错误，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.valid 如果元素的值不存在校验问题，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :valid CSS 伪类，否则命中 :invalid CSS 伪类。
validity.valueMissing 如果元素设置了 required 属性且值为空，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
willValidate 如果元素在表单提交时将被校验，返回 true，否则返回 false。 
1
2
3
4
5
6
7
8
9
10
11
12
13
ValidityState = {
    badInput: Boolean, // 只读 true 表示用户提供了浏览器不能转换的输入。 如 number表单输入了中文
    customError: Boolean, // 只读 
    patternMismatch: Boolean, // 只读
    rangeOverflow: Boolean, // 只读
    rangeUnderflow: Boolean, // 只读
    stepMismatch: Boolean, // 只读
    tooLong: Boolean, // 只读
    tooShort: Boolean, // 只读
    typeMismatch: Boolean, // 只读
    valid: Boolean, // 只读
    valueMissing: Boolean // 只读
}
  1. 约束校验 API 的方法
方法 描述
checkValidity() 如果元素的值校验合法，返回 true，否则返回 false。如果元素校验失败，此方法会触发invalid 事件。
HTMLFormElement.reportValidity() 如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时, 对每个无效元素可撤销 invalid 事件会被唤起并且校验错误会报告给用户 。
setCustomValidity(message) 为元素添加一个自定义的错误消息；如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。这些自定义信息将在向用户报告错误时显示。如果参数为空，则清空自定义错误。

新增表单元素：

  • <output>：标签表示计算或用户操作的结果。

output 元素的属性：

  • for： 以空格分隔的其他元素列表id，其它影响计算结果的标签的ID，可以多个。。
  • form： 与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。
  • name： 元素的名称
1
2
3
4
5
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" name="a" value="50" /> +
    <input type="number" id="b" name="b" value="10" /> =
    <output name="x" for="a b"></output>
</form>
  • <fieldset>： 元素用于对表单中的控制元素进行分组（也包括 label 元素）

fieldset 元素的属性：

  • disabled： 如果设置了这个 bool 值属性, <fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，
  • form： 将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。
  • name： 元素分组的名称
  • <legend>: 元素为 <fieldset> 元素定义标题（caption）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <fieldset>
    <legend>选择你最喜欢吃的水果</legend>

    <input type="radio" id="apple" name="fruits">
    <label for="apple"> 苹果 </label><br/>

    <input type="radio" id="cherry" name="fruits">
    <label for="cherry"> 樱桃 </label><br/>

    <input type="radio" id="banana" name="fruits">
    <label for="banana"> 香蕉 </label>
  </fieldset>
</form>

新增属性data-*

介绍：data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

概念：自定义数据属性都可以通过所属元素的DOM接口来访问。 HTMLElement.dataset 属性可以访问它们。 * 可以使用遵循 xml名称生产规则 的任何名称来被替换，并具有以下限制：

  1. 该名称不能以xml开头，无论这些字母是大写还是小写。
  2. 该名称不能包含任何分号 (U+003A)。
  3. 该名称不能包含A至Z的大写字母。

自定义属性名只可以包含字母，数字和下面的字符： dash (-), dot (.), colon ( : ), underscore (_)。此外不应包含ASCII 码大写字母。

1
2
3
4
5
<ul>
    <li data-version-date="v1-2020" data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
    <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
    <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>

HTMLElement.dataset：属性允许访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

注意：dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据自定义属性。

dataset方法会将自定义的data 属性名称转化成 DOMStringMap 的键值时会遵循下面的规则：

  1. 前缀 data- 被去除(包括减号)；
  2. 对于每个在ASCII小写字母 a到 z前面的减号 (U+002D)，减号会被去除，并且字母会转变成对应的大写字母(驼峰命名法)。
  3. 其他字符（包含其他减号）都不发生变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

<script>
var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 给元素添加一个新的自定义属性
el.dataset.someDataAttr = 'mydata';

</script>

自定义属性同样可以通过setAttribute()与getAttribute()操作

存储

数据持久化 DOM存储

介绍：DOM存储的机制是通过存储字符串类型的键/值对，来提供一种安全的存取方式。HTML5提供了两个全局对象（window 对象的属性）localStorage、SessionStorage实现DOM存储

概念：通过全局对象（localStorage、SessionStorage）访问本地存储功能时。该属性会返回一个 Storage 对象，Storage对象的接口属性方法如下

1
2
3
4
5
6
7
8
interface Storage {
    length: Number, // 只读属性
        key(index),  // 获取指定索引对应的key名
        getItem(key), // 获取指定key名对应的value值
        setItem(key, value), // 添加、修改一个指定key名的键值对值为value
        removeItem(key), // 移除指定key名对应的键值对
        clear() // 移除所有键值对
}

注意：Storage对象中使用键值对存储数据时，key与value必须是字符串且key名唯一（如果key名冲突新的键值对会覆盖旧的键值对）。

需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 .toString 方法被转换成字符串。所以一个普通对象将会被存储为 “[object Object]”，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。

兼容性: Storage 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。

  • sessionStorage
    概念：sessionStorage（会话存储）是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器会话窗口不关闭，页面会话周期就会一直持续。即使页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 保存数据到当前会话的存储空间
sessionStorage.setItem("username", "John");

// 访问数据
var item = sessionStorage.getItem("username");

// 获取对应index的key
var key = sessionStorage.key(2)

// 删除指定数据
sessionStorage.removeItem(key)

// 清除所有当前会话存储的数据
sessionStorage.clear()
  • localStorage

概念：localStorage(本地存储) 与会话存储的工作方式很接近，不同之处在于它将数据存储在本地浏览器中持久储存。

当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 保存数据到当本地的存储空间
localStorage.setItem("username", "John");

// 访问数据
var item = localStorage.getItem("username");

// 获取对应index的key
var key = localStorage.key(2)

// 删除指定数据
localStorage.removeItem(key)

// 清除所有当前会话存储的数据
localStorage.clear()

面试题 sessionStorage、locaStorage、cookie的区别

  1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  2. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
  3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
  4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
  5. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
  6. web Storage的api接口使用更方便

多媒体

介绍：在HTML 5之前，要在网页上展示音频、视频、动画，除了使用第三方播放器以外，使用最多的是Adobe Flash插件。Flash插件在浏览器中不但需要经常更新还会出现一些问题导致机器锁死。HTML5的出现使得浏览器支持直接播放视频和音频文件，提供了音频视频的标准接口而无需安装插件。

视频

概念：HTML5允许你使用<video>元素在网页中嵌入视频内容。

1
2
3
<video src="https://f.video.weibocdn.com/003eXQhUgx07IsUtjXeM010412037ODj0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&trans_finger=0bde055d9aa01b9f6bc04ccac8f0b471&media_id=4577795490119695&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3370-g1,1493-g0,1192-g0,1191-g0,1046-g2,1258-g0&Expires=1607049593&ssig=4cByzMWZP3&KID=unistore,video" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="https://f.video.weibocdn.com/003eXQhUgx07IsUtjXeM010412037ODj0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&trans_finger=0bde055d9aa01b9f6bc04ccac8f0b471&media_id=4577795490119695&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3370-g1,1493-g0,1192-g0,1191-g0,1046-g2,1258-g0&Expires=1607049593&ssig=4cByzMWZP3&KID=unistore,video">此链接</a>观看</p>
</video>

属性：以下是 <video> 元素支持的属性：

  • controls： 设置是否显示浏览器标准控制器
  • autoplay： 是否在视频/音频加载完成后自动播放
  • src： 视频音频文件路径 只加载 媒体元数据(媒体字节数,第一帧,播放列表,持续时间)
  • preload： 音频视频是否预加载 auto 加载全部视频音频
  • poster(video元素独有)： 视频不可用,第一次加载完成没有播放时,将会在空白区域展示该属性指向的图片
  • loop： 循环播放
  • height width (video元素独有)： 设置视频的宽度高度
  • muted： 这个属性会导致媒体播放时，默认关闭声音。
1
2
<video muted="muted" controls="controls" width="375" height="200" src="https://overwatch.nosdn.127.net/1/assets/img/pages/home/anniversary/header.webm"  autoplay="autoplay" loop="loop" poster="https://overwatch.nosdn.127.net/1/assets/img/pages/home/header-video-poster.jpg">
</video>

使用多个播放源以提高兼容性

介绍：不同的浏览器之间并不全支持相同的媒体文件格式，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。例如:

  • WebM 格式文件通常包括了 Opus 或 Vorbis 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持，除了他们的老版本。
  • MP4 格式文件通常包括 AAC 以及 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持，还有 Internet Explorer。
  • Ogg 格式文件往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。

概念：通过在<video>标签中将 src 属性移除，转而将它放在 <video> 内部几个单独的标签 <source> 当中。浏览器将会检查 <source> 标签，并且播放第一个浏览器自身支持的媒体文件，一般我们推荐视频源中应当包含WebM和MP4两种格式（这两种格式目前已经支持绝大多数平台和浏览器）

<source> 标签包含两个属性

  1. src 音视频文件的路径
  2. type （可选属性）表示音视频文件的 MIME 类型，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
1
2
3
4
5
<video muted="muted" width="375" height="200"  src="https://overwatch.nosdn.127.net/1/assets/img/pages/home/anniversary/header.webm"  autoplay="autoplay" loop="loop" poster="https://overwatch.nosdn.127.net/1/assets/img/pages/home/header-video-poster.jpg">
      <source src="https://overwatch.nosdn.127.net/1/assets/img/pages/home/anniversary/header.webm" type="video/webm">
      <source src="https://overwatch.nosdn.127.net/1/assets/img/pages/home/anniversary/header.mp4" type="video/mp4">
      <p>你的浏览器不支持 HTML5 视频。请更换浏览器</p>
</video>

音频

概念：HTML5允许你使用<audio>元素在网页中嵌入音频。 <audio>与<video>标签使用方式完全相同，只有一些细微差别。

1
2
3
4
5
<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

属性：音频播放器没有视觉部件 — 你只需要显示出能控制音频播放的控件。以下是 <audio> 元素支持的属性：

  • controls： 设置是否显示浏览器标准控制器
  • autoplay： 是否在视频/音频加载完成后自动播放
  • src： 视频音频文件路径 只加载 媒体元数据(媒体字节数,第一帧,播放列表,持续时间)
  • preload： 音频视频是否预加载 auto 加载全部视频音频
  • loop： 循环播放
  • muted： 这个属性会导致媒体播放时，默认关闭声音。

编程式多媒体

获取媒体信息
介绍：多媒体元素除了上述可以在HTML中指定的属性外，还支持一些其他可以通过js读写的属性

  • error(只读): 表示最近的错误，如果没有错误则值为 null。
  • networkState: 媒体数据加载过程中,媒体元素networkState得到当前网络状态
    • 0: 元素处于初始状态
    • 1: 浏览器已经选择好用什么编码格式来播放媒体,未建立网络连接
    • 2: 媒体数据加载中
    • 3: 没有支持的编码格式,不执行加载
  • currentSrc (只读) 读取媒体元素 播放中的数据URL地址
  • currentTime 用来获取、设置多媒体当前播放时间
  • buffered(只读) 媒体元素通过该属性返回一个对象,这个对象实现TimeRanges接口,确认浏览器是否已缓存媒体数据
1
2
3
4
TimeRanges表示一个时间的范围,大多数情况下是一个单一的以0开始的范围,
如果浏览器发出rang requests请求,这时TimeRanges 会有多个事件范围
TimeRanges对象具有一个length属性,表示有多少个时间范围,
该对象存在两个方法 TimeRanges.start(index)(从什么时间开始缓存)  TimeRanges.end(index)(从什么时间结束缓存)
  • readyState(只读) 媒体元素播放当前位置 就绪状态
    • 0: 没有获取到媒体的任何信息
    • 1: 已获取到了足够的媒体数据,但是当前播放位置没有有效媒体数据(获取到的媒体数据无效)
    • 2: 当前播放位置已经有数据可以播放,但是没有获取到让播放器前进的数据(当前播放的时缓冲的最后一帧)
    • 3: 当前播放位置已经有数据可以播放,页获取到让播放器前进的数据
    • 4:当前播放位置已经有数据可以播放,页获取到让播放器前进的数据,而且浏览器确认媒体数据以一种速度进行加载(保证后面的数据可以持续进行播放)
  • volume 表示音频的音量。值从0.0（静音）到1.0（最大音量）。
  • defaultPlaybackRate 控制媒体的默认播放速度。1.0表示正常的播放速度，如果值小于1.0，则播放速度会比”正常速度“慢，如果值大于1.0，则播放速度会比”正常速度“快。0.0是一个无效的值，并且会抛出 NOT_SUPPORTED_ERR 错误。
  • playbackRate 控制媒体当前的播放速度。1.0表示正常的播放速度，如果值小于1.0，则播放速度会比”正常速度“慢，如果值大于1.0，则播放速度会比”正常速度“快。
  • duration(只读) 媒体以秒为单位的总长度时间，如果媒体不可用，则为0. 如果媒体可用，但时间长度未知, 值为NAN.

控制媒体播放

  • canPlayType(in DOMString type) 方法浏览器是否能播放指定的音频/视频类型。方法可返回下列值之一：
    1. “probably” - 浏览器最可能支持该音频/视频类型
    2. “maybe” - 浏览器也许支持该音频/视频类型,只有播放了才知道能不能播放
    3. “” - （空字符串）浏览器不支持该音频/视频类型
1
2
3
4
5
6
7
myVid=document.createElement('video');
// 检测视频/音频
isSupp=myVid.canPlayType('video/webm');
console.log(isSupp)
// 检测视频/音频,和解编码器，如果包含解编码器不会返回maybe
isSupp=myVid.canPlayType('video/webm; codecs="vp8.0, vorbis"');
console.log(isSupp)
  • load() 方法重新加载音频/视频元素。方法用于在更改来源或其他设置后对音频/视频元素进行更新。
  • pause() 暂停播放
  • play() 开始播放。

媒体事件处理

  • loadstart 浏览器在网上寻找媒体数据
  • progress 浏览器正在获取媒体数据
  • suspend 浏览器暂停获取媒体数据,但是下载过程并没有正常结束
  • abort 浏览器在下载完全部媒体数据之前终止数据获取(但是并不是由错误引起)
  • error 获取媒体数据过程中出错
  • emptied 媒体元素所在网络突然变成未初始化状态(载入媒体过程中突然发生致命错误或者浏览器正选择播放格式时,又调用了load方法)
  • stalled 浏览器尝试获取媒体数据失败
  • play 即将开始播放,执行了play方法时触发
  • pause 播放暂停,执行了pause方法
  • loadedmetadata 浏览器获取完媒体的时长和字节数
  • loadeddata 浏览器已加载完毕当前播放位置的媒体数据,准备播放
  • waiting 浏览器得不到下一帧而暂停播放,但很快能得到下一帧
  • playing 正在播放(只执行一次)
  • canplay 浏览器能够播放数据,但是播放期间需要缓冲
  • canplaythrough 浏览器能够播放数据,播放期间不需要缓冲
  • seeking 浏览器正在请求数据
  • seeked 浏览器停止请求数据
  • ended 播放结束后停止播放
  • ratechange 默认播放速率(defaultpalybackRate),当前播放速率(palybackRate)发生改变
  • durationchange 播放时长被改变
  • volumechange 音量被改变或者静音状态改变
  • timeupdate 当前播放位置被改变，可能是播放中自然改变，也可能人为拖拽进度条改变等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<video id="video" controls preload="metadata" poster="server/下载.jpg" autoplay loop>
    <source src="http://qncdn.miaopai.com/stream/NKOc-R~B4hf~klqqJ7Ix6fIGFraJnvDxyPfdWQ___0_1502864324.mp4?ssig=248461eb48ca1ff86e911529bec2ee39&time_stamp=1502877154402" type="video/mp4">
</video>

<script>
    var video = document.getElementById('video');
    video.addEventListener('progress',function(){
        var timeRanges   =   video.buffered;

        var networkState = video.networkState;
        console.log(timeRanges,timeRanges.start(1))
    })
    video.addEventListener('error',function(){
        var error = video.error;
        switch (error.code){
            case 1:
                alert('视频的下载过程被终止');
                break;
            case 2:
                alert('网络发生故障,视频的下载过程被终止');
                break;
            case 3:
                alert('解码失败');
                break;
            case 4:
                alert('不支持播放的视频格式')
                break;
        }
    },false)
</script>

性能

Web Workers

介绍：Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。通过将耗时较长的处理交给后台线程运行，从而解决页面因长耗时js处理导致页面被阻塞的问题。

概念：HTML5 提供了一个 Worker 构造函数，通过该构造函数新建 Worker 对象并将需要交给后台线程处理的脚本文件 URL 传递给该对象，指定URL脚本文件就会在后台线程中执行了。

注意：workers 运行在另一个全局上下文中,不同于当前的window. 因此，在 Worker 内通过 window获取全局作用域将返回错误。

1
2
3
4
5
6
// 检测当前浏览器是否支持Worker API
if(window.Worker) {

    var myWorker = new Worker('worker1.js')

}

Worker中的消息接受与发送

  • postMessage(data) 消息发送：通过该方法可以使得worker实例对象与后台线程的脚本文件互相发送消息
1
2
3
4
5
6
// myWorker向后台线程脚本发送消息 100
myWorker.postMessage(100)

// worker1.js
// 后台线程脚本向主线程Worker实例对象发送消息 'hello world'
postMessage('hello world')
  • onmessage 接收消息：worker实例对象与后台线程的脚本文件可以通过该事件方法接受对方通过 postMessage 发送的消息。
1
2
3
4
5
6
7
8
9
10
myWorker.onmessage = function(evt) {
    console.log('收到后台发送过来的消息', evt.data)
}

// worker1.js
onmessage = function(evt) {
   // 收到主线程 Worker 实例对象发送过来的数据
   var msg = evt.data
   
}

「练习」

使用web worker实现后台计算数字累加功能

worker练习.gif

要求：

  1. 页面中包含一个 type=“number” 的 input 表单元素，用户可以在该表单中输入任意数字
  2. 页面包含一个”计算累加”的 button 按钮，当button按钮被点击是，如果 input 值合法将该值发送到后台工作线程中
  3. 后台工作线程接收到Worker发送的数字后开始从1循环累加到接收到的数字。累加完毕将累加结果发送回主线程
  4. 主线程接受到结果后渲染到页面上