迹忆客 专注技术分享

这是我写的那些文章之一，只是为了以后能够链接查看。 我看到很多关于这个主题的问题，尽管我不介意一遍又一遍地解释同一件事，但只写一次可能更容易。

HTML 中不带引号的属性值

大多数人习惯于在他们编写的 HTML 中引用所有属性值。 例如：

<a href="foo" class="bar">baz</a>

也可以使用单引号：

<a href='foo' class='bar'>baz</a>

但是，以下也是有效的 HTML：

<a href=foo class=bar>baz</a>

这并不是什么新鲜事——事实上，自 HTML 2.0（第一个 HTML 标准）以来就支持使用不带引号的属性值。 然而，它在 XHTML 中是不允许的。 （但说真的，谁用 XHTML‽）

在 HTML 中，在某些情况下可以使用不带引号的属性值。 例如，如果我们尝试在不加引号的情况下使用其中包含空格的属性值，则会出现问题：

<!-- This does what you’d expect: -->
<p class="foo bar">

<!-- This is something entirely different: -->
<p class=foo bar>
<!-- …since it’s equivalent to: -->
<p class="foo" bar="">

当然，bar 不是有效的 HTML 属性。 因此，仅仅通过省略两个引号，我们最终会得到无效代码和一个 <p> 元素，该元素没有获得您想要的 bar 类名。 这只是众多例子中的一个……

如果这没有吓到你，你可能想知道 HTML 中不带引号的属性值的要求是什么。 让我们找出答案！

HTML 规范说：

属性位于开始标记内，由名称和值组成，由 = 字符分隔。 如果属性值不包含空格或任何 " ' ` = < 或 >，则它可以保持不带引号。否则，它必须使用单引号或双引号引起来。该值以及 = 字符可以省略 如果该值为空字符串，则完全相同。

请注意 ，这里应该说的不是“空格”，而是“空格字符”（见下文）。 从这个解释中还不清楚空字符串也不是有效的未加引号的属性值。 幸运的是，规范中的其他地方对此进行了解释：

属性名称，后跟零个或多个空格字符，后跟单个 U+003D EQUALS SIGN 字符 (=)，后跟零个或多个空格字符，后跟属性值，[...] 不得包含任何文字空格 字符、任何** U+0022** 引号字符 (")、U+0027 撇号字符 (')、U+003D 等号字符 (=)、U+003C 小于号字符 (<)、U+003E 大于号 SIGN 字符 (>)，或 U+0060 GRAVE ACCENT 字符 (`)，并且不能为空字符串。

请注意 ，术语“空格字符”是整个规范中使用的微语法，将许多空白字符分组：

出于本规范的目的，空格字符是 U+0020 SPACE、U+0009 CHARACTER TABULATION（制表符）、U+000A LINE FEED (LF)、U+000C FORM FEED (FF) 和 U+000D CARRIAGE RETURN （CR）。

因此，在交叉引用 HTML 规范的这三个不同部分之后，我们最终可以得出结论，HTML 中有效的未加引号的属性值是任何非空字符串且不包含空格、制表符、换行符的文本字符串 、换页、回车、"、'、`、=、< 或 >。

CSS（和 JavaScript）选择器中不带引号的属性值

我们也可以在 CSS 中使用不带引号的属性值。 但是，规则略有不同。

a[href="bar"] { /* declarations go here */ }
a[href^="http://"] { /* declarations go here */ }

也可以使用单引号：

a[href='bar'] { /* declarations go here */ }
a[href^='http://'] { /* declarations go here */ }

就像在 HTML 中一样，在某些情况下可以省略属性值周围的引号，但盲目地这样做可能会导致代码损坏：

/* This will work: */
a[href=bar] { /* declarations go here */ }

/* This, on the other hand, is an invalid CSS selector: */
a[href^=http://] { /* declarations go here */ }

那么什么时候可以省略引号呢？

CSS 2.1 和 CSS3 规范都说：

属性值必须是标识符或字符串。

规范说明了以下关于字符串的内容：

字符串可以用双引号或单引号书写。

标识符定义如下：

在 CSS 中，标识符（包括元素名称、类和选择器中的 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 (-) 和下划线 ( _).

ISO 10646 定义了与 Unicode 标准相关的通用字符集。 请注意，他们实际上是在谈论连字符减号——而不是连字符，即 U+2010。 连字符减号的代码点是 U+002D，下划线（低线）的代码点是 U+005F。 Unicode 目前允许的最高代码点是 U+10FFFF。 因此，标识符中允许匹配正则表达式 [-_a-zA-Z0-9\u00A0-\u10FFFF] 的任何字符。

规范继续：

[Identifiers] 不能以一个数字、两个连字符或一个连字符后跟一个数字开头。 标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码 [...]。 例如，标识符 B&W? 可以写成 B\&W\? 或 B\26 W\3F 。

这后来放宽到允许——在标识符的开头引入自定义属性。

翻译成正则表达式：任何匹配 ^-?\d 的字符串都不是有效的 CSS 标识符。 （我之前已经解释过如何转义 CSS 中的任何字符 。）

空字符串也不是有效的 CSS 标识符。 例如，p[class=] 是无效的 CSS 选择器。 单个连字符也是如此：- 不是有效标识符。

因此，CSS 中有效的不带引号的属性值是任何不是空字符串的文本字符串，不仅仅是连字符 (-)，由转义字符和/或匹配 /[-_\u00A0-\u10FFFF]/ 的字符组成，并且不以一个数字或两个连字符或一个连字符后跟一个数字开头。

请注意 ，任何有效的 CSS 选择器也可以与 JavaScript 中的选择器 API 一起使用。 如果我们使用无效的未加引号的属性值，整个 CSS 选择器将变得无效，并且如果与 querySelector 或 querySelectorAll 一起使用将抛出 DOMException。 （请注意，大多数 JavaScript 库在内部使用这些。）正确处理很重要。

Mothereffing 未加引号的属性

即使有了这些简化的定义，记住所有不带引号的属性值的规则仍然是一件痛苦的事情，尤其是当它们在 HTML 和 CSS 之间有所不同时。 如有疑问，最好只使用引号。 如果你感到困惑，其他人也可能会感到困惑。 如果我们在属性值中使用用户输入，请始终引用（并转义）它以防止 XSS 安全漏洞。 请注意，我并不是要推荐在本文中使用不带引号的属性值——这只是我在阅读规范，所以你不必这样做。