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

它会破坏您的 HTML 吗？

答案是，这取决于。

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

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

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

• 为什么单引号会破坏您的 HTML？
• 如何在 HTML 中使用单引号
• 使用 HTML 转义字符串
• 转义特殊字符
• 经常问的问题
  • 我可以在 HTML 中使用单引号吗？
  • 如何在 HTML 中转义单引号？
• 总结，HTML 中的单引号

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

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

以图像为例：

<img src='cat.png'/>

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

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

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

<input value='hello'/>

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

<input value="hello"/>

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

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

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

<input value='it's'/>

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

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

<input value="This will "break" the HTML"/>

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

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

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

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

如何在 HTML 中使用单引号

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

这看起来像这样：

<input value="it's"/>

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

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

这是在 HTML 中的样子：

<input value='This will not "break" the HTML'/>

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

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

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

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

使用 HTML 转义字符串

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

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

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

<input value='You're going to "break" the HTML'/>

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

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

<input value="You're going to "break" the HTML"/>

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

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

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

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

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

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

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

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

他们都在这里：

• ‘
• ’
• ‘
• ’
• ‘
• ’
• '
• '
• ‘
• '

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

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

<input value='it&#39;s'/>

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

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

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

• “
• ”
• “
• ”
• “
• ”
• "
• "
• "

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

<input value="You&#39;re going to &#34;break&#34; the HTML"/>

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

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

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

接下来让我们看看这些。

转义特殊字符

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

然而，我只需要逃脱 5。

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

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

• & 成为&
• <变成<

•  

  变成>

• "变成"
• '变成'

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

经常问的问题

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

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

如何在 HTML 中转义单引号？

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

总结，HTML 中的单引号

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

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

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

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

• "变成"
• '变成'

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

• & 成为&
• <变成<

•  

  变成>

• "变成"
• '变成'

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