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

给自己一个目标,给自己一个希望,给自己一份爱一份温暖,只为今天快乐,不为昨天烦恼,自己照顾好自己,我的朋友。早安!

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

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

XML/HTML Code复制内容到剪贴板
  1. html
  2. <!doctypehtml>
  3. <html>
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>Pythagoreantheorem</title>
  7. </head>
  8. <body>
  9. <mathxmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <msup><mi>a</mi><mn>2</mn></msup>
  12. <mo>+</mo>
  13. <msup><mi>b</mi><mn>2</mn></msup>
  14. <mo>=</mo>
  15. <msup><mi>c</mi><mn>2</mn></msup>
  16. </mrow>
  17. </math>
  18. </body>
  19. </html>

这会生成如下结果:

复制代码
代码如下:
a2 + b2 = c2

便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

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

XML/HTML Code复制内容到剪贴板
  1. html
  2. <!doctypehtml>
  3. <html>
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>MathMLExamples</title>
  7. </head>
  8. <body>
  9. <mathxmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <mrow>
  12. <msup>
  13. <mi>x</mi>
  14. <mn>2</mn>
  15. </msup>
  16. <mo>+</mo>
  17. <mrow>
  18. <mn>4</mn>
  19. <mo>⁢</mo>
  20. <mi>x</mi>
  21. </mrow>
  22. <mo>+</mo>
  23. <mn>4</mn>
  24. </mrow>
  25. <mo>=</mo>
  26. <mn>0</mn>
  27. </mrow>
  28. </math>
  29. </body>
  30. </html>

这会生成如下结果

复制代码
代码如下:
x 2 + 4 x + 4 = 0

便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

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

XML/HTML Code复制内容到剪贴板
  1. html
  2. <!doctypehtml>
  3. <html>
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>MathMLExamples</title>
  7. </head>
  8. <body>
  9. <mathxmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <mi>A</mi>
  12. <mo>=</mo>
  13. <mfencedopen="["close="]">
  14. <mtable>
  15. <mtr>
  16. <mtd><mi>x</mi></mtd>
  17. <mtd><mi>y</mi></mtd>
  18. </mtr>
  19. <mtr>
  20. <mtd><mi>z</mi></mtd>
  21. <mtd><mi>w</mi></mtd>
  22. </mtr>
  23. </mtable>
  24. </mfenced>
  25. </mrow>
  26. </math>
  27. </body>
  28. </html>

这会生成如下结果

本文在HTML5中如何使用MathML数学公式的简单讲解到此结束。笑着活是一辈子,哭着活也是一辈子。反正只要活着就笑着活下去吧。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决

html5笛卡尔心形曲线的如何实现

如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)

如何使用canvas对video视频某一刻截图功能

Canvas如何做个雪花屏版404的如何实现