在HTML5中使用MathML数学公式

互联网 18-6-5

这篇文章主要介绍了在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 或更高版本进行在线练习。

想象一下，下面是一个使用字符 ⁢ 的标记：

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数学公式

相关资讯

标签推荐