在HTML5中使用MathML数学公式

2020-07-19 04:19:24
这篇文章主要介绍了在HTML5中使用MathML数学公式的简单讲解,math标签的妙用往往可以收货意想不到的效果,需要的朋友可以参考下

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>

这会生成如下结果
2016219113648268.jpg (86×68)

相关推荐:

使用HTML5 Canvas API中的clip()方法裁剪区域图像