什么是 HTML5？含义、元素和优势-余初云

HTML5 是 HTML 的第五个版本，HTML 是一种标记语言，供 Web 浏览器用于可视化代码。它在网站功能、Web 内容开发等方面进行了多项改进。本文将介绍 HTML5 的含义、组成元素和优势。

什么是 HTML5？

HTML5 是超文本标记语言（HTML）的第五个版本，网页浏览器使用它来可视化代码。它在网站功能、网页内容开发等方面进行了多项改进。

HTML 的演变

在万维网发展的早期，微软 Internet Explorer 和 Mosaic Netscape 等主流浏览器开发商针对各自浏览器开发了专属元素，以增强网页的显示效果。到了 20 世纪 90 年代末，他们已经为 Internet Explorer 和 Netscape 分别创建了不同的网站版本。

1996 年，新成立的万维网联盟（W3C）建议制定 HTML 3.2 标准。该标准涵盖了当时常用的 HTML 元素，还包括 HTML 的展示扩展，例如在 Internet Explorer 和 Netscape”浏览器大战”期间创建的中心元素和字体。

随后，HTML 4.0（1998 年）和 HTML 4.01（1999 年）相继问世，它们强调了表现层和结构层的分离，同时增强了网站的易用性。这些升级将表现层元素转移到了新创建的层叠样式表（CSS）标准之下。

HTML5 的出现

千禧年伊始，Mozilla、Opera 和 Apple 的代表联合成立了 Web 超文本应用技术工作组 (WHATWG)。该组织与 W3C 不同，其目标是改进 HTML 开发，使其能够满足现实世界创作实践和浏览器行为带来的新需求。WHATWG 的最初两份文件——Web Applications 1.0 和 Web Forms 1.0——最终合并为 HTML5。

如今，WHATWG 维护着一个”鲜活的”HTML 标准，该标准不使用数字进行分类。WHATWG 的工作也为 W3C 成立其自身的 HTML5 工作组奠定了基础。HTML5 于 2014 年 10 月正式获得”推荐标准”的地位。

HTML5 标准的规范由这两个组织共同维护，这偶尔会导致一些细微的不一致。大多数浏览器开发者都依赖 WHATWG 的版本作为实现参考。

HTML 4.01 Strict 版本（不包含基于表现层的元素和其他已弃用的属性）是 HTML5 的基础。因此，大多数 HTML5 代码都使用了与之前版本相同的浏览器兼容元素。HTML5 还引入了许多新的元素和全局属性，并使 HTML 4.01 中的许多已弃用的属性和元素过时。HTML5 的一个关键特性是包含了一个标准协议，用于浏览器处理旧版和格式错误的标记。

HTML5 的独特之处

在此次升级之前，HTML 主要侧重于用于标记网页内容以实现可视化的元素。HTML5 更进一步，提供了许多完成任务的新方法。在之前的 HTML 版本中，这些任务需要特定的编程或专有插件，例如 Silverlight 或 Flash。

HTML5 的特性包括标记和脚本元素，以及用于实现诸如在页面上添加视频和音频、本地数据存储、离线操作和位置数据使用等功能的应用程序编程接口 (API)。由于 HTML5 涵盖了标准的 Web 开发功能，开发团队无需为每个应用程序从头开始创建功能，而是可以依赖浏览器内置的功能。

HTML5 元素

HTML5 引入了许多新元素，这些元素受到大多数主流浏览器的支持。以下列出了 HTML5 的关键元素。

1.<article>

这种新的分区元素用于将特定内容标记为文章的一部分。即使内容之间可能存在重叠，这些内容也会被独立于网站上的其他内容进行处理。

2.<aside>

此元素定义了除其自身内容之外的额外内容，常用于文档侧边栏。虽然此元素在浏览器中不会以特定形式呈现，但可以使用 CSS 对其进行样式设置。

此元素旨在识别与页面主要内容相关但并非其主要意图的内容。例如，可用于概述作者信息和”查看更多”链接。

3.<audio>

此元素允许用户嵌入页面的声音内容，例如音乐或音频流。<audio> 标签与一个或多个一起使用<source>用于区分音频源的标签。浏览器将播放第一个支持的音频源。支持的音频格式包括 MP3、OGG 和 WAV。如果浏览器不支持此元素，则会在标签之间显示文本。<audio> 和</audio>标签。

4.<bdi>

该元素的名称代表双向隔离。它的功能是隔离一段文本，该文本的书写方向可以与元素外部的文本不同。<bdi> 有助于嵌入用户生成的内容，这些内容包含书写方向未知的文本。

此元素提供一个画布区域，可通过 JavaScript 绘制图形（方框、路径、渐变、文本）并向页面添加图像。默认情况下不包含边框和文本，标签是透明的，仅用作绘制图形的容器。这些图形可以使用与元素不同的脚本生成。如果不支持此元素或浏览器中禁用了 JavaScript，则会显示 <canvas> 标签内的所有文本。

6.<data>

