自学WEB前端-1（HTML5新特性）_web video text tracks format-优快云博客

本文链接：https://blog.youkuaiyun.com/Sim_perfect/article/details/106189708

本文介绍了HTML5的基本概念及新特性，包括新的语义元素、音频和视频支持、表单改进、MathML支持、iframe改进以及Web Video Text Tracks Format（WebVTT）。详细讲解了如何使用这些新特性，特别是音频和视频的属性，以及WebVTT在添加字幕和文本轨道方面的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是HTML5

HTML5是第五代HTML标准的意思。它不仅提供丰富的媒体支持，而且还增强了对与用户进行交互的Web应用的支持，使本地数据和服务器交互比以前更有效、更容易。
我们来创建一个HTML5来看看HTML5包括几个部分
我们在编译器中通常在开头输入！
然后按TAB键快速补全HTML5骨架
补全后的代码如下

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

也可以输入html:5然后按TAB补全，效果是一样的。

1.HTML5标记

用doctype声明文件包含HTML5标记

<!DOCTYPE html>

声明HTML内容是使用HTML5的，不支持HTML5的浏览器会采用标准模式来解析该HTML文件，而忽略不支持的HTML5新特性。

2.字符集

在head标签中会声明使用的字符集，HTML5简化了旧版本过长的meta

<head>
	<meta charset="UTF-8">
</head>

注意：HTML5限制了可用的字符集，这样做是为了加强安全，防止某些类型的攻击。

3.其他和旧版的HTML骨架一样

html的语言设置 head标签 title标签 body标签

二、HTML5的新特性

新的语义元素
新的通信方式
新的离线存储方式（能够让网页在客户端本地存储数据以及更高效地离线运行）
多媒体
2D/3D 绘图效果
性能集成
设备访问（Device Access：能够处理各种输入和输出设备）

1.新的语义元素

1.1 HTML5中的块级元素和段落元素

<section> 		表示文档中的一个区域（或节），比如，内容中的一个专题，一般来说会有一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> 元素) 作为子节点来辨识每一个<section>。
<article>		表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<nav>			HTML导航栏是一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.
<header>		用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称等等。
<footer>		表示最近一个章节内容或者根节点的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<aside> 		表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受到影响。
<hgroup>		(HTML Headings Group Element) 将一组<h1>-<h6>元素分组

2. HTML5 的音频和视频

<audio> 		用于在文档中表示音频内容。 <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述，浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。
<video> 		用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

3. 表单

对表单进行了改进：添加强制校验的API
客户端验证是初步检查，是良好用户体验的重要特征
通过在客户端验证来捕获无效数据，用户可以立即对其进行修复。到达服务器的数据会进行服务器验证，如果不通过会被拒绝，然后返回客户端通知用户修复其数据，往返服务器的往返旅程会导致明显的延迟。
客户端表单验证：在将数据提交到服务器之前，帮助确保所提交的数据符合各种表单控件中规定的要求，并且以正确的格式填写所有必需的表单控件中。
我们通常会遇到两种不同类型的客户端验证：

内置表单验证
使用HTML5表单验证功能，此验证通常不需要太多JavaScript。内置表单验证的性能比JavaScript更好，但可定制性不如JavaScript验证。
下面是内置表单验证的几个属性

required：				指定在提交表单之前是否需要填写表单字段。
minlength和maxlength：	指定文本数据（字符串）的最小和最大长度
min和max：				指定数字输入类型的最小值和最大值
type：					指定数据是数字，电子邮件地址还是其他特定的预设类型。 
pattern：				指定正则表达式，该正则表达式定义输入的数据需要遵循的模式。

JavaScript验证
使用JavaScript进行编码。该验证是完全可定制的，但是需要进行创建（或使用一个库）

4. 对MathML的支持

数学标记语言（MathML）(Mathematical Markup Language)是一种XML语言，用于描述数学符号并捕获其结构和内容。
这个我很少用，没有详细的看，小伙伴可以自己去查。

5. iframe(内联框架元素)的改进

iframe的作用是将另一个HTML页面嵌入到当前页面中。
每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

属性				值					描述
name			name				规定 <iframe> 的名称。
height			pixels				规定 <iframe> 的高度。

width			pixels				规定 <iframe> 的宽度。
src				URL					规定在 <iframe> 中显示的文档的 URL。
srcdocNew		HTML_code			规定页面中的 HTML 内容显示在 <iframe> 中。
sandboxNew		" "
				allow-forms
				allow-same-origin
				allow-scripts
				allow-top-navigation 对 <iframe> 的内容定义一系列额外的限制。
seamlessNew		seamless			规定 <iframe> 看起来像是父文档中的一部分。

去掉了旧的iframe的属性：
align
frameborder
longdesc
marginheight
marginwidth
scrolling
好奇的小伙伴可以自己去查这些属性在旧HTML中怎么用，我这里就不赘述了。

6. label

为项目关联一个标题
label的属性：

for
与<label>元素位于同一文档中的可标记表单相关元素的id相匹配
注意：元素可以同时具有for属性和包含的控制元素，只要该for属性指向包含的控制元素即可。
form
与标签关联的元素（其表单所有者）。如果指定，属性的值是同一文档中元素的id。

<label for="opt">label关联input </label>
<input id="opt"> 这是被关联的input<input>

7. 其他

其他新元素
<mark> <figure> <figcaption> <data> <time> <output> <progress> <meter> <main>

