在HTML5中使用MathML数学公式

程序员文章站 2022-03-27 09:04:16

...

这篇文章主要介绍了在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>

这会生成如下结果
在HTML5中使用MathML数学公式

在HTML5中使用MathML数学公式

SqlServer2005中使用row_number()在一个查询中删除重复记录的方法

web.py在SAE中的Session问题解决方法（使用mysql存储）

使用PDF.JS插件在HTML中预览PDF文件的方法

在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码（代码是.net core3.0版本）

ASP.NET Core 3.0 : 二十八. 在Docker中的部署以及docker-compose的使用

在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）

分析在Python中何种情况下需要使用断言

html5中 media（播放器）的api使用指南

HTML5 在canvas中绘制矩形附效果图

Spinner在Dialog中的使用效果实例代码详解