HTML中的单引号和双引号

不念不忘少年蓝@ 2023-09-29 15:38 3阅读 0赞

当您尝试在 HTML 中添加单引号时会发生什么？

它会破坏您的 HTML 吗？

答案是，这取决于。

HTML 中的单引号可能会破坏您的网站。

如果单引号破坏了您的 HTML，那么我在这里为您提供帮助！

让我们看看它发生的原因以及解决它的两种方法。

*  [为什么单引号会破坏您的 HTML？][HTML]
 *  [如何在 HTML 中使用单引号][HTML 1]
 *  [使用 HTML 转义字符串][HTML 2]
 *  [转义特殊字符][Link 1]
 *  [经常问的问题][Link 2]
    
     *  [我可以在 HTML 中使用单引号吗？][HTML 3]
     *  [如何在 HTML 中转义单引号？][HTML 4]
 *  [总结，HTML 中的单引号][HTML 5]

### **为什么单引号会破坏您的 HTML？** ###

编写 HTML 时，您使用引号将属性值括起来。

以图像为例：

这里属性是`src`，值 ( `cat.png`) 用单引号括起来。

有两种方法可以包装你的值，单引号或双引号。

如果您使用单引号，那么您的 HTML 将如下所示：

你也可以使用双引号来做同样的事情，在这种情况下，你的 HTML 将如下所示：

单引号和双引号在 HTML 中都有效，并且所有浏览器都支持它们。

当您需要在值内使用单引号或双引号时，就会出现问题。

例如，添加单词“it's”会破坏单引号 HTML。像这样：

因为值内有一个单引号，所以它结束了值的包装。该 HTML 然后将显示为`it`而不是`it's`。

如果您使用双引号将值包裹起来，然后在值内使用双引号，情况也是如此，如下所示：

显示的 HTML 将是`This will`而不是`This will "break" the HTML`.

我们有两种方法可以解决这个问题。

1.  我们可以使用双引号进行包装，然后我们可以在值内自由使用单引号
2.  我们可以使用特殊的转义字符

接下来让我们看一下选项1。

### **如何在 HTML 中使用单引号** ###

在值中显示单引号的最简单解决方案是在 HTML 中使用双引号。

这看起来像这样：

在上面的示例中，单引号在双引号中并且是有效的 HTML。结果将是 的值`it's`。

如果我们想在值内显示双引号，我们可以交换内容。这次我们将使用单引号将属性的值包裹起来，然后我们可以在里面随意使用双引号。

这是在 HTML 中的样子：

结果将是`This will not "break" the HTML`显示在页面上的值。

使用此修复程序时，我们需要注意两件事：

1.  如果我们需要在值中同时使用单引号和双引号会发生什么
2.  如果我们无法控制用于包装值的字符怎么办。

在这种情况下，我们需要查看使用转义字符串的第二个修复程序。

### **使用 HTML 转义字符串** ###

有时您无法控制用于包装 HTML 值的字符。

在 CMS 中，默认设置单引号或双引号是很常见的，您无法更改它们。

另一种情况是您需要在值中同时显示单引号和双引号，如下所示：

将显示为`You`not `You're going to "break" the HTML`。

如果我们使用双引号也是如此：

将显示为`You're going to`not `You're going to "break" the HTML`。

那么我们如何解决这个问题呢？

我们需要使用一组特殊的字符，称为“转义”字符串。

而不是使用单引号，而是用一组特殊的字符替换它。浏览器会将特殊字符集显示为单引号。

例如，这组奇怪的字符`'`与使用单引号相同。

当你第一次设置它时很奇怪，但是浏览器会读取这个字符串`'`并将它变成一个单引号。

这些奇怪的字符转义字符串有很多。

有十个不同的代表一个单引号。十！

他们都在这里：

*  `‘`
 *  `’`
 *  `‘`
 *  `’`
 *  `‘`
 *  `’`
 *  `'`
 *  `'`
 *  ``
 *  `'`

所以当你需要逃跑时，你应该使用哪一个。

简短的回答是你应该使用`'`. 这是用于 HTML 5的[官方转义字符串。因此，使用前面的示例，我们可以编写：][Link 3]

尽管这在 HTML 中看起来很奇怪。当浏览器显示该值时，它将向用户显示为“it's”。

那么我们如何对双引号做同样的事情呢？

有很多方法可以写双引号：

*  `“`
 *  `”`
 *  `“`
 *  `”`
 *  `“`
 *  `”`
 *  `"`
 *  `"`
 *  `"`

您应该使用的唯一一个是`"`. 因此，以我们的示例为例，您同时使用单引号和双引号，您的 HTML 将如下所示：

这将显示“你将要“破坏”HTML”的值

所以我们现在有一个解决这个问题的方法，耶！

引号不是您可以转义的唯一字符。

接下来让我们看看这些。

### **转义特殊字符** ###

有大量特殊字符可以用同样的方式转义。涵盖从冒号到＆符号的所有内容。

然而，我只需要逃脱 5。

如果您对完整列表感到好奇，那么 w3 创建了所有[HTML 特殊字符][HTML 6]的列表。

这是我需要考虑转义的唯一 5 个列表：

*  & 成为`&`
 *  <变成`<`
 *  > 变成`>`
 *  "变成`"`
 *  '变成`'`

有了这些转义，您就不应该再次破坏 HTML。

### **经常问的问题** ###

#### 我可以在 HTML 中使用单引号吗？ ####

是的你可以！确保使用双引号来包装您的值或使用`'`.

#### 如何在 HTML 中转义单引号？ ####

我们的建议是使用 HTML 5 标准`'`。

### **总结，HTML 中的单引号** ###

谁能想到用 HTML 写单引号的方法有这么多！

我们已经研究了对单引号破坏 HTML 问题的两个修复。

1.  我们使用双引号来包裹属性的值
2.  我们使用转义字符串表示字符

当您需要同时使用单引号和双引号时，您可以使用以下内容：

*  "变成`"`
 *  '变成`'`

请记住，您只需要转义 5 个特殊字符：

*  & 成为`&`
 *  <变成`<`
 *  > 变成`>`
 *  "变成`"`
 *  '变成`'`

一旦你把这些转义了，你就不应该再遇到 HTML 中损坏的值的问题了。

[HTML]: https://pagedart.com/blog/single-quote-in-html/#why-do-single-quotes-break-your-html
[HTML 1]: https://pagedart.com/blog/single-quote-in-html/#how-to-use-single-quote-in-html
[HTML 2]: https://pagedart.com/blog/single-quote-in-html/#using-html-escape-strings
[Link 1]: https://pagedart.com/blog/single-quote-in-html/#escape-special-characters
[Link 2]: https://pagedart.com/blog/single-quote-in-html/#frequently-asked-questions
[HTML 3]: https://pagedart.com/blog/single-quote-in-html/#can-i-use-single-quotes-in-html
[HTML 4]: https://pagedart.com/blog/single-quote-in-html/#how-do-you-escape-a-single-quote-in-html
[HTML 5]: https://pagedart.com/blog/single-quote-in-html/#wrapping-up-single-quote-in-html
[Link 3]: https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML
[HTML 6]: https://www.w3.org/wiki/Common_HTML_entities_used_for_typography