9. 框架`<iframe>`

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。src 指定要显示的界面

标签	说明
iframe	定义一个内联的iframe

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

属性	值	描述
align	left：向左对齐 iframe。 right：向右对齐 iframe。 middle：居中对齐 iframe。 top：在顶部对齐 iframe。 bottom：在底部对齐 iframe。	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐。
frameborder	1：显示 0：不显示	HTML5 不支持。规定是否显示周围的边框。
height	`px`	规定的高度。
longdesc	URL	HTML5 不支持。规定一个页面，该页面包含了有关的较长描述。
marginheight	`px`	HTML5 不支持。规定的顶部和底部的边距。
marginwidth	`px`	HTML5 不支持。规定的左侧和右侧的边距。
name	name	规定的名称。
sandbox	""：启用所有限制条件 allow-same-origin：允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。 allow-top-navigation：嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。 allow-forms：允许表单提交。 allow-scripts：允许脚本执行。	对的内容定义一系列额外的限制。
scrolling	auto：在需要的情况下出现滚动条（默认值）。 yes：始终显示滚动条（即使不需要）。 no：从不显示滚动条（即使需要）。	HTML5 不支持。规定是否在中显示滚动条。
seamless		规定看起来像是父文档中的一部分。
src	URL	规定在中显示的文档的 URL。
srcdoc	html的代码，显示在iframe标签内	规定页面中的 HTML 内容显示在中。
width	`px`	规定的宽度。

10. 表单和输入

表单用于收集用户的输入信息，将用户收集到的信息发送到 Web 服务器。

标签	描述
`<form>`	定义供用户输入的表单
`<label>`	定义了 `<input>` 元素的标签，一般为输入标题
`<input>`	输入框
`<textarea>`	文本域 (一个多行的输入控件)
`<fieldset>`	可以将表单内的相关元素分组，会在相关表单元素周围绘制边框
`<legend>`	定义了 `<fieldset>` 元素的标题
`<select>`	下拉选项列表
`<datalist>`	与输出框配合，指定输入控件选项列表，输入框可有下拉列表项
`<option>`	下拉列表中的选项
`<optgroup>`	选项组
`<button>`	按钮
`<output>`	可以与输入框参运算显示计算结果

10.1 表单`<form>`

表单最外层的元素，需要与后台进行数据交互用到

<form action="demo_form.php" method="get">
  
  <label for="male">Male</label><input type="radio" name="sex" id="male" value="male"><br>

  <label for="female">Female</label><input type="radio" name="sex" id="female" value="female"><br><br>

  <input type="submit" value="提交">
</form>

属性	值	描述
accept	IANA MIME 类型	HTML5 不支持。规定服务器接收到的文件的类型。可以设置多个使用逗号分隔。（文件是通过文件上传提交的）
accept-charset	常用值： UTF-8-Unicode：字符编码 ISO-8859-1：拉丁字母表的字符编码	规定服务器可处理的表单数据字符集。
action	URL地址	规定当提交表单时向何处发送表单数据。
autocomplete	on：默认。规定启用自动完成功能。 off：规定禁用自动完成功能。	规定是否启用表单的自动填充功能，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
enctype	application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。 multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 text/plain：将空格转换为 "+" 符号，但不编码特殊字符。	向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）相当于在请求头上面加上Context-Type
method	get \| post	规定用于发送表单数据的 HTTP 方法。
name	字符串	规定表单的名称。
novalidate		如果使用该属性，则提交表单时不进行验证。
target	_blank：在新窗口/选项卡中打开。 _self：在同一框架中打开。（默认） _parent：在父框架中打开。 _top：在整个窗口中打开。 framename：在指定的 iframe 中打开。	规定在何处打开 action URL。

10.2 输入框`<input>`

效果：

1:
2:
3:
4:

代码：

<form action="demo-form.php">
    1: <input type="text" name="FirstName" value="text"><br>
    2: <input type="button" value="button" ><br>
    3: <input type="color" ><br>
    4: <input type="range" ><br>
    <input type="submit" value="提交">