此元素用于向内容添加机器可读信息。机器可读值由数据处理器提供，同时还提供人类可读值供 Web 浏览器渲染。

7.<datalist>

此元素为以下内容提供”自动完成”功能：<input> 通过指定一个下拉列表来控制元素，该列表包含浏览器在用户输入数据时将显示的预设选项。该元素的 id 属性用于控制元素的属性。<datalist> 元素必须等于列表属性。<input> 用于连接它们的元素。

8.<details> 和<summary>

此元素内的内容初始状态为隐藏，仅在用户需要查看时才会显示。它可以包含任何内容。

为此，我们创建了一个用户可以打开或关闭的交互式组件。该组件默认处于关闭状态，打开后会展开以显示其中的内容。

这<summary>标签定义了可见的标题。<details> 可与之交互以查看或隐藏内容的组件。

9.<dialog>

该元素定义了一个对话框或子窗口，从而可以轻松地在网页上生成弹出对话框和模态窗口。

10.<embed>

此元素用于嵌入第三方应用程序，这些应用程序通常以多媒体内容的形式存在，例如视频或音频。它为用户提供了一个容器，用于嵌入 Flash 动画等插件。在 HTML5 中实现此元素只需要起始标签即可。需要注意的是，许多现代浏览器不再支持 Java 插件和 Applet、ActiveX 控件或 Shockwave Flash，这限制了此元素的可用性。

11.<figure> 和<figcaption>

此元素用于指定独立内容，例如图表、插图、代码清单和照片。其内容与主流程相关；但是，其位置不依赖于主流程，因此即使移除此元素，页面流程通常也不会受到影响。<figcaption> 该元素允许用户为图片添加标题。<figure> 。

12.<footer>

13.<header>

此元素通常包含与页面标题相关的信息。它通常用于概述介绍性信息或导航链接。它还有助于可视化一个或多个标题元素（根据分类）。<h1> 到 <h6>）、徽标、图标和作者。此元素甚至可以用来包裹搜索表单或章节目录。单个文档可以包含多个元素。<header> 元素，<header> 标签不能放置在 <address>，<footer> 或其他<header>元素。

14.<keygen>

此元素用于表单中，以指定密钥对生成器字段。其目的是为用户提供安全的身份验证方法。表单提交后，系统会生成公钥和私钥。私钥存储在本地，而公钥则传输到服务器，用于创建客户端证书，以便将来验证用户身份。此元素还有助于创建数字签名。

15.<main>

此元素概述页面的主要内容，这些内容应仅限于该特定文档。跨文档重复出现的内容，例如导航链接、侧边栏、网站徽标、搜索表单和版权信息，不应包含在此元素中。单个文档只能包含一个此元素。<main> 元素，并且该元素不能是某个元素的后代。<aside> ，<article> ，<header> ，<footer> ，或者<nav>元素。

16.<mark>

此元素定义段落中需要高亮显示或标记的文本。

17.<meter>

该元素也称为量规，用于定义预定义范围内的标量测量值和分数。例如：<meter> 可以确定磁盘使用情况或查询结果的相关性。

18.<nav>

此元素概述了网站中通常用于导航链接的部分，这些链接指向当前页面上的其他位置或其他页面。<nav> 元素包括表格、菜单和索引。

文档中的所有链接都不应包含在文档内。<nav> 它并非元素；相反，它仅用于较大的导航链接块。具有类似功能的屏幕阅读器和浏览器可以使用<nav>了解何时可以跳过初始内容渲染。

19.<output>

此元素表示计算的输出结果，例如 JavaScript 或其他脚本执行的计算结果。其属性包括for（用于指定计算结果与计算过程中使用的元素之间的关系）、form（用于指定输出元素所属的表单）和name（用于命名输出元素）。

20.<progress>

此元素用于可视化任务进度，例如已完成的工作量或下载时长。它通常与 JavaScript 一起使用。

21.<ruby> ，<rt> ，和<rp>

此元素用于指定注音文字，即附加在正文旁边的小型字体文本。注音文字的目的是帮助用户理解字符的含义或发音（通常用于日语内容）。

<ruby>经常与……一起使用<rt>和 <rp>。<ruby> 包含需要注音或注释的字符，<rt> 包含对应的注音或注释文本，以及可选信息<rp>标签用于在不支持常规 Ruby 注解的浏览器中定义要显示的内容。

22.<section>

此元素定义网页的特定部分，包括页眉和页脚。它用于将页面划分为多个部分和子部分，尤其是在需要多个页眉、页脚或其他部分标记时。它将相关的通用内容块分组在一起。

23.<svg>

该元素用于创建 SVG 图形容器。它提供了多种绘制方框、路径、圆形、图像和文本的方法。

24.<time>

此元素以人类可读的格式显示日期和时间，也可用于将日期和时间数据编码为机器可读格式。其应用包括生日提醒、日程安排和提升搜索引擎结果质量。

25.<video>

