id 属性在 HTML5 中变得更加优雅
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 选择器 。
相关文章
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
HTML5 document.head DOM 树访问器
发布时间:2023/01/11 浏览次数:184 分类:HTML
-
一个鲜为人知的 HTML5 JavaScript 好东西是 document.head DOM 树访问器,它比 document.getElementsByTagName(head)[0] 更有效(也更容易输入)。 文档的 head 元素是作为 html 元素子元素的第一个 head 元素
Bulletproof HTML5 <details> 使用 jQuery 回退
发布时间:2023/01/11 浏览次数:66 分类:HTML
-
HTML5 details 元素目前不受 Chrome 12 及更高版本原生支持的任何浏览器的原生支持。 这使得猜测这个新元素的确切行为有点困难,但阅读规范给了我们一个很好的主意。 清楚的是: detai
HTML5 使用的三个层次
发布时间:2023/01/11 浏览次数:65 分类:HTML
-
级别 1:它只是工作 HTML5 规范是在考虑向后兼容性的情况下编写的(并且仍在编辑中)。 HTML5 中有一些新功能已经可以在每个 A 级浏览器中使用,因此现在可以使用,不需要任何奇怪的
HTML5 的 XML 序列化,又名“XHTML5”
发布时间:2023/01/11 浏览次数:148 分类:HTML
-
你知道的,我总是更喜欢 HTML 而不是 XHTML ,因为它不那么冗长,而且我喜欢让事情变得简单。 真实的故事。 但这并没有阻止我想知道究竟是如何触发 HTML5 的 XML 模式的让我们从现在起
图片上传——html5+PHP实现无刷新上传
发布时间:2015/12/22 浏览次数:2025 分类:PHP
-
本篇介绍一种全新利用PHP上传图片的方式,利用html5的FileReader,读取图片文件,然后将数据传输到服务器再使用PHP进行处理。