<mark>			代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词。
<figure>		代表一段独立的内容, 经常与说明<figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
<figcaption> 	是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时Figcaption元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
<data>			将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 <time>。
<time>			用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。
<progress>		用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式."
<output>		是一个容器元素，网站或应用程序可以将计算结果或用户操作的结果注入其中
<meter>			表示一个已知的范围内任一标量值或分数值
<main>			呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

三、资源的属性和使用

<source> 指定媒体元素（比如和）的媒体资源。
属性值：

media	设置媒体资源的类型。
src		设置媒体资源的路径。
type	设置媒体资源的 MIME 类型。

1.1 Audia(音频)

Audia 在文档中嵌入的声音内容。

src				需要添加的音频的URL。
autoplay		设置是否在加载完其他部分就开始播放
autoplay属性值：
true(false)，音频将自动(不会自动)开始播放，而无需(需要)等待整个音频文件完成下载。
controls		用户是否能控制音频播放。
loop			是否循环播放
muted			开始时是否静音。默认值为false。
preload			提示是否加载内容。
preload	属性值：
none：不要预加载音频。
metadata：仅获取音频元数据（例如，长度）。
auto：表示自动下载整个音频文件。
空字符串：auto值的同义词。
currentTime		一个双精度浮点值，表示音频的当前播放位置（以秒为单位）。

注意事项：
autoplay属性的优先级高于preload。如果autoplay指定，则浏览器需要加载音频来进行播放。

1.2 Video

用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

视频常用格式

rm/rmvb/mkv
avi（Audio Video Interleave）
flv（Flash Video）
mp4（MPEG-4 Part 14）
ogv
webm

常见的几种视频容器格式
容器格式定义了一种结构，其中存储构成媒体的每个音频和/或视频轨迹，以及描述媒体的元数据、用于对其频道进行编码的编解码器等等。

Ogg容器（.ogv）
MPEG4-容器（.mp4）
Webm容器（.webm）
Matroska容器（.mkv）
容器内的音频和视频轨道以用于编码该媒体的编解码器的适当格式保存数据。音频轨道和视频轨道使用不同的格式。每个音频轨道均使用音频编/解码器进行编码，而视频轨道则使用视频编/解码器进行编码。

不用浏览器下对容器的兼容是不同的

WebM容器通常将Vorbis或Opus音频与VP8 / VP9视频打包在一起。尽管较旧的版本可能无法正常运行，但现代浏览器均支持此功能。
MPEG4-容器通常将AAC或MP3音频与H.264视频打包在一起。现代浏览器以及Internet Explorer也都支持此功能。
Ogg容器倾向于使用Vorbis音频和Theora视频。在Firefox和Chrome中对此有较好的支持，但基本上已被质量更好的WebM格式所取代。

1.2.1 Video的旧属性和新属性

旧属性

src			(source的缩写)添加资源路径
control 	使用户能够控制视频和音频播放

新属性

width		控制视频窗口的宽度
height		控制视频窗口的高度。
在单独设置width或者height，视频会保持其原始的宽高比。如果未设置，则视频将以水平填充空间，默认情况下，未填充的空间将仅具有纯色背景色。
autoplay	设置音频或视频自动开始播放。
loop		设置音频或视频在播放完毕后再次开始播放。
muted		使媒体在默认情况下关闭声音播放。
poster		播放视频之前将显示的图像的URL。
preload		用于缓冲大文件
			preload的三个属性值：
			"none" 			不缓冲文件
			"auto" 			缓冲媒体文件
			"metadata" 		仅缓冲文件的元数据

HTML5的Video包含：
img audio video 富媒体标签
一些属性
DOM接口
DOM事件
向后兼容
字幕

1.3 Web Video Text Tracks Format（WebVTT）

WebVTT(网络视频文本轨道格式)

是一种使用<track>显示定时文本轨迹（如字幕）的格式。
主要目的是向<video>添加文本覆盖。
基于文本使用UTF-8编码的格式。在可以使用空格的地方，也可以使用制表符。
WebVTT的MIME类型是text/vtt。
WebVTT文件（.vtt）包含提示，可以是单行或多行

1.3.1 WebVTT正文

WebVTT的结构由以下组件组成，其中一些组件是可选的，按此顺序排列：

一个可选的字节顺序标记（BOM）。
字符串“WEBVTT”。
WEBVTT右侧的可选文本标题。
WEBVTT之后必须至少有一个空格。
您可以使用此选项向文件添加说明。
您可以在文本标题中使用除换行符或字符串“->”之外的任何内容。
一个空行，相当于两个连续的换行符。
零个或多个提示或评论。
零行或多行空白。

1.3.2 使用VTT文件

WEBVTT

00:01.000 --> 00:04.000
- 这是第一行

00:05.000 --> 00:09.000
- 这是第二行

	<video controls >
		 <source src="text.mp4" type="video/mp4">
		 <track label="中文字幕"     kind="subtitles"    srclang="de" src="ddd.vtt" default>
		 <source src="media/text.webm" type="video/webm">
		 <object id="flowplayer" width="704" height="400" data="flowplayer-3.2.16.swf" type="application/x-shockwave-flash">
		 <param name="movie" value="flowplayer-3.2.16.swf" /> 
		 <param name="flashvars" value='config={"clip":"text.mp4"}' /> 
		 <p>您的浏览器不支持此视频</p>
		 </object>
	</video>