当前位置： 移动技术网 > IT编程>网页制作>Html5 > 在HTML5中使用MathML数学公式的简单讲解

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

2019年07月25日  | 移动技术网IT编程  | 我要评论

红颜知己和情人的区别,闪光的小珠,乌克兰不是妓院

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

下面是一个使用 mathml 的有效 html5 文档：

xml/html code复制内容到剪贴板
  1. html   
  2. <!doctype html>  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="utf-8">  
  6.   <title>pythagorean theorem</title>  
  7.   </head>  
  8.   <body>  
  9.     <math xmlns="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. <!doctype html>  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="utf-8">  
  6.   <title>mathml examples</title>  
  7.   </head>  
  8.   <body>  
  9.     <math xmlns="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. <!doctype html>  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="utf-8">  
  6.   <title>mathml examples</title>  
  7.   </head>  
  8.   <body>  
  9.     <math xmlns="http://www.w3.org/1998/math/mathml">  
  10.        <mrow>  
  11.           <mi>a</mi>  
  12.           <mo>=</mo>  
  13.           <mfenced open="[" 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>   

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网