Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > A simple explanation of using MathML mathematical formulas in HTML5_html5 tutorial skills

A simple explanation of using MathML mathematical formulas in HTML5_html5 tutorial skills

WBOY
Release： 2016-05-16 15:45:57
Original
2631 people have browsed it

HTML5's HTML syntax allows us to apply MathML elements within the document using the ... tag.

Here is a valid HTML5 document using MathML:

XML/HTML CodeCopy content to clipboard
  1. html   
  2. >  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="UTF-8">  
  6.   <title>Pythagorean theoremtitle>  
  7.   head>  
  8.   <body>  
  9.     <math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.       <mrow>  
  11.         <msup><mi>ami><mn>2mn>msup>  
  12.         <mo> mo>  
  13.         <msup><mi>bmi><mn>2mn>msup>  
  14.         <mo>=mo>  
  15.         <msup><mi>cmi><mn>2mn>msup>  
  16. mrow>
  17.  math> 
  18. body>
  19. html> 

This will produce the following result:


Copy code
The code is as follows:
a2 b2 = c2

Easy to learn This concept - please use FireFox 3.7 or higher to practice online.

Using MathML characters
Imagine that here is a markup that uses the character ⁢:

XML/HTML CodeCopy content to clipboard
  1. html   
  2. >  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="UTF-8">  
  6.   <title>MathML Examplestitle>  
  7.   head>  
  8.   <body>  
  9.     <math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.        <mrow>  
  11.           <mrow>  
  12.              <msup>  
  13.                 <mi>xmi>  
  14.                 <mn>2mn>  
  15.              msup>  
  16.              <mo> mo>  
  17.              <mrow>  
  18.                 <mn>4mn>  
  19.                 <mo>⁢mo>  
  20.                 <mi>xmi>  
  21.              mrow>  
  22.              <mo> mo>  
  23.              <mn>4mn>  
  24.           mrow>  
  25.              <mo>=mo>  
  26.              <mn>0mn>  
  27.         mrow>  
  28.    math>  
  29. body>  
  30. html>   

这会生成如下结果


复制代码
代码如下:
x 2 4 x 4 = 0

便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

矩阵表达示例
想象一下下面的例子，它会被用来表示一个简单的 2x2 矩阵：

XML/HTML Code复制内容到剪贴板
  1. html   
  2. >  
  3.   <html>  
  4.   <head>  
  5.   <meta charset="UTF-8">  
  6.   <title>MathML Examplestitle>  
  7.   head>  
  8.   <body>  
  9.     <math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.        <mrow>  
  11.           <mi>Ami>  
  12.           <mo>=mo>  
  13.           <mfenced open="[" close="]">  
  14.              <mtable>  
  15.                 <mtr>  
  16.                    <mtd><mi>xmi>mtd>  
  17.                    <mtd><mi>ymi>mtd>  
  18.                 mtr>  
  19.                 <mtr>  
  20.                    <mtd><mi>zmi>mtd>  
  21.                    <mtd><mi>wmi>mtd>  
  22.                 mtr>  
  23.              mtable>  
  24.          mfenced>  
  25.       mrow>  
  26.    math>  
  27. body>  
  28. html>   

这会生成如下结果
2016219113648268.jpg (86×68)

Related labels：
html5 math
source：php.cn
Previous article：How to use meta attributes in HTML5_html5 tutorial tips Next article：Summary of audio and video media playback elements in HTML5_html5 tutorial tips
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template