此元素用于在网页中嵌入视频内容。它应该包含<source>标签用于标识不同的视频源，浏览器将播放第一个支持的源。支持的视频格式包括 MP4、OGG 和 WebM。如果浏览器不支持此元素，则会在标签之间显示文本。<video> 和</video>改用标签。

26.<wbr>

此元素的名称代表”换行机会”。它指定文本行中可以添加换行符的位置（如果需要）。这在处理过长的单词时非常有用，因为浏览器可能会在错误的位置断开单词。

HTML5 的优势

我们已经了解了 HTML5 引入的元素如何简化多媒体内容的集成并增强语义价值。现在，我们将更深入地了解 HTML5 的优势。

1.语义丰富

语义标记指的是与特定含义相关联的标记，而不仅仅是创建特定的视觉输出。例如，<h1> 标签清晰地标示出网页的主标题。虽然也可以通过使用相关的格式标签将标题文本加粗放大来达到同样的效果，但标签并不能完全替代标题。<h1> 如果加上标签，语义含义将无法保留。

早期版本的 HTML 也包含语义标记，例如标题标签、链接 rel 属性和文档元数据。然而，诸如导航菜单、页面标题和主要内容部分等常见结构元素并没有语义上的区分。相反，它们都使用了相同的标记。<div> 标签。

HTML5 通过一系列新的语义元素解决了这个问题，例如 <header>，<main> ，<section> ，<nav> ，<aside> ，<article> ，和<footer>此外，还新增了诸如以下的内联语义元素：<address> 和<time>帮助搜索引擎等在线服务快速定位页面上的相关数据。现有的内联标记（例如粗体、斜体和下划线）也得到了改进，现在与特定的语义含义相关联。

2.无需插件即可获得丰富的媒体体验

随着网速的提升，富媒体已成为在线体验的核心组成部分。虽然 HTML 最初只是超文本文件（或许还有一些图片）的标记语言，但 HTML5 通过诸如 <video> 和 <audio> 之类的元素，从本质上支持富媒体。

除了功能实用、方便开发者之外，这项功能还有另一个好处：无需插件。Java 和 Flash 等插件的一些缺点包括性能差、用户选项少、存在安全漏洞以及搜索引擎排名靠后。

此外，HTML5 为用户提供了新的表单元素以及与 CSS 和 JavaScript 的更佳集成，简化了创建功能齐全的富媒体 Web 应用程序的过程，而无需依赖插件。

3.XML 兼容性

由于 HTML5 的 XML 序列化（也称为 XHTML5），代码可以使用更严格的 XML 语法编写。这对于那些喜欢格式良好的 XHTML 所带来的简洁性的开发人员来说非常有用，例如带引号的属性值、小写的元素名称以及所有元素的闭合。如果代码需要与其他 XML 应用程序兼容，则必须将 HTML5 文档以 XML 格式提供。

4.设计与内容的分离

除了鼓励语义化标记外，HTML5 还禁止使用仅用于帮助浏览器显示内容的非语义标记（例如字体、文本颜色、文本对齐方式等声明）。该标准已弃用许多用于实现此类可视化的元素，而少数仍然支持的功能则会显示”不推荐做法”的警告。

将设计和内容分离可以简化网站的维护和重新设计，因为 CSS 负责处理样式声明。此外，在一个平台（例如桌面端）上看起来不错的设计决策，在另一个平台（例如移动端）上未必看起来也不错。HTML5 通过提供语义上下文并允许内容自适应来解决这个问题。

5.可访问性和设计响应性

早期版本的 HTML 与现代科技产品种类繁多的屏幕尺寸和宽高比并不完全兼容。这包括手机、平板电脑、电子阅读器、辅助技术（例如文本转语音转换器、屏幕阅读器（它会抑制样式，同时增强文本放大倍数和对比度）以及盲文翻译器）。这些技术的发展受到限制，因为早期的标记语言试图将样式和设计”硬编码”到页面内容中。

然而，得益于语义标签和无障碍富互联网应用（ARIA），使用 HTML5 创建无障碍且响应式的网站要简单得多。例如，屏幕阅读器可以更轻松地解读 HTML5 内容，从而使视障人士更容易浏览网页。

6.应用程序编程接口

早期的 HTML 规范仅记录了语言中允许的元素、值和属性。这对于简单的文本网站来说足够了，但对于创建需要编程和脚本的 Web 应用程序却无济于事。

HTML5 实现了巨大的飞跃，它定义了众多新的 API，简化了与应用程序的通信。它引入了 API，用于实现以前需要插件或自定义代码才能实现的功能，包括 Web 存储、拖放、地理定位和微数据。

这有助于规范特定机制，简化原本复杂的编码任务，并允许开发人员添加可在跨平台浏览器上无缝运行的功能。

7.持久性本地存储

HTML5 支持本地浏览器存储，它介于 cookie 和客户端数据库之间。此功能允许浏览器同时跨多个窗口进行存储，从而增强安全性和性能，并确保即使浏览器关闭后数据仍然持久存在。