在网页上显示数学公式

引言

显示数学公式,可以使用HTML5中的MathML,功能特别强大。但是有的浏览器不支持或者个别版本支持,目前对此支持比较好的浏览器是 Firefox 和 Safari.

实例一

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>简单的MathML</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

正确的显示应为:
运行结果

实例二

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>简单的MathML</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>

当前浏览器的显示效果如下:

x2+4x+4=0

正确的显示应为:
运行结果

实例三

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>简单的MathML</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>

当前浏览器的显示效果如下:

A=xyzw

正确的显示应为:
运行结果

实例四

上面三个例子是在网上复制的别人的,下面这一个是自己写的一个,有积分、极限、求和、分数、平方根。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>MathML测试</title>
   </head>
   <body>
   <br>
   <p align="center">
      <font size="8">
      数学公式
      <br>
      支持浏览器:Firefox、Safari
      <br><br>
      <math>
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
            <mfrac>
               <mn> 9 </mn>
               <mn> 5 </mn>
            </mfrac>
         <menclose notation="radical">
            <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup>
         </menclose>
         </mrow>
      </math>
      <br><br>
      <math>
         <munderover> 
            <mrow> <mo> ∑ </mo> </mrow> <mrow> <mi> i </mi> <mo> = </mo> <mn> 1 </mn> </mrow> <mrow> <mi> ∞ </mi> </mrow> 
         </munderover> 
         <munderover>
            <mrow> <mo> ∫ </mo> </mrow> <mrow> <mn> 0 </mn> </mrow> <mrow> <mn> 1 </mn> </mrow>
         </munderover>
         <mi> f </mi> <mfenced> <mrow> <mi> i </mi> </mrow> </mfenced> <mi> dx </mi> 
      </math>
      <br><br>
      <math>
         <munder> 
            <mrow> <mi> lim </mi> </mrow> <mrow> <mi> n </mi> <mo> → </mo> <mo> + </mo> <mi> ∞</mi> </mrow> 
         </munder> <msub> <mrow> <mi> x </mi> </mrow> <mrow> <mi> n </mi> </mrow> </msub> <mo> = </mo> <mi> a </mi> 
      </math>
      </font>
   </p>
   </body>
</html>

正确的显示应为
运行结果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部