HTML5将MathML纳入规范后，开发者可以直接在网页中嵌入数学公式，无需依赖第三方JavaScript库，这种方式不仅加载速度快，还符合网页标准。MathML是专门描述数学符号和公式的标记语言，语法结构和HTML类似，通过不同的标签组合可以表达复杂的数学逻辑。
MathML基础使用前提
要在HTML5中使用MathML，首先需要确保文档的DOCTYPE声明为HTML5标准，即文档开头包含<!DOCTYPE html>，同时根标签的xmlns属性不需要额外设置，现代浏览器会自动识别MathML内容。如果需要在XHTML文档中使用，才需要添加对应的命名空间声明。
行内与块级公式的嵌入
MathML公式分为行内公式和块级公式两种形式，行内公式会和普通文本在同一行显示，块级公式则会单独占据一行并居中显示。
行内公式示例
行内公式用<math>标签直接包裹公式内容，比如一元二次方程的求根公式可以这么写：方程<math><mi>x</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math>是<math><mi>a</mi><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mi>b</mi><mi>x</mi><mo>+</mo><mi>c</mi><mo>=</mo><mn>0</mn></math>的求解公式。
块级公式示例
块级公式同样使用<math>标签，只需要将其放在独立的段落中，或者通过CSS设置display: block即可，以下是一个积分公式的示例：
<p>积分公式如下：</p>
<math display="block">
<mrow>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mi>∞</mi>
</msubsup>
<msup>
<mi>e</mi>
<mrow>
<mo>-</mo>
<mi>x</mi>
</mrow>
</msup>
<mi>d</mi>
<mi>x</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
</math>
常用MathML标签说明
MathML的标签分工明确，以下是开发中常用的标签分类：
<mi>：表示标识符，比如变量名x、y，函数名sin等<mn>：表示数字，比如1、2.5、-3等<mo>：表示运算符，比如加减乘除、等号、积分号等<mfrac>：表示分数，子标签依次是分子和分母<msqrt>：表示平方根，<mroot>表示n次根<msup>：表示上标，<msub>表示下标，<msubsup>同时表示上下标<mrow>：用于分组，将多个元素组合成一个整体，避免运算顺序错误
浏览器兼容与显示优化
目前Firefox、Safari等浏览器原生支持MathML的渲染，Chrome从版本109开始也默认开启了MathML支持。如果需要在旧版本浏览器或者不支持MathML的环境中显示公式，可以搭配MathJax等库做降级处理，当浏览器不支持原生MathML时自动转换为SVG或者图片渲染。
以下是一个简单的兼容处理示例，当浏览器不支持MathML时加载MathJax：
<script>
// 检测浏览器是否支持MathML
if (!document.createElement('math').namespaceURI) {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
document.head.appendChild(script);
}
</script>
复杂公式编写示例
下面展示一个包含矩阵和求和符号的复杂公式，帮助理解多标签组合的用法：
<math display="block">
<mrow>
<mi>S</mi>
<mo>=</mo>
<munderover>
<mo>∑</mo>
<mrow>
<mi>i</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mi>n</mi>
</munderover>
<msub>
<mi>a</mi>
<mi>i</mi>
</msub>
<mo>×</mo>
<mfenced>
<mtable>
<mtr>
<mtd><msub><mi>b</mi><mn>1</mn></msub></mtd>
<mtd><msub><mi>b</mi><mn>2</mn></msub></mtd>
</mtr>
<mtr>
<mtd><msub><mi>b</mi><mn>3</mn></msub></mtd>
<mtd><msub><mi>b</mi><mn>4</mn></msub></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
通过上述方法，开发者可以根据需求灵活嵌入各类数学公式，既保证了网页的标准化，也能满足不同场景下的公式展示需求。