</form>

属性：

属性	值	描述
accept	audio/：接受所有的声音文件。 video/：接受所有的视频文件。 image/*：接受所有的图像文件。 IANA MIME 类型	文件上传来提交的文件的类型。 (只针对type="file")
align	left:左对齐图像（默认）。 right:右对齐对象。 top:上对齐图像。 middle:居中对齐图像。 bottom:下对齐图像。	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	字符串	在网速慢的情况下，图像没有加载时。使用的替代文本。 (只针对type="image")
autocomplete	on：默认。规定启用自动完成功能。 off：规定禁用自动完成功能。	表单自动填充，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
autofocus		自动获得焦点
checked		预先选定的元素。 (只针对 type="checkbox" 或者 type="radio")
disabled		禁用
form	form_id	form 属性规定元素所属的一个或多个表单。
formaction	URL	当点击设置了该值的按钮时不跳转form指定的src，而在跳转指定URL(只针对 type="submit" 和 type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	当点击设置了该值的按钮时请求头加入Context-Type的指定值(只适合 type="submit" 和 type="image")。
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidate		formnovalidate 属性覆盖元素的 novalidate 属性。提交表单时不进行验证
formtarget	_blank：在新窗口/选项卡中打开。 _self：在同一框架中打开。（默认） _parent：在父框架中打开。 _top：在整个窗口中打开。 framename：在指定的 iframe 中打开。	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
height	px	规定元素的高度。(只针对type="image")
list	datalist_id	属性引用元素，元素有了下拉框功能，下拉数据来自于指定的datalist标签。
max	number:数字值。规定输入字段允许的最大值。 date:日期(2000-01-02)。规定输入字段允许的最大值。	最大值。时间格式个数字
min	number:数字值。规定输入字段允许的最大值。 date:日期(2000-01-02)。规定输入字段允许的最大值。	最小值。
maxlength	number	允许的最大字符数。
multiple		允许用户输入到元素的多个值。
name	字符串	name 属性规定元素的名称。
pattern	regexp	pattern 属性规定用于验证元素的值的正则表达式。
placeholder	字符串	未填写值的提示信息
readonly		字段只读
required		必填
size	number	字符数计的可见宽度
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
step	number	合法数字间隔，如果 step="3"，则合法数字应该是 -3、0、3、6，以此类推
type	button：按钮 checkbox：复选框 color：拾色器。 date： date 控件（包括年、月、日，不包括时间）。 datetime： date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 datetime-local： date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区） email：用于 e-mail 地址的字段 file：文件选择字段和 "浏览..." 按钮，供文件上传 hidden：隐藏输入字段。 image：图像作为提交按钮。 month： month 和 year 控件（不带时区）。 number：用于输入数字的字段。 password：密码字段（字段中的字符会被遮蔽）。 radio：单选按钮。 range：用于精确值不重要的输入数字的控件（比如 slider 控件）。 reset：重置按钮（重置所有的表单值为默认值）。 search：用于输入搜索字符串的文本字段。 submit：提交按钮。 tel：用于输入电话号码的字段。 text：默认。（默认宽度为 20 个字符） time：用于输入时间的控件（不带时区）。 url：用于输入 URL 的字段。 week： week 和 year 控件（不带时区）。	显示的元素的类型。不同类型展示不同
value	字符串	指定元素 value 的值。
width	px	宽度。 (只针对type="image")

10.3 文本框`<textarea>`

效果

我是一个文本框。

代码

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

属性

属性	值	描述
autofocus		当页面加载时，文本区域自动获得焦点
cols	number	文本区域内可见的宽度
disabled		禁用文本区域
form	form_id	文本区域所属的一个或多个表单。以空格分隔
maxlength	number	文本区域允许的最大字符数。
name	text	文本区域的名称。
placeholder	text	一个简短的提示，描述文本区域期望的输入值。
readonly		只读。
required	required	必填
rows	number	可见的行数
wrap	soft：默认，在到达元素最大宽度的时候，换行显示，但不会自动插入换行符，也就是提交表单时没有换行符。 hard：在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF)。也就是提交表单时也提交来换行符。当使用 "hard" 时，需要指定 cols 属性。	当提交表单时，文本区域中的文本应该怎样换行

10.4 标签`<lable>`

属性	值	描述
for	元素ID	规定 label 与哪个表单元素绑定
form	form_id	label 字段所属的一个或多个表单

10.4 元素分组`<fieldset>`

在相关表单元素周围绘制边框

效果

分组1: Name:
Age:

分组2: Email:
Date of birth:

代码

<form>
  <fieldset>
    <legend>分组1:</legend>
    Name: <input type="text"><br>
    Age: <input type="number"><br>
  </fieldset>
  <p></p>
  <fieldset>
    <legend>分组1:</legend>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

属性

属性	值	描述
disabled		该组中的表单元素被禁用。
form	form_id	fieldset 所属的一个或多个表单。
name	text	fieldset 的名称。

<legend> 元素帮助该元素定义标题。需配合使用

属性	值	描述
align	left：对标题进行左对齐（默认） right：对标题进行右对齐 top：对标题进行上对齐 bottom：对标题进行下对齐	HTML5 不支持。 HTML 4.01 已废弃。不建议使用。请使用样式代替。为 fieldset 中的标题定义对齐方式。

10.5 下拉列表`<select>` `<option>`

<select> 元素用来创建下拉列表。

<datalist>元素与<select>类似，不过<select>是直接显示下列列表，而<datalist>需要其他标签进行引用

<option> 在<select> 或者<datalist>元素内，用于定义了列表中的可用选项。

<optgroup> 标签把相关的<option>选项组合在一起


<!-- 创建带有 4 个选项的选择列表： -->
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


<!-- 一个 <input> 元素引用了<datalist> 中定义的下列列表 -->
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<!-- 给下拉列表分组 -->
<select>
  <optgroup label="分组1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="分组2">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<select>属性

属性	值	描述
autofocus		自动获得焦点
disabled		禁用下拉列表。
form	form_id	定义 select 字段所属的一个或多个表单。
multiple		当该属性为 true 时，可选择多个选项。
name	text	定义下拉列表的名称。
required		用户在提交表单前必须选择一个下拉列表中的选项。
size	number	下拉列表中可见选项的数目。

<optgroup> 属性

属性	值	描述
disabled		规定禁用该选项组。
label	text	为选项组规定描述。

<option>属性

属性	值	描述
disabled		禁用
label	text	定义当使用时所使用的标注。
selected		规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

10.6 按钮`<button>`

<button type="button">点我!</button>

属性	值	描述
autofocus		自动地获得焦点。
disabled		禁用该按钮
form	form_id	规定按钮属于一个或多个表单。
formaction	URL	当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	当点击设置了该值的按钮时请求头加入Context-Type的指定值。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethod	get post	用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidate		如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtarget	_blank：在新窗口/选项卡中打开。 _self：在同一框架中打开。（默认） _parent：在父框架中打开。 _top：在整个窗口中打开。 framename：在指定的 iframe 中打开。	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name	name	按钮的名称
type	submit：该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。 button：该按钮是可点击的按钮（Internet Explorer 的默认值）。 reset：该按钮是重置按钮（清除表单数据）。	按钮的类型
value	text	按钮的初始值。可由脚本进行修改

10.7 计算结果显示在 `<output>`

<!-- 输出输入框a和输入框b的值相加 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0<input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

属性	值	描述
for	element_id	描述计算中使用的元素与计算结果之间的关系
form	form_id	输入字段所属的一个或多个表单
name	name	对象的唯一名称（表单提交时使用）

11. 媒体

audio	定义声音，比如音乐或其他音频流。
source	定义media元素 ( 和 )的媒体资源。media
track	为媒体( 和 )元素定义外部文本轨道。
video	定义一个音频或者视频

11.1 音频标签`<audio>`

样例

<!-- 指定数据源可以使用src属性或者source标签-->
<audio controls>
   <!-- 不同浏览器支持的音频播放格式有所不同，一般为了兼容效果，会放置多种音频格式，浏览器会自上而下选择符合的音频格式。-->
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
    <!-- 若浏览器不支持video元素或者无法播放音频，则会显示替代文本（开始和结束标签之间的内容）-->
   当前浏览器不支持audio标签
</audio>

属性

属性	值	描述
autoplay		在就绪后马上播放。
controls		显示音频控件（比如播放/暂停按钮）
loop		每当音频结束时重新开始播放
muted		音频输出为静音
preload	auto：当页面加载后载入整个音频 meta：当页面加载后只载入元数据 none：当页面加载后不载入音频	规定当网页加载时，音频是否默认被加载以及如何被加载
src	路径	规定音频文件的 URL

JS操作

<audio preload="auto" src="music.mp3" onseeking="fn()" controls />
<script>
    var audio = document.querySelector('audio')
    function fn() {
        //输出音频的属性
        console.log(audio.seeking)
    }
</script>

JS属性

只读

duration：双进度浮点数，音频的播放时长，以秒为单位。若音频不可用或者音频未加载，则返回NaN

paused：若音频被暂停或者未开始播放，则返回true

ended：音频是否播放完毕，播放完毕则返回true

error：发生错误情况下的MediaError对象

currentSrc：返回正在播放或加载的音频的URL地址，对应于浏览器在source元素中选择的文件

seeking：用户是否在音频中移动或者跳跃到新的播放点

可读写

autoplay：设置音频自动播放，或者查询音频是否设置autoplay

loop：设置或者查询音频是否循环播放

currentTime：返回音频当前的播放时间点，双精度浮点数，单位为秒。音频未播放，可用于设置音频开始播放的时间点。音频播放过程中，可用于设置音频播放时间点

controls：显示或隐藏音频控制面板，或者查询控制面板是否可见

volume：返回音量值，介于0-1之间的双进度浮点数，或者设置音量值

muted：设置或者查询是否静音

playbackRate：设置或者查询音频的播放速度，1表示正常速度，大于1表示快进，0-1之间表示慢进，0表示暂停（控制面板仍然是播放，仅仅是速度为0）

特殊属性

played

表示用户已经播放的音频范围，返回 TimeRanges 对象，其中TimeRanges对象包括一个length属性和start()、end()两个方法。调用举例：audio.played.start(i)

length：获取音频范围的数量，未开始播放为0，开始播放后至少为1

start(index)：获取某个音频范围的开始位置

end(index)：获取某个音频范围的结束位置

若用户在音频中移动或者跳跃播放点，则会获得多个音频范围。

如下为一段音频，用户跳跃了播放点两次，因此played.length为3，其中三段音频范围分别为开始播放、第一个跳跃点、第二个跳跃点的播放范围。

buffered

表示浏览器已经缓存的音频范围，返回TimeRanges对象，若音频已完全加载则buffered.length为1，buffered.start(0)为0，buffered.end(0)为音频时长，详细参考。

seekable

表示用户可跳转或移动的音频范围，返回TimeRanges对象，若音频已完全加载则seekable.length为1，seekable.start(0)为0，seekable.end(0)为音频时长。音频未加载或者加载错误，则seakable.length为0，对应的start(0)和end(0)也就不存在，详细参考。

networkState

获取音频的网络范围，详细参考。

0：NETWORK_EMPTY，音频尚未初始化

1：NETWORK_IDLE，浏览器已选择好采用什么编码格式来播放媒体，但尚未建立网络连接

2：NETWORK_LOADING，浏览器正在加载

3：NETWORK_NO_SOURCE，未找到音频资源

error

通常正常加载音频，则返回null，若加载过程中发生错误，浏览器将会返回MediaError对象。MediaError对象包括code和message属性，message为错误描述信息，code为如下错误码。

1：MEDIA_ERR_ABORTED，音频加载加载过程中由于用户操作而被终止

2：MEDIA_ERR_NETWORK，确认音频资源可用，但是加载时出现网路错误，音频加载被终止

3：MEDIA_ERR_DECODE，确认音频资源可用，但是解码发生错误

4：MEDIA_ERR_SRC_NOT_SUPPORTED，音频格式不被支持或者资源不可用

JS方法

audio=document.getElementById("myAudio")

方法名	描述	示例代码
`play()`	开始播放音频。	audio.play();
`pause()`	暂停播放音频。	audio.pause();
`load()`	重新加载音频。	audio.load();
`canPlayType(type)`	检测浏览器是否支持特定类型的音频。	audio.canPlayType("audio/mp3")
currentTime	获取或设置音频的当前播放时间（以秒为单位）	audio.currentTime;

事件

var audio = document.getElementById("myAudio");  
// 播放结束后触发的方法
audio.onended = function() {  
  status.textContent = "音频播放结束...";  
};

常用事件

loadstart：开始载入音频时触发

durationchange：duration属性更新时触发

loadedmetadata：音频元数据加载完成时触发

loadeddata：音频的第一帧加载完成时触发，此时整个音频还未加载完

progress：音频正在加载时触发

canplay：浏览器能够开始播放音频时触发

canplaythrough：浏览器预计在不停下来进行缓冲的情况下，能够持续播放指定的音频时会触发

其他事件

abort：音频终止时触发，非错误导致

emptied：音频加载后又被清空，如加载后又调用 load 重新加载

ended：播放结束，若设置loop属性，音频播放结束后不会触发

error：发生错误

play：播放事件，第一次播放、暂停后播放会触发

playing：播放事件，第一次播放、暂停后播放、播放结束后循环播放会触发

pause：暂停事件

ratechange：播放速率改变

seeking：播放点改变开始

seeked：播放点改变结束

stalled：浏览器尝试获取音频，但是音频不可用时触发

suspend：音频加载暂停时触发

timeupdate：音频currentTime改变时触发

volumechange：音量改变时触发，包括静音

waiting：开始播放前缓冲下一帧时触发

11.2 媒体源文件 `<source>`

样例

<audio controls>
  <!--辅助audio、video、picture等标签加入源文件 -->
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  浏览器不支持显示该内容。
</audio>

属性

属性	值	描述
media	media_query	媒体资源的类型，供浏览器决定是否下载。
src	URL	媒体文件的 URL。
type	视频： video/ogg video/mp4 video/webm 音频： audio/ogg audio/mpeg	媒体资源的 MIME 类型。
sizes		不同页面布局设置不同图片大小。
srcset	URL	应用于标签时需要使用到。指定在不同情况下使用的图像 URL。

11.3 音频或者视频标签`<video>`

样例

<!--定义一个视频 -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

属性

属性	值	描述
autoplay		视频在就绪后马上播放。
controls		向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop		当媒介文件完成播放后再次开始播放。
muted		视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto：一旦页面加载，则开始加载音频/视频。 metadata：当页面加载后仅加载音频/视频的元数据。 none：页面加载后不应加载音频/视频。	视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

JS操作

JS属性

属性	描述	示例代码
currentTime	当前视频播放的时间（可读写）	var video = document.getElementById("myVideo"); video.currentTime = 30;
duration	视频的总时长（只读）	var video = document.getElementById("myVideo"); console.log(video.duration);
play()	播放视频	var video = document.getElementById("myVideo"); video.play();
pause()	暂停视频	var video = document.getElementById("myVideo"); video.pause();
load()	加载视频	var video = document.getElementById("myVideo"); video.load();
canPlayType	检查浏览器是否能播放指定类型的视频	var video = document.getElementById("myVideo"); console.log(video.canPlayType("video/mp4"));
addEventListener()	添加事件监听器，如：`play`, `pause`, `ended`, 等等	var video = document.getElementById("myVideo"); video.addEventListener("play", function() { console.log("Video is playing"); });

JS事件

事件	描述	示例代码
play	当视频开始播放时触发	`<video src="video.mp4" onplay="handlePlay()"></video>`
pause	当视频暂停播放时触发	`<video src="video.mp4" onpause="handlePause()"></video>`
ended	当视频播放结束时触发	`<video src="video.mp4" onended="handleEnded()"></video>`
timeupdate	当视频的当前播放时间更新时触发	`<video src="video.mp4" ontimeupdate="handleTimeUpdate()"></video>`
loadedmetadata	当视频的元数据加载完成时触发	`<video src="video.mp4" onloadedmetadata="handleMetadataLoaded()"></video>`
loadeddata	当视频的第一帧数据加载完成时触发	`<video src="video.mp4" onloadeddata="handleDataLoaded()"></video>`
canplay	当浏览器可以开始播放视频时触发	`<video src="video.mp4" oncanplay="handleCanPlay()"></video>`
canplaythrough	当浏览器预计可以连续播放视频到结束时触发	`<video src="video.mp4" oncanplaythrough="handleCanPlayThrough()"></video>`
waiting	当视频因缓冲而停止播放时触发	`<video src="video.mp4" onwaiting="handleWaiting()"></video>`
seeking	当用户开始移动视频进度条时触发	`<video src="video.mp4" onseeking="handleSeeking()"></video>`
seeked	当用户完成移动视频进度条时触发	`<video src="video.mp4" onseeked="handleSeeked()"></video>`
volumechange	当视频音量发生改变时触发	`<video src="video.mp4" onvolumechange="handleVolumeChange()"></video>`

11.4 媒体元素字幕轨道`<track>`

<!--带有字幕轨道（friday.vtt）的视频：-->
<!--<track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件）。
这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。-->
<video width="320" height="240" controls>
<video controls
       src="/video/php/friday.mp4">
    
    <track default
           kind="captions"
           srclang="en"
           src="/video/php/friday.vtt" />
    抱歉，您的浏览器不支持嵌入视频！
</video>
</video>

属性	值	描述
default	default	规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kind	captions：定义将在播放器中显示的简短说明。 chapters：定义章节，用于导航媒介资源。 descriptions：定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。 metadata：定义脚本使用的内容。 subtitles：定义字幕，用于在视频中显示字幕。	规定文本轨道的文本类型。
label	text	规定文本轨道的标签和标题。
src	URL	必需的。规定轨道文件的 URL。
srclang	language_code	规定轨道文本数据的语言。如果 kind 属性值是 "subtitles"，则该属性是必需的。

HTML5入门教程-2

9. 框架<iframe>

10. 表单和输入

10.1 表单<form>

10.2 输入框<input>

10.3 文本框<textarea>

10.4 标签<lable>

10.4 元素分组<fieldset>

10.5 下拉列表<select> <option>

10.6 按钮<button>

10.7 计算结果显示在 <output>

11. 媒体

11.1 音频标签<audio>

样例

属性

JS操作

JS属性

只读

可读写

特殊属性

played

buffered

seekable

networkState

error

JS方法

事件

常用事件

其他事件

11.2 媒体源文件 <source>

样例

属性

11.3 音频或者视频标签<video>

样例

属性

JS操作

JS属性

JS事件

11.4 媒体元素字幕轨道<track>

9. 框架`<iframe>`

10.1 表单`<form>`

10.2 输入框`<input>`

10.3 文本框`<textarea>`

10.4 标签`<lable>`

10.4 元素分组`<fieldset>`

10.5 下拉列表`<select>` `<option>`

10.6 按钮`<button>`

10.7 计算结果显示在 `<output>`

11.1 音频标签`<audio>`

11.2 媒体源文件 `<source>`

11.3 音频或者视频标签`<video>`

11.4 媒体元素字幕轨道`<track>`