HTML5 使用的三个层次

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

HTML5 使用的三个层次

作者：迹忆客最近更新：2023/05/09 浏览次数：

级别 1：它只是工作™

HTML5 规范是在考虑向后兼容性的情况下编写的（并且仍在编辑中）。 HTML5 中有一些新功能已经可以在每个 A 级浏览器中使用，因此现在可以使用，不需要任何奇怪的黑客攻击。 Level 1 HTML5 仅限于这些功能。

重新定义 HTML4 元素

一些 HTML4 元素在 HTML5 中发生了变化。因为这些元素在 HTML5 之前就已经存在并且已经存在了一段时间，所以所有的浏览器都已经支持它们。我们真的不需要做任何事情就可以从它们的新含义和 HTML5 中增加的可能性中获益。

大多数更改的 HTML 元素只是获得了新的语义，但其中一个元素获得了新的“功能”——a 元素，用于创建超链接锚点或“链接”。在 HTML4 中，我们只能使用内联链接（在短语内容中），但 HTML5 使使用块级链接成为可能，这意味着我们可以像使用可点击的 div 一样使用 a 元素：

<a href="/canhazfood/carrot">
    <h1>Carrot</h1>
    <p>Om nom nom nom.</p>
</a>

之后，我们只需要在锚点上添加一些额外的 CSS：

a {
    display: block;
}

简化语法

HTML5 大大简化了文档的一般语法。这使得 HTML5 比其任何前身都更易于使用。

DOCTYPE

我敢打赌，99% 的 Web 开发人员从未输入过 HTML5 之前的 DOCTYPE 声明。他们要么复制粘贴，要么由他们选择的编辑器自动插入。你不能怪他们——没有人喜欢输入像 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> 这样的东西。

<!DOCTYPE html>

与简单地输入相比，我们可能会花更多时间复制粘贴。我有没有提到新的、更短的 DOCTYPE 也避免了 Internet Explorer 中的潜在安全问题？立即开始使用它，永不回头。

字符编码

指定文档的字符编码也变得更容易。代替…

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

…可以在 HTML5 中使用以下内容：

<meta charset="utf-8">

可选 type 属性

HTML5 使用 rel="stylesheet" 为 script、style、input 和 link 元素的类型属性指定默认值。除非我们需要与默认值不同的值，否则我们可以简单地省略 type 属性。

<!-- HTML 4.01 / XHTML -->
<link rel="stylesheet" type="text/css" href="foo.css">
<!-- HTML5 -->
<link rel="stylesheet" href="foo.css">

<!-- HTML 4.01 / XHTML -->
<script type="text/javascript" src="foo.js"></script>
<!-- HTML5 -->
<script src="foo.js"></script>

<!-- HTML 4.01 / XHTML -->
<style type="text/css">
    body { background: gray url(boring.gif) no-repeat; }
</style>
<!-- HTML5 -->
<style>
    body { background: pink url(unicorns.png) repeat; }
</style>

<!-- HTML 4.01 / XHTML -->
<input type="text">
<!-- HTML5 -->
<input>

可选斜线 (/>)

HTML4 和 XHTML 之间最明显的区别是后者要求对自闭合元素使用更严格的语法。在 XHTML 中，这是插入图像的方式：

<img src="foo.png" alt="Foo" />

空格是可选的，因此以下也是有效的 XHTML：

<img src="foo.png" alt="Foo"/>

但是，在 HTML 中，不需要使用斜线：

<img src="foo.png" alt="Foo">

为了向后兼容，HTML5 接受上述所有语法变体。这使得将有效的 HTML4 或 XHTML 文档“升级”到 HTML5 变得非常容易。只需更改 DOCTYPE 即可！ — 你已经拥有了一个有效且符合标准的 HTML5 文档。是的向后兼容！

级别 2：默认情况下优雅降级的东西

HTML5 具有一些比 Level 1 中的功能稍微高级的功能。这些功能可以毫无问题地使用，并且可以在支持它们的现代浏览器中使用。在旧版浏览器中，它们不会开箱即用，但至少不会出现任何问题——所有非 HTML5 功能都将保留。

