MathML全称是Mathematical Markup Language，也就是数学标记语言，是一种基于XML的标准化标记语言，专门用于描述数学公式和符号，让Web浏览器能够准确渲染各类复杂的数学内容，从简单的加减乘除到微积分、线性代数中的复杂表达式都可以支持。
MathML的基本结构
MathML的文档整体遵循XML的语法规则，所有标签都需要正确闭合，并且区分大小写。它的核心根标签是<math>，所有数学公式的内容都需要放在这个标签内部，同时可以通过xmlns属性声明命名空间，避免和其他XML标准冲突。
一个最简单的MathML示例如下：
<?xml version="1.0" encoding="UTF-8"?>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mn>3</mn>
<mo>=</mo>
<mn>5</mn>
</mrow>
</math>
上面的代码会渲染出“2+3=5”的数学表达式，其中<mn>标签用于表示数字，<mo>标签用于表示运算符，<mrow>标签用于将多个元素组合成一个行内公式块。
MathML的核心元素分类
MathML的元素大致可以分为两类，分别是表示元素和内容元素，日常使用中表示元素的应用场景更多。
常用表示元素
- <mi>：表示标识符，比如变量x、y，或者函数名sin、cos等
- <mn>：表示数值，比如整数、小数、分数等
- <mo>：表示运算符，比如加减乘除、等号、括号等
- <mfrac>：表示分数，有两个子元素，分别是分子和分母
- <msup>：表示上标，比如平方、立方等
- <msqrt>：表示平方根
- <mrow>：用于组合多个元素，相当于公式中的分组括号作用
复杂公式示例
下面是一个二次函数的求根公式的MathML实现：
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
这段代码会正确渲染出标准的二次方程求根公式，根号、分数、上标等结构都会按照数学排版规范显示。
在HTML中使用MathML
目前主流的现代浏览器都已经原生支持MathML的渲染，不需要额外引入JavaScript库就可以直接在HTML页面中使用。使用时只需要将<math>标签直接嵌入到HTML文档的body部分即可，还可以结合CSS设置公式的样式，比如调整字体大小、颜色等。
结合CSS的示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>MathML示例</title>
<style>
math {
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<p>勾股定理的公式是：</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>
MathML的兼容性和注意事项
虽然现代浏览器大多支持MathML，但不同浏览器的渲染效果可能存在细微差异，尤其是旧版本的浏览器可能不支持。如果需要兼容旧环境，可以搭配MathJax等JavaScript库，MathJax可以将MathML内容转换为兼容更多浏览器的渲染结果。
另外需要注意，编写MathML时必须严格遵循XML语法规则，所有标签都要正确闭合，属性值需要用引号包裹，否则浏览器可能无法正确解析公式内容。同时尽量避免在MathML标签内部混入非标准的HTML标签，防止渲染异常。