XML和HTML虽然都源自SGML，看起来语法相似，但它们的解析规则完全不同。HTML解析器天生宽容，标签忘了闭合、属性没加引号大多也能渲染出来；而XML解析器严格遵守规范，哪怕一个小小的未转义字符都会让整个文档解析失败。当两者混合使用时，比如在HTML页面中嵌入XML数据岛、用XSLT转换XML输出HTML、或者把HTML内容塞进XML节点里传递，稍不注意就会踩坑。本文从语法差异、转义处理、命名空间等几个角度，详细说说混合使用时要注意的问题。
一、先弄清两者语法规则的本质差异
HTML5的解析规则允许标签省略闭合，比如<li>、<p>、<br>都可以不写结束标签，浏览器会自动补全。但XML要求所有标签必须显式闭合，空元素要么写成<br/>，要么写成<br></br>。如果在XML文档里写<br>，解析器会直接报错。
大小写也是容易出问题的地方。HTML对标签名不敏感，<DIV>和<div>在浏览器眼里是同一个东西。XML严格区分大小写，<Book>和<book>是两个完全不同的标签，开始标签和结束标签大小写不一致就会解析失败。混合使用时如果手工拼接字符串生成XML，这类错误特别常见。
属性值的引号同样如此。HTML允许width=100这种写法，XML要求属性值必须用引号包裹，单引号双引号都可以，但不能省略。另外HTML有布尔属性（比如disabled），XML中没有这种概念，必须写成disabled="true"的形式，否则解析报错。
二、特殊字符转义与CDATA的正确用法
在XML中输出HTML片段时，特殊字符处理是绕不开的坎。XML规范规定<、>、&必须转义为<、>、&。如果要把一段带标签的HTML存进XML节点，有两种做法：一是逐字符转义，二是用CDATA区块包裹。
CDATA的作用是告诉解析器：这段内容原样保留，不要解析里面的标记。写法如下：
<content><![CDATA[ <p>这是一段<strong>HTML内容</strong>，含有 & 符号和 < 标签都安全</p> ]]></content>
需要注意的是，CDATA内部不能再出现]]>这个序列，否则会被当作CDATA的结束标记。如果你的HTML内容里恰好包含这样的字符串（比如嵌套的CDATA或某些JS代码），就会出问题。此外，在XHTML页面中内联脚本或样式时，传统的写法是把脚本包在CDATA里，但要注意XHTML规范下CDATA必须配合XML注释技巧，否则老浏览器会把CDATA标记当成JS代码执行而报语法错误：
<script type="text/javascript">
// <![CDATA[
if (a < b && c > d) {
alert("比较运算符在XHTML中需要CDATA保护");
}
// ]]>
</script>还有一个隐蔽的坑：JavaScript代码中的&&运算符。在HTML4里浏览器容忍不转义的与符号，但在严格XHTML解析环境下，裸露的&会直接导致脚本解析失败，这也是为什么很多老项目会报找不到实体错误。
三、在HTML中嵌入XML数据的注意事项
早期IE浏览器支持一种叫数据岛的技术，直接用<xml>标签把XML写在HTML里，现代浏览器早已不支持。现在更常见的场景是：服务端返回XML格式的接口数据，前端用DOMParser解析后动态渲染。用原生API解析比正则匹配字符串可靠得多：
fetch('/api/data.xml')
.then(res => res.text())
.then(str => {
const parser = new DOMParser();
const doc = parser.parseFromString(str, 'application/xml');
// 检查解析错误
const err = doc.querySelector('parsererror');
if (err) {
console.error('XML解析失败：', err.textContent);
return;
}
const items = doc.querySelectorAll('item');
items.forEach(item => {
const title = item.querySelector('title').textContent;
console.log(title);
});
});这段代码有个细节值得注意：DOMParser解析失败时不会抛异常，而是返回一个包含parsererror节点的文档，必须主动检查。很多人以为加了try-catch就万事大吉，结果页面上数据一片空白还找不到原因，问题就出在这里。
动态把XML数据插入HTML时，千万别用innerHTML直接拼接。XML转义后的实体（比如&nbsp;）在HTML上下文中语义可能不同，而且拼接过程存在XSS风险。推荐用textContent赋值，或者用createElement构建节点后再插入，这样既能保证安全，又避免了转义混乱。
四、MIME类型与XHTML的坑
混合使用时服务端配置也很关键。如果页面声明是XHTML却以text/html类型输出，浏览器会按HTML宽容模式解析，XML的严格规范形同虚设；反之以application/xhtml+xml输出时，任何XML语法错误都会导致浏览器直接拒绝渲染，显示一大段黄色错误信息，而不是像HTML那样带病运行。所以要么保证代码百分之百合规，要么明确用宽松模式，不要两种心态混着来。
另外提醒一点：在HTML5页面中，<svg>和<math>标签内部实际上就是XML语法（或者说是XML的子集），所以这些标签内部的元素必须正确闭合、区分大小写。<path />和<PATH>的写法在SVG内部会直接失效，这是HTML页面里最容易出现的XML语法污染问题，排查时不要只盯着HTML标签本身。
总结一下，XML与HTML混合使用的核心原则是：明确每一段内容的解析上下文，XML部分严格遵守闭合、大小写、转义三项规则，跨上下文传递数据时始终通过解析器而不是字符串拼接。做到这几点，绝大多数解析报错都能提前避免。