Home > Article > Web Front-end > Using MathML mathematical formulas in HTML5
Using MathML mathematical formulas in HTML5
- 不言Original
- 2018-06-05 14:14:532960browse
This article mainly introduces a simple explanation of using MathML mathematical formulas in HTML5. The wonderful use of math tags can often produce unexpected effects. Friends in need can refer to the HTML syntax permissions of
HTML5 We apply MathML elements within the document using the e54a3976ed0d77ffbddf4a497f6cab74...7f3ab92a71d29302c9b0d35ffb4a1f8b tag.
The following is a valid HTML5 document using MathML:
XML/HTML CodeCopy content to clipboard
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>This will generate the following result:
Copy the code
The code is as follows:
a2 + b2 = c2
Easy to learn this concept - please use FireFox 3.7 or higher for online exercises.
Using MathML Characters
Imagine that the following is a markup that uses the character :
XML/HTML Code Copy the content to the clipboard
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>This will generate the following results
Copy the code
The code is as follows:
x 2 + 4 x + 4 = 0
Easy to learn this concept - please use FireFox 3.7 or higher to practice online.
Matrix expression example
Imagine the following example, which will be used to represent a simple 2x2 matrix:
XML/HTML CodeCopy content to clipboard
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>This will generate the following results
Related recommendations:
Use The clip() method in HTML5 Canvas API crops the area image
The above is the detailed content of Using MathML mathematical formulas in HTML5. For more information, please follow other related articles on the PHP Chinese website!