在HTML5中使用MathML数学公式的简单讲解

HTML5 的 HTML 语法允许我们在文档内使用 <math>...</math> 标签应用 MathML 元素。

下面是一个使用 MathML 的有效 HTML5 文档:

XML/HTML Code复制内容到剪贴板 html    <!doctype html>     <html>     <head>     <meta charset="UTF-8">     <title>Pythagorean theorem</title>     </head>     <body>       <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>    

这会生成如下结果:


复制代码代码如下:a2 + b2 = c2
便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

使用 MathML 字符

想象一下,下面是一个使用字符 &InvisibleTimes; 的标记:

XML/HTML Code复制内容到剪贴板 html    <!doctype html>     <html>     <head>     <meta charset="UTF-8">     <title>MathML Examples</title>     </head>     <body>       <math xmlns="http://www.w3.org/1998/Math/MathML">          <mrow>             <mrow>                <msup>                   <mi>x</mi>                   <mn>2</mn>                </msup>                <mo>+</mo>                <mrow>                   <mn>4</mn>                   <mo></mo>                   <mi>x</mi>                </mrow>                <mo>+</mo>                <mn>4</mn>             </mrow>                <mo>=</mo>                <mn>0</mn>           </mrow>      </math>   </body>   </html>   

这会生成如下结果


复制代码代码如下:x 2 + 4 x + 4 = 0
便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

矩阵表达示例

想象一下下面的例子,它会被用来表示一个简单的 2x2 矩阵:

XML/HTML Code复制内容到剪贴板 html    <!doctype html>     <html>     <head>     <meta charset="UTF-8">     <title>MathML Examples</title>     </head>     <body>       <math xmlns="http://www.w3.org/1998/Math/MathML">          <mrow>             <mi>A</mi>             <mo>=</mo>             <mfenced open="[" close="]">                <mtable>                   <mtr>                      <mtd><mi>x</mi></mtd>                      <mtd><mi>y</mi></mtd>                   </mtr>                   <mtr>                      <mtd><mi>z</mi></mtd>                      <mtd><mi>w</mi></mtd>                   </mtr>                </mtable>            </mfenced>         </mrow>      </math>   </body>   </html>   

这会生成如下结果

在HTML5中使用MathML数学公式的简单讲解