这篇文章主要介绍了在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 字符 想象一下,下面是一个使用字符 ⁢ 的标记:
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
|