html中未转义会触发标签解析导致dom错乱,纯文本需用</>,textcontent比innerhtml更安全,xml场景下转义是强制要求且更严格。

HTML 中直接写 <code>> 会触发标签解析,必须转义
浏览器遇到未转义的 会尝试解析为开始标签,<code>> 则可能提前结束当前标签,导致 DOM 结构错乱、脚本执行异常或内容截断。这不是“显示问题”,而是 HTML 解析器的底层行为。
- 纯文本场景(如
<div> 作为代码示例):必须用 <code><和> - 属性值中出现
(如 <code>title="x ):同样需转义,否则可能被误判为标签结束 - 服务端模板(如 Jinja2、Thymeleaf)或前端框架(React/Vue)通常自动转义,但手动拼接字符串或使用
innerHTML时失效
textContent 比 innerHTML 更安全,避免意外解析
当你要把含特殊字符的字符串插入页面,优先用 textContent——它把内容当纯文本处理,不经过 HTML 解析器。
const el = document.getElementById('output');
el.textContent = 'a < b & c > d'; // 显示为:a < b & c > d
// 不会变成:<b>标签被解析</b>,也不会触发 XSS-
innerHTML会解析所有标签和实体,哪怕你只想要显示<字面量 -
textContent对<这类已转义字符串也照单全收,不会二次解码 - 若必须用
innerHTML(如渲染富文本),先确保输入已由可信来源提供,且做过白名单过滤
XML 场景下 < > 不是可选,而是强制要求
XML 解析器比 HTML 更严格: <code>> & 在文本节点或属性值中未转义即报错,无法容忍“宽松解析”。
- 常见错误:把 HTML 片段直接塞进 XML(如 RSS feed 或 SOAP body),导致
ParseError: not well-formed - 必须转义的字符只有 5 个:
<,>,&,",'(后两者仅在属性值中必要) - Python 示例(用
xml.sax.saxutils.escape):from xml.sax.saxutils import escape escape('a < b & c > d') # → 'a < b & c > d'
别依赖浏览器“自动修复”,尤其在 XHTML 或 XML MIME 类型下
如果响应头是 Content-Type: application/xhtml+xml 或 application/xml,浏览器将按 XML 规则严格校验——任何未转义的 都会导致整个页面空白并抛出解析错误。
立即学习“前端免费学习笔记(深入)”;
- 开发时检查 Network 面板中的响应头,确认 MIME 类型是否意外触发 XML 模式
- 用
document.contentType在控制台验证当前文档解析模式 - 服务端输出 XML 前务必做转义,前端 JS 生成 XML 字符串时也要手动处理,不能靠 innerHTML 补救
真正容易被忽略的是:同一段字符串,在 HTML 页面里用 textContent 安全,在发给后端的 XML 请求体里却必须再做一次 < 转义——因为两者的解析上下文完全不同。









