id 属性在 HTML5 中变得更加优雅

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

Vue React JavaScript Angular CSS HTML

id 属性在 HTML5 中变得更加优雅

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

HTML5 带来的更微妙但更棒的变化之一，适用于 id 属性。

HTML 4.01 和 HTML5 中的 id 有何不同

HTML 4.01 规范规定 ID 令牌必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符 (-)、下划线 (_) 、冒号 (:) 和句点 (.)。对于类属性，没有这样的限制。类名可以包含任何字符，并且它们不必以字母开头才有效。

HTML5 摆脱了对 id 属性的额外限制。剩下的唯一要求——除了在文档中是唯一的——是该值必须包含至少一个字符（不能为空），并且它不能包含任何空格字符。

这意味着适用于 class 和 id 属性值的规则现在在 HTML5 中非常相似。

虽然这听起来可能很无聊，但这实际上很酷。在 HTML 4.01 中，以下代码完全有效：

<p class="#">Foo.
<p class="##">Bar.
<p class="♥">Baz.
<p class="©">Inga.
<p class="{}">Lorem.
<p class="“‘’”">Ipsum.
<p class="⌘⌥">Dolor.
<p class="{}">Sit.
<p class="[attr=value]">Amet.

哎呀，你甚至可以使用 brainfuck 程序作为类名：

<p class="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!

我相信你能想到更多。毕竟，可能性是无限的:)

那么有什么新鲜事吗？

在 HTML5 中，我们可以采用所有这些常规类名并将它们用作 id 属性的值。是的，HTML5 就是这么棒。

<p id="#">Foo.
<p id="##">Bar.
<p id="♥">Baz.
<p id="©">Inga.
<p id="{}">Lorem.
<p id="“‘’”">Ipsum.
<p id="⌘⌥">Dolor.
<p id="{}">Sit.
<p id="[attr=value]">Amet.
<p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!

如何转义CSS中的任何字符

为这个标记编写 CSS 很棘手。例如，你不能只使用 ## { color: #f00; } 以 id="#" 为目标元素。相反，我们必须转义奇怪的字符（在本例中为第二个 #）。这样做会取消特殊 CSS 字符的含义，并允许我们引用无法轻易输入的字符，例如疯狂的 Unicode 符号。如果我们还需要在 JavaScript 中使用这些转义的 CSS 选择器，它会变得更加棘手。

这就是为什么我写了一篇单独的博客文章来解释如何转义 CSS 中的任何字符，以及如何在 JavaScript 中使用转义的 CSS 选择器。

上一篇：没有了

下一篇：HTML 中的字符引用

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

本文地址：

迹忆客专注技术分享