HTML中的单引号和双引号
当您尝试在 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。
如何在 HTML 中使用单引号
在值中显示单引号的最简单解决方案是在 HTML 中使用双引号。
这看起来像这样:
<input value="it's"/>
在上面的示例中,单引号在双引号中并且是有效的 HTML。结果将是 的值it's
。
如果我们想在值内显示双引号,我们可以交换内容。这次我们将使用单引号将属性的值包裹起来,然后我们可以在里面随意使用双引号。
这是在 HTML 中的样子:
<input value='This will not "break" the HTML'/>
结果将是This will not "break" the HTML
显示在页面上的值。
使用此修复程序时,我们需要注意两件事:
- 如果我们需要在值中同时使用单引号和双引号会发生什么
- 如果我们无法控制用于包装值的字符怎么办。
在这种情况下,我们需要查看使用转义字符串的第二个修复程序。
使用 HTML 转义字符串
有时您无法控制用于包装 HTML 值的字符。
在 CMS 中,默认设置单引号或双引号是很常见的,您无法更改它们。
另一种情况是您需要在值中同时显示单引号和双引号,如下所示:
<input value='You're going to "break" the HTML'/>
将显示为You
not 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's'/>
尽管这在 HTML 中看起来很奇怪。当浏览器显示该值时,它将向用户显示为“it's”。
那么我们如何对双引号做同样的事情呢?
有很多方法可以写双引号:
“
”
“
”
“
”
"
"
"
您应该使用的唯一一个是"
. 因此,以我们的示例为例,您同时使用单引号和双引号,您的 HTML 将如下所示:
<input value="You're going to "break" the HTML"/>
这将显示“你将要“破坏”HTML”的值
所以我们现在有一个解决这个问题的方法,耶!
引号不是您可以转义的唯一字符。
接下来让我们看看这些。
转义特殊字符
有大量特殊字符可以用同样的方式转义。涵盖从冒号到&符号的所有内容。
然而,我只需要逃脱 5。
如果您对完整列表感到好奇,那么 w3 创建了所有HTML 特殊字符的列表。
这是我需要考虑转义的唯一 5 个列表:
- & 成为
&
- <变成
<
变成
>
- "变成
"
- '变成
'
有了这些转义,您就不应该再次破坏 HTML。
经常问的问题
我可以在 HTML 中使用单引号吗?
是的你可以!确保使用双引号来包装您的值或使用'
.
如何在 HTML 中转义单引号?
我们的建议是使用 HTML 5 标准'
。
总结,HTML 中的单引号
谁能想到用 HTML 写单引号的方法有这么多!
我们已经研究了对单引号破坏 HTML 问题的两个修复。
- 我们使用双引号来包裹属性的值
- 我们使用转义字符串表示字符
当您需要同时使用单引号和双引号时,您可以使用以下内容:
- "变成
"
- '变成
'
请记住,您只需要转义 5 个特殊字符:
- & 成为
&
- <变成
<
变成
>
- "变成
"
- '变成
'
一旦你把这些转义了,你就不应该再遇到 HTML 中损坏的值的问题了。
HTML中的单引号和双引号相关推荐
- c语言双引号和单引号的区别_Python中的单引号和双引号有什么区别?
在Python中使用单引号或双引号是没有区别的,都可以用来表示一个字符串.但是这两种通用的表达方式可以避免出错之外,还可以减少转义字符的使用,使程序看起来更清晰. 举两个例子: 1.包含单引号的字符 ...
- java中双引号和单引号_Java中的单引号和双引号之间有区别吗?
问题 Java中的单引号和双引号之间有区别吗? #1 热门回答(126 赞) 对于literalchar使用单引号,对于literalString使用双引号,如下所示: char c = 'a'; S ...
- php双引号表示什么,PHP中的单引号和双引号字符串有什么区别?
PHP中的单引号和双引号字符串有什么区别? 我不是PHP编程的专家,但我有点困惑为什么我在PHP中看到一些代码用单引号放入字符串,有时用双引号. 我只是在.NET或C语言中知道,如果它是单引号,这意味 ...
- js html 单引号,JS 和 HTML 中的单引号与双引号
JS中的单引号与双引号 HTML中的单引号与双引号很简单,就是两个字符实体: 显示 描述 实体名称 实体编号 " 双引号.引号 " " ' 单引号.撇号 ' ' x 1 ...
- PostgreSQL 中的单引号与双引号
PostgreSQL 中的单引号与双引号 在pg中的sql,单引号用来标识实际的值,双引号用来标识表名(table name)或列名(column name)等数据库中存在的值. 如,执行一句quer ...
- python代码什么时候用单引号_Python 中的单引号和双引号有什么区别?
在Python当中可以使用单引号,也可以使用双引号,那两者有什么区别吗? 简单来说,在Python中使用单引号或双引号是没有区别的,都可以用来表示一个字符串.但是这两种通用的表达方式,除了可以简化程序 ...
- html中单引号与双引号区别,JS 和 HTML 中的单引号与双引号
JS中的单引号与双引号 HTML中的单引号与双引号很简单,就是两个字符实体: 显示 描述 实体名称 实体编号 " 双引号.引号 " " ' 单引号.撇号 ' ' x 1 ...
- Python中的单引号和双引号 的使用有什么区别
在Python当中表达字符串既可以使用单引号,也可以使用双引号 简单来说,在Python中使用单引号或双引号是没有区别的,都可以用来表示一个字符串.但是这两种通用的表达方式,除了可以简化程序员的开发, ...
- shell中的单引号和双引号
shell中的单引号和双引号 在shell中,如果需要定义或引用变量通常需要使用双引号,如果希望不解析变量,直接原样输出内容可以使用单引号. 因为双引号首先会先解析变量的内容,而单引号包裹的内容表示原 ...
- php中单引号,php中的单引号、双引号和转义字符详解
PHP单引号及双引号均可以修饰字符串类型的数据,如果修饰的字符串中含有变量(例$name):最大的区别是: 双引号会替换变量的值,而单引号会把它当做字符串输出. 例如: 结果: 字符串$name 字符 ...
最新文章
- 职称计算机初级应知应会书,2017专业技术职称申报应知应会.ppt
- 如何用windbg查看_eprocess结构
- 库克的采访给我们带来的思考!
- linux系统命令make、clean、distclean的用法讲解
- ESFramework介绍之(23)―― AgileTcp
- Java基础-Collection集合接口(List及Set)
- LeetCode 求解电话号码组合(分治法求解)
- 牛客网暑期ACM多校训练营(第九场)H. Prefix Sum(CDQ分治)
- 多路复用器_多路复用、非阻塞、线程与协程
- python笔记之循环控制
- OAuth 2和JWT - 如何设计安全的API?
- Javascript的防抖和节流、VUE的防抖和节流
- 地图编辑器怎样炼成的
- 详解c语言欧拉函数,【基础数论】十分钟学会计算欧拉函数
- 联想旗下佳沃集团拟收购智利三文鱼公司Australis Seafoods S.A.
- 【Linux】Linux命令详解
- NetXpert XG帮您解决“布线安装与维护”难题
- flutter 右滑手势
- minecraft 局域网联机问题一个可能的解决办法
- 圆/椭圆/抛物线/双曲线等圆锥曲面/二次曲线公式总结