HTML5新特性 | 青训营笔记

101 阅读2分钟

这是我参与「第五届青训营」笔记创作活动的第 1 天

HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。与传统的技术相比,HTML5 的语法特征更加明显,可以更加便捷地处理多媒体内容,而且 HTML5 中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

  • 新的语义标签,比如 header、nav、section、article、footer。
  • 新的表单元素,比如 calendar、date、time、email、url、search。
  • 用于绘画的 canvas 元素。
  • 用于媒介回放的 video 和 audio 元素。
  • 对本地离线存储的更好支持。
  • 地理位置、拖曳、摄像头等 API。

基本语义化标签

语义化标签就是把 HTML 文档中的元素划分到不同区域,每个区域有自己的含义。在 HTML5 中,提供了如下图所示的语义化标签,让我们可以更直观地看到页面的结构。

1. 标签说明
header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

2. 多媒体标签
2.1 audio标签
在 HTML5 中,使用 audio 标签来播放声音文件或者音频流,该标签支持 Ogg、MP3、WAV 等音频格式。

使用格式

<audio src="URL" controls></audio>

src 属性用于指定要播放的声音文件。
controls 是 controls="controls" 简写形式,用于提供播放、暂停和音量控件。
除了上面两种属性,audio 标签还有以下属性可用:

autoplay 属性:音频自动播放。
loop 属性:音频自动重复播放。
preload 属性:用来缓冲 audio 标签的大文件,它有三个属性值 none(不缓冲)、auto(缓冲音频文件)、metadata (缓冲文件的元数据)

2.2 source标签
audio 标签还可以通过子标签 source 来进行多数据源的设置。

使用格式

<audio>
  <source src="URL" />
</audio>

一个 audio 标签可以包含多个 source 标签,当播放器无法识别当前格式的播放源时会调用下一个 source 播放源进行播放。

source 标签是用来指定多个文件,给不同的浏览器提供可支持的编码格式。

例如:

<audio>
  <source src="filename.opus" />
  <source src="filename.ogg" />
  <source src="filename.mp3" />
</audio>