未加引号的属性会带来的实际浏览器问题

在 HTML（4、5，无论哪个版本）中，为属性值加引号是可选的，有点像。 以下两种写法完全没问题

<b class=boom>
<b class="boom">

但存在规则和限制。 希望显而易见，这存在问题

<a title=Hi, mom! href=#>

Hi, mom! 中的空格是问题所在。 浏览器会将属性值的 Hi, 视为属性值，并将 mom! 视为一个独立的属性。 任何类似空格的字符都会导致此问题。 Mathias Bynens 创建了一个名为 Mother-effin’ unquoted attribute value validator 的工具，这是一个简单工具，用于评估可能的属性值，查看其是否有效。

问题字符有：空格、制表符、换行符、换页符、回车符、“、’、`、=、< 或 >。

实际问题

所以，这些是规则，但是如果您实际违反了这些规则会发生什么？ 在未加引号的属性中使用其中一些字符会导致严重问题。 其他字符则不会。 有些未在这些规则中提到的字符会导致问题。

让我们看看其中的一些。

---

<div rel></div>
<div rel=></div>

无效，但在任何浏览器中都不是什么大问题。 浏览器只是将 rel 属性视为存在，但为空。

---

<div rel==></div>

无效，但在所有浏览器中都能正常工作。 Rel 属性被视为“=”。

---

<div rel=&></div>

Rel 值在所有现代浏览器（包括 IE 9 和 10）中被视为“&”。 IE 6、7 和 8 看到空值，除非通过 CSS 访问（例如 content: attr(rel);），在这种情况下，该值被视为“&”。

---

<div rel=&a></div>

Rel 值在所有现代浏览器（包括 IE 9 和 10）中被视为“&a”。 IE 6、7 和 8 将该值视为“a”。

---

<div rel=a&b></div>

Rel 值在所有现代浏览器（包括 IE 9 和 10）中被视为“a&b”。 IE 6、7 和 8 将该值视为“a”。

---

<div rel=a&b></div>

在本例中，与符号被编码。 包括 IE 9 和 10 在内的现代浏览器将该值视为“a&b”（与未编码相同）。 IE 6、7 和 8 的行为与上次测试相同，将该值截断为仅“a”。

IE 6、7 和 8 似乎对属性值中的与符号并不担心，但会在它们第一次看到与符号的地方截断该值（除非以与符号开头，否则所有后续字符直到下一个与符号都会被截断）。

---

<div rel=`></div>

所有版本的 IE（甚至包括 10）在这里都会出现问题。 它们将反引号字符视为引号，因此，只使用其中一个反引号，就相当于文档中其余部分直到下一个引号都是属性值的一部分。 所有其他浏览器都没有问题，将该值视为“`”。

<div rel=```></div>

这同样存在问题，因为反引号数量为奇数，它会使一组引号处于打开状态。 所有非 IE 浏览器都将该值视为““`”。

<div rel=``></div>

这问题略小一些，因为 IE 所视为的引号已关闭。 非 IE 浏览器将该值视为““”。

---

<div rel=<></div>

包括 IE 9 和 10 在内的现代浏览器将 rel 属性值视为“<”。 IE 6 和 7 将该值视为空白，但不会出现重大灾难。 IE 8 通过 JavaScript 将该值视为空白，但通过 CSS 将该值视为“<” (例如 content: attr(rel);)。

---

<div rel=>></div>

这里，我们试图将该值设置为“>”，但实际上，我们创建了一个带有实际“>”的 div。 另一种查看方法是

<div rel=>
  >
</div>

在所有浏览器中，rel 属性将为空。

---

<div rel={@#():,*!![[]]}></div>

这看起来很奇怪，但这些字符中没有一个是存在问题的，并且没有哪个浏览器对此有任何问题。

---

<div rel='></div>

<div rel="></div>

这在所有浏览器（单引号或奇数引号）中都是存在问题的。 与反引号的情况类似，只是所有浏览器都理解引号和引号。 这是一个灾难性的问题，因为文档中其余部分直到下一个引号都会被视为该属性的值。

---

在本文中，“现代浏览器”通常指 Safari 5.0、Firefox 4、Chrome 12 和 Opera 11。 IE 通常按版本列出。“所有浏览器”是指我列出的现代浏览器加上 IE 6-10。 我用于测试的一些内容位于 这个 Pen 中，可以根据需要轻松修改以进行更多测试。 没有使用任何 JS 库。

另请参阅 Mathias 的 深入文章，该文章还涵盖了在 CSS 中使用它们的方法。

结论：如果您对上述内容感到困惑，请为所有属性加上引号。