Html 简明教程

HTML - MathML

HTML MathML (Mathematical Markup Language) 用来将数学方程式和化学反应方程式嵌入到 HTML 文档中。

HTML MathML (Mathematical Markup Language) is used to embed mathematical equations and chemical reaction equations into HTML document.

Mathematical Markup Language (MathML)

  1. Mathematical Markup Language is a XML based markup language introduced in 2015.

  2. It helps to represent complex mathematical formula in human readable format.

  3. This representation also helps software to understand context of the equation.

  4. To embed MathML elements inside a web page, we can use the HTML <math> tag.

HTML MathML Elements

下表包含了在 HTML 中使用的 MathML 元素列表:

The following table contains a list of MathML elements used in HTML:

Element

Description

<math>

It is the top level tag (root) of all MathML elements.

<mrow>

It indicates row of a given table or matrix.

<msqrt>

It displays square roots symbol in an expression.

<msub>

It is used for adding subscript in a given expression.

<msup>

It is used for adding superscript in a given expression.

<mo>

It represents operators such as equal to, comma and so on.

<mi>

It represents identifiers such as variable or constant.

<mtable>

It is used for creating table or matrix.

<mtr>

It is used for table row or matrix row.

<mtd>

It is used to enter data in a cell of a table or a matrix.

Purpose of HTML MathML

MathML 有助于在技术和数学网页中显示公式。这确保了电子学习材料、科学论文和复杂算法中的数学内容清晰。

MathML is helpful to display formula in technical and mathematical webpages. This ensures clear math content in e-learning materials, scientific papers and complex algorithms.

MathML 只在 Google Chrome 和 Mozilla Firefox 浏览器中受支持。请在测试前确保您的浏览器支持 MathML。

MathML is only supported in Google Chrome and Mozilla Firefox browsers. Please make sure that your browser supports MathML before testing it.

Examples MathML in HTML

以下是展示如何在 HTML 中使用 MathML 元素的一些示例。

Following are some examples that illustrates how to use MathML elements in HTML.

Pythagorean theorem Using MathML

在此示例中,我们将使用 HTML 代码制作毕达哥拉斯定理。

In this example, we will make Pythagorean Equation using HTML code.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Pythagorean theorem</title>
</head>
<body>
   <math>
      <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>

Quadratic Equation using MathML

在此示例中,我们将使用 HTML 代码制作二次方程。

In this example we will make a Quadratic Equation using HTML code.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>x</mi>
            <mn>2</mn>
         </msup>

         <mo>+</mo>

         <mn>4</mn>
         <!-- Invisible times operator -->
         <mo>⁢</mo>
         <mi>x</mi>

         <mo>+</mo>

         <mn>4</mn>

         <mo>=</mo>
         <mn>0</mn>
      </mrow>
   </math>
</body>
</html>

Make Matrix in MathML

考虑以下示例,它将用于表示一个简单的 2x2 矩阵:

Consider the following example which would be used to represent a simple 2x2 matrix:

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <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>

Redox Equation in MathML

以下是使用 MathML 表示置换化学反应的示例。

Below is an example of a redox chemical equation using MathML.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>

<body>
      <math>
      <mrow>
         <msub>
            <mtext>Zn</mtext>
         </msub>
         <mo>+</mo>
         <msub>
            <mrow>
            <mtext>CuSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>

         <!-- Arrow Symbol -->
         <mo>→</mo>

         <msub>
            <mrow>
            <mtext>ZnSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>

         <mo>+</mo>

         <msub>
            <mtext>Cu</mtext>
         </msub>
      </mrow>
      </math>

</body>
</html>