html5 使用的三个层次-ag捕鱼王app官网

级别 1：它只是工作™

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

重新定义 html4 元素

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

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

<a href="/canhazfood/carrot">
    <h1>carroth1>
    <p>om nom nom nom.p>
a>

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

a {
    display: block;
}

简化语法

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

doctype

我敢打赌，99% 的 web 开发人员从未输入过 html5 之前的 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 属性。

<link rel="stylesheet" type="text/css" href="foo.css">
<link rel="stylesheet" href="foo.css">

<script type="text/javascript" src="foo.js">script>
<script src="foo.js">script>

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

<input type="text">
<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 提供了三种新元素：分段元素、内联元素和交互元素。

新的分节元素是