迹忆客 专注技术分享

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

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

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

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


HTML 4.01 和 HTML5 中的 id 有何不同

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

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

这意味着适用于 classid 属性值的规则现在在 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 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

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进行处理。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便