Web Forms 2.0 规范中描述了这方面最明显的示例，该规范现在已被 HTML5 规范的表单章节所取代。 HTML5 为 input 元素的 type 属性提供了新值。例如，对于电子邮件输入字段，我们可以使用：

<input type="email">

这在移动设备上尤其有利，移动设备可以为输入电子邮件地址提供优化的键盘布局（带有用于 @ 和 . 字符的专用键）。其他新输入类型也是如此：URL 有 url，电话号码有 tel，一般数字有 number，datetime、date、time、month、week 等等。

输入元素也有一些新属性。占位符允许我们指定旨在帮助用户输入数据的简短提示（单词或短语）。支持它的浏览器将在输入元素的值为空且没有焦点时显示占位符文本。

<input type="email" placeholder="test@example.com">

autofocus 属性指示输入字段应在页面加载时获得焦点。

<input type="search" autofocus>

我们可以继续使用新的输入类型和属性。使用现代浏览器的用户将立即受益于这些优势；其他人将获得与没有添加 HTML5 优势时相同的体验。如果我们在 input 元素上为 type 属性输入一个未知值，或者完全省略它，浏览器会将其解释为文本。同样，如果浏览器遇到未知属性，它会简单地忽略它。

有时，优雅降级是不够的——例如，如果我们想使用新的占位符和自动对焦属性并让它们在 Internet Explorer 中工作。我们必须通过 JavaScript 使用特征检测并提供模拟所需行为的回退。

级别 3：你所需要的只是一些额外的技巧

到目前为止，我们已经看到了两个级别的 HTML5 使用：级别 1（新的 HTML5 优点）和级别 2（默认情况下优雅降级的东西）。尚未提及的每个新 HTML5 功能都是 Level 3 的一部分。遗憾的是，这些功能需要额外的 hack 才能跨浏览器工作。忘掉优雅降级——如果你不提供适当的修复，这些东西会让你的网站变得混乱。

新元素

HTML5 提供了三种新元素：分段元素、内联元素和交互元素。

新的分节元素是 <section>、<article>、<nav>、<aside>。还有一些“流内容”元素也可用于指示页面部分：<header> 和 <footer>。这些元素为 HTML4 文档中的 <div> 元素提供了语义替代。这并不意味着 <div> 在 HTML5 中被弃用——你只是不再需要它们来标记这些常见的文档部分。

由于这些新的块级元素尚未包含在大多数用户代理样式表中，我们只需添加一些 CSS 即可使它们按预期工作：

article, aside, footer, header, section {
    display: block;
}

当然，这只是一个使用最常见的新块级 HTML5 元素的示例，但我们明白了。

一些新的内联元素是 <mark> 和 <time>，前者表示突出显示的文本，后者不言自明。同样，这些元素可以被视为某些我们可能在 HTML4 中使用 <span> 的情况的语义替代。

当 Internet Explorer 遇到它无法识别的元素时，它不会对其应用任何 CSS。然而，这可以通过使用 HTML5 shiv (JavaScript) 轻松修复，有效地消除了避免不需要特殊呈现或用户交互的新元素的需要。

HTML5 中新的交互元素是 <details> 和 <video> 等元素。显然，如果我们想以跨浏览器兼容的方式使用它们，还需要做更多的工作。当然，通过上述修复，这些元素可以在每个浏览器中使用 CSS 设置样式——但仍然不是所有浏览器都知道如何处理它们。这里的关键是使用 JavaScript 进行特征检测，并在需要时提供回退（在 JavaScript 和/或 Flash 中）。当然，我们需要针对不同的元素进行不同的功能测试和回退，但好消息是：我们可能不必自己编写这些代码。例如，不久前，我写了一篇关于使用 jQuery 的防止 HTML5 <details> 回退。

JavaScript API

与新的交互元素一样，新的 HTML5 JavaScript API（用于 <video>、<audio>、<canvas>、拖放、离线应用程序、内联编辑、workers、web sockets 等等）不会只在不支持它们的浏览器中工作。我们需要使用功能测试并在需要时提供 JavaScript 和/或 Flash 的回退。

上一篇：HTML5 的 XML 序列化，又名“XHTML5”

下一篇：Bulletproof HTML5 <details> 使用 jQuery 回退

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享