HTML5原生支持MathML，需用<math>标签包裹并注意浏览器兼容性；推荐使用presentation MathML控制外观，支持CSS样式，但IE完全不支持。

HTML5 原生支持 MathML，无需额外插件即可在现代浏览器中直接渲染数学公式，但需注意浏览器兼容性与正确写法。

使用 math 标签包裹 MathML 内容

MathML 公式必须放在 <math></math> 标签内，且建议添加命名空间（尤其在 XHTML 或严格解析环境下）：

• 基础写法：<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi><mo>+</mo><mn>1</mn></math>
• HTML5 中可省略命名空间，但保留更稳妥；若嵌入 XML 或 XHTML 文档，必须声明
• <math> 是行内级元素，可像文本一样放在段落中，也可配合 CSS 设置 display 为 block 实现居中独占一行

区分 presentation MathML 和 content MathML

实际网页展示主要用 presentation MathML（控制外观），它由 <mi>（标识符）、<mn>（数字）、<mo>（运算符）、<mfrac>（分式）、<msup>（上标）等组成：

• 分数：<mfrac><mn>1</mn><mn>2</mn></mfrac> → ½
• 平方：<msup><mi>x</mi><mn>2</mn></msup> → x²
• 带根号：<msqrt><mi>a</mi><mo>+</mo><mi>b</mi></msqrt>

处理浏览器兼容性问题

Chrome、Edge（新版）、Safari 对 MathML 支持较好；Firefox 一直原生支持；旧版 Chrome 曾依赖 MathJax，但现在已内置（Chrome 109+ 稳定支持）。若需兼容老旧环境：

立即学习“前端免费学习笔记（深入）”；

• 检查当前浏览器是否启用 MathML：访问 MDN 兼容性表
• 可搭配 <fallback> 或 JS 检测后加载 MathJax 作为降级方案
• 避免在 IE 中使用——IE 完全不支持 MathML，需服务端渲染图片或改用 SVG 方案

配合 CSS 控制样式与布局

MathML 元素可被 CSS 选中并设置字体、大小、颜色等，但部分属性（如 line-height）行为较特殊：

• 统一调整公式大小：math { font-size: 1.2em; }
• 修改变量颜色：mi { color: #2563eb; }
• 让独立公式居中显示：math[display="block"] { display: block; margin: 1em auto; }，并在 HTML 中写 <math display="block">

不复杂但容易忽略：确保文档是 HTML5 类型（<!DOCTYPE html>），且不要把 MathML 写在 <pre> 或 <code> 里——那样只会显示源码而非渲染结果。