html5规范虽承认mathml,但浏览器原生支持极差:firefox有限支持、safari部分支持、chrome完全不渲染;必须显式声明xmlns命名空间,且推荐使用mathjax或katex等js库替代。

HTML5 中 <math></math> 标签本身不被原生支持
直接在 HTML 文件里写 <math><mi>x</mi></math>,浏览器大概率没反应——不是你写错了,是绝大多数浏览器(包括 Chrome、Firefox、Edge)至今不解析裸 <math></math>。HTML5 规范虽“承认” MathML,但实现靠浏览器,而实际支持只存在于 Firefox 原生(有限)、Safari 部分支持,Chrome 完全不支持渲染 <math></math> 块。
所以别纠结“HTML5 支持哪些符号”,先解决“怎么让公式真正在页面上显示出来”这个前提。
用 MathML 必须配合 <math xmlns="http://www.w3.org/1998/Math/MathML"></math> 命名空间
即使 Firefox 支持 MathML,漏掉命名空间也会静默失败。这不是可选属性,是强制要求。
-
xmlns属性必须完整写出,不能简写成xmlns="mathml"或省略 - 嵌套在
<svg></svg>或 Shadow DOM 中时,命名空间需显式继承,否则公式变空白 - 用构建工具(如 Vite、Webpack)时,若 HTML 被插件处理(如 html-minifier),可能意外删掉
xmlns——要检查最终输出的 HTML 源码
正确写法示例:
立即学习“前端免费学习笔记(深入)”;
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>更靠谱的落地方案:用 MathJax 或 KaTeX 渲染 LaTeX
绕过浏览器 MathML 实现差异,直接用 JS 库把 LaTeX 字符串转为可缩放 SVG 或 HTML+CSS。这是当前 95% 生产项目的实际做法。
-
MathJax支持完整 LaTeX 数学语法,兼容性极好,但体积大(~300KB+),启动稍慢 -
KaTeX更轻量(~30KB)、渲染快,但不支持所有 LaTeX 命令(比如cancel需额外加载扩展) - 二者都默认识别
$$...$$和[...]等 LaTeX 容器,无需手写 MathML 标签 - 若内容来自 CMS 或用户输入,务必对 LaTeX 源做基本校验(如防止
input{}类危险命令),KaTeX 默认禁用外部文件加载,相对更安全
例如用 KaTeX 渲染二次方程:
<span class="katex"></span>
<script>
katex.render("x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}", document.querySelector(".katex"));
</script>符号支持取决于渲染引擎,不是 HTML5 版本
所谓“HTML5 支持的数学符号”,本质是问 MathML 规范定义了哪些元素,以及当前渲染器(Firefox/MathJax/KaTeX)是否实现了它们。
-
<mo>+</mo>、<mi>x</mi>、<mn>3.14</mn>这类基础元素,三者都支持 -
<menclose notation="radical"></menclose>(带根号的包裹)在 Firefox 原生中有效,KaTeX 用\sqrt{}模拟,MathJax 则两者都认 - 像
<mmultiscripts></mmultiscripts>(多重上下标)这种冷门结构,KaTeX 目前不支持,得退化为文字描述或图片 - 字体 fallback 很关键:MathML 渲染依赖系统数学字体(如 STIX、Cambria Math),缺失时符号可能显示为方块;KaTeX/MathJax 自带 Web 字体,不受系统影响
真正卡住项目的,往往不是“哪个符号不支持”,而是“为什么这个明明合法的 <msubsup></msubsup> 在 Chrome 里完全不显示”——答案通常是:你忘了它压根不支持原生 MathML。











