在编写 HTML 页面时，我们通常会使用属性来为元素添加附加信息。属性通常由一个名称和一个值组成，值可以是包含任意字符的字符串。然而，如果我们想在属性值中包含引号，就需要进行一些额外的处理。
引号的种类
在 HTML 中，属性值可以用单引号或双引号括起来。例如：
<a href="https://example.com">Example</a>
或者
<a href='https://example.com'>Example</a>
这两种写法都是合法的，并且它们之间是等价的。因此，无论你使用哪种风格，本文中的技巧都同样适用。
转义引号
如果我们想在属性值中包含与它所用的引号相同的引号，那么我们需要对它进行转义。HTML 中的转义符是实体引用，通过将字符替换为实体引用来表示它们。以下是一些常见的实体引用：
| 字符 | 实体引用 |
|---|---|
| " | " |
| ' | ' |
| < | < |
| > | > |
| & | & |
因此，如果我们要在双引号中包含双引号，我们可以使用 " 实体引用来表示它：
<a href="https://example.com/search?q="example search"">Example Search</a>
这将在 HTML 中呈现为：
<a href="https://example.com/search?q="example search"">Example Search</a>
同样，如果我们要在单引号中包含单引号，我们可以使用 ' 实体引用：
<a href='https://example.com/search?q='example search''>Example Search</a>
这将在 HTML 中呈现为：
<a href='https://example.com/search?q='example search''>Example Search</a>
使用双引号和单引号混合
在某些情况下，我们可能需要在属性值中同时使用双引号和单引号。例如，当我们使用 JavaScript 代码来动态生成 HTML 时。此时，我们可以使用一种称为“相互嵌套”的技术来实现这一点。
假设我们要使用 JavaScript 动态生成以下元素：
<button onclick="alert('Hello, World!')">Click me!</button>我们可以使用双引号作为 onclick 属性值的外部引号，然后在其中使用单引号来表示 JavaScript 字符串：
<button onclick="alert('Hello, World!')">Click me!</button>
注意，在此示例中，我们使用了 ' 实体引用来代替单引号。这是因为我们不能在单引号中使用单引号转义它自己（或反过来使用双引号）。因此，我们需要使用一个不同的实体引用。
结论
在编写 HTML 时，我们需要小心处理引号。如果我们要在属性值中包含与所使用的引号相同的引号，那么我们需要对它进行转义。我们可以使用实体引用来表示这些字符，并且需要注意在不同上下文中使用正确的引号类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30324