HTML5 MathML

What is MathML

MathML is a mathematical markup language, a standard based on XML (a subset of the Standard Generalized Markup Language), used in A markup language for writing mathematical symbols and formulas on the Internet.

HTML5 can use MathML elements in documents, and the corresponding tags are <math>...</math> .

Note: Most browsers support the MathML tag. If your browser does not support this tag, you can use the latest version of Firefox or Safari browser to view it.


MathML Example

The following is a simple MathML example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</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>

Program running results :

6.jpg


The following examples add some operators:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</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>

Program running results:

8.jpg


The following example is a 2×2 matrix, the effect can be viewed in Firefox 3.5 or above:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</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>

Program running result:

6.jpg





##

Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</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>
submitReset Code