我爱自学网 > HTML/CSS > HTML 教程 > HTML5 教程 > HTML5 MathML 访问量:

HTML5 MathML

<上一篇:HTML5 内联 SVG 下一篇: HTML5 拖放 >
MathML 与 HTML相似度很高,但是比较繁琐。它继承了角括号和双标签(<标签>内容</标签>)的用法。

HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。

MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。 

注意:大部分浏览器都支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari 浏览器查看。            

MathML 实例

以下是一个简单的 MathML 实例:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>我爱自学网—5azixuewang.com</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> 

运行结果图,如下所示:

运算结果

以下实例添加了一些运算符:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>我爱自学网—5azixuewang.com</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> 

运行结果图,如下所示:
运算结果

 以下实例是一个 2×2 矩阵,可以在 Firefox 3.5 以上版本查看到效果:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>我爱自学网—5azixuewang.com</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 内联 SVG 下一篇: HTML5 拖放 >
本章内容:
1. HTML5 简介
2. HTML5 浏览器支持
3. HTML5 新元素
4. HTML5 Canvas
5. HTML5 内联 SVG
6. HTML5 MathML
7. HTML5 拖放
8. HTML5 地理定位
9. HTML5 Video(视频)
10. HTML5 Audio(音频)
11. HTML5 新的 Input 类型
12. HTML5 表单元素
13. HTML5 表单属性
14. HTML5 语义元素
15. HTML5 Web 存储
16. HTML5 Web SQL 数据库
17. HTML5 应用程序缓存
18. HTML5 Web Workers
19. HTML5 服务器发送事件(Server-Sent Events)
20. HTML5 WebSocket
21. HTML5 代码规范