全能工具 全能工具
暂无最近使用记录
暂无收藏工具

HTML转义

关于HTML转义工具

做前端开发或者写技术博客的时候,经常需要在网页上展示一段HTML源代码。如果直接把代码贴上去,浏览器会把尖括号当成真正的标签来解析,页面就乱了。HTML转义就是把这些有特殊含义的字符换成对应的实体编码,比如把 < 变成 &lt;,这样浏览器就会原样显示而不会去执行它。

除了展示代码,HTML转义在安全领域也非常关键。用户提交的评论、留言如果不做转义直接插入页面,攻击者可以嵌入恶意脚本造成XSS跨站攻击。本工具支持转义和反转义两个方向的操作,转义时把五个关键字符(尖括号、和号、双引号、单引号)全部替换为实体编码,反转义则把实体编码还原回原始字符。处理完还能实时预览渲染效果,方便确认结果是否正确。所有操作在浏览器本地完成,代码内容不会发送到任何服务器。

转义知识速查

转义是做什么的
把HTML里有特殊作用的字符(尖括号、和号等)换成实体编码,让浏览器原样显示而不解析执行。
防范XSS攻击
用户提交的内容不转义就插入页面,攻击者可以注入恶意脚本窃取cookie或劫持会话,转义是最基本的防线。
展示代码片段
技术文档和博客里要贴HTML代码示例时,必须先转义才能让读者看到源代码本身而不是渲染后的效果。
数据入库安全
用户输入存入数据库前做转义、取出渲染时再反转义,是Web开发中保障数据安全的标准做法。
两种实体写法
HTML实体分命名形式(如 &lt;)和数字形式(如 &#60;),两者效果完全一样,命名形式更好记。
五个必转字符
HTML规范中必须转义的字符有五个:小于号、大于号、和号、双引号、单引号,它们都有特殊语法含义。

常用HTML实体速查表

字符 实体名称 实体编号 说明
<&lt;&#60;小于号,标签起始符
>&gt;&#62;大于号,标签结束符
&&amp;&#38;和号,实体引用起始符
"&quot;&#34;双引号,属性值定界符
'&apos;&#39;单引号,属性值定界符
 &nbsp;&#160;不间断空格
©&copy;&#169;版权符号
®&reg;&#174;注册商标

常见问题

什么是XSS攻击?HTML转义如何防护?
XSS(跨站脚本攻击)是攻击者在网页中注入恶意脚本,窃取用户数据或执行恶意操作。对用户输入的内容进行HTML转义,可以防止等标签被执行。
应该在存储时转义还是显示时转义?
推荐在显示时转义(输出编码)。存储原始数据便于搜索和其他用途。如果在存储时转义,数据可能需要多次转义导致混乱,而且不同输出场景(HTML、JSON、URL)需要不同的编码方式。
&nbsp;和普通空格有什么区别?
&nbsp;是不间断空格(No-Break Space),不会被浏览器合并,也不会在此处换行。普通空格连续多个会被合并为一个。需要保留多个空格或防止自动换行时使用&nbsp;。
单引号在HTML中必须转义吗?
取决于上下文。在HTML属性值中,如果属性值用单引号包裹,则单引号必须转义。建议统一转义单引号和双引号('→&#39; "→&quot;),确保在任何上下文都安全。
为什么有些框架自动转义HTML?
现代前端框架(React、Vue、Angular)默认对插值内容进行HTML转义,防止XSS攻击。如需插入HTML,需要使用特殊方法(如v-html、dangerouslySetInnerHTML),且需确保内容安全。
JSON中需要HTML转义吗?
JSON本身不需要HTML转义,它有自己的转义规则(如双引号用\")。但如果JSON数据最终要嵌入HTML页面,或者内容会被渲染为HTML,则仍需要进行HTML转义。
HTML表单用户输入了特殊字符,需要手动转义吗?
是的,浏览器不会自动对用户提交的表单内容进行HTML转义。为防止XSS攻击,后端接收到数据后,必须进行HTML实体转义处理,确保数据在页面显示时是安全的。

相关工具

本工具所有处理均在浏览器本地完成,粘贴的代码不会上传到服务器,请放心使用。