一篇文章带你了解HTML5 MathML

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

 [[347913]]

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

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

注意:

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

一、MathML 简单实例

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

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="UTF-8"
  5.         <title>项目</title> 
  6.     </head> 
  7.  
  8.     <body style="background-color: aqua;"
  9.  
  10.         <math xmlns="http://www.w3.org/1998/Math/MathML"
  11.  
  12.             <mrow> 
  13.                 <msup> 
  14.                     <mi>a</mi> 
  15.                     <mn>2</mn> 
  16.                 </msup> 
  17.                 <mo>+</mo> 
  18.  
  19.                 <msup> 
  20.                     <mi>b</mi> 
  21.                     <mn>2</mn> 
  22.                 </msup> 
  23.                 <mo>=</mo> 
  24.  
  25.                 <msup> 
  26.                     <mi>c</mi> 
  27.                     <mn>2</mn> 
  28.                 </msup> 
  29.             </mrow> 
  30.  
  31.         </math> 
  32.  
  33.     </body> 
  34. </html> 

运行结果图,如下所示:

 

二、用作 MathML 字符

想象一下,下面是一个用作字符 &InvisibleTimes; 的标记:XML/HTML Code粘贴内容到剪贴板。

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

  1. <!DOCTYPE html> 
  2. <html> 
  3.    <head> 
  4.       <meta charset="UTF-8"
  5.       <title>项目</title> 
  6.    </head> 
  7.      
  8.    <body  style="background-color: aqua;"
  9.      
  10.       <math xmlns="http://www.w3.org/1998/Math/MathML"
  11.          
  12.          <mrow>             
  13.             <mrow> 
  14.                  
  15.                <msup> 
  16.                   <mi>x</mi> 
  17.                   <mn>3</mn> 
  18.                </msup> 
  19.                      
  20.                <mo>+</mo> 
  21.                      
  22.                <mrow> 
  23.                   <mn>4</mn> 
  24.                   <mo>⁢</mo> 
  25.                   <mi>x</mi> 
  26.                </mrow> 
  27.                      
  28.                <mo>+</mo> 
  29.                <mn>6</mn> 
  30.                      
  31.             </mrow> 
  32.                  
  33.             <mo>=</mo> 
  34.             <mn>0</mn> 
  35.                  
  36.          </mrow> 
  37.       </math> 
  38.          
  39.    </body> 
  40. </html> 

运行结果图,如下所示:

 

三、MathML乘法

<msgroup>用于对<mstack>元素和<mlongdiv>元素内的行进行分组,以使其位置相对于堆栈的对齐方式。带有shift属性的<msgroup>元素可以用于创建简单乘法。

1. 用法

以下是使用此标签的简单语法 。

  1. <msgroup> expression </msgroup> 

2. 参数

这是这个标签的所有参数的描述 ( 表达式 - 表达式 )。

3. 属性

位置 : 指定组内相对于由包含msgroup控制的位置(根据其位置和位移属性)的行的水平位置。默认值为0。

shift : 指定组内连续子项(行或组)的位置的递增位移。默认值为0。

4. 案例

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="UTF-8"
  5.         <title>项目</title> 
  6.     </head> 
  7.  
  8.     <body style="background-color: aqua;"
  9.         <math xmlns="http://www.w3.org/1998/Math/MathML"
  10.             <mstack> 
  11.                 <msgroup> 
  12.                     <mn>123</mn> 
  13.                     <msrow> 
  14.                         <mo>×</mo> 
  15.                         <mn>321</mn> 
  16.                     </msrow> 
  17.                 </msgroup> 
  18.                 <msline /> 
  19.                 <msgroup shift="1"
  20.                     <mn>123</mn> 
  21.                     <mn>246</mn> 
  22.                     <mn>369</mn> 
  23.                 </msgroup> 
  24.                 <msline /> 
  25.                 <mn>39483</mn> 
  26.             </mstack> 
  27.         </math> 
  28.     </body> 
  29. </html> 

 

四、矩阵表达出来

下面的例子,它可能会被用来指出一个比较简单的 2x2 矩阵。XML/HTML Code副本内容到剪贴板

以下实例是一个 2×2 矩阵。

  1. <!DOCTYPE html> 
  2. <html> 
  3.    <head> 
  4.       <meta charset="UTF-8"
  5.       <title>项目</title> 
  6.    </head> 
  7.      
  8.    <body  style="background-color: aqua;"
  9.       <math xmlns="http://www.w3.org/1998/Math/MathML"
  10.          
  11.          <mrow> 
  12.             <mi>BAS</mi> 
  13.             <mo>=</mo> 
  14.              
  15.             <mfenced open="[" close="]"
  16.              
  17.                <mtable> 
  18.                   <mtr> 
  19.                      <mtd><mi>x</mi></mtd> 
  20.                      <mtd><mi>y</mi></mtd> 
  21.                   </mtr> 
  22.                      
  23.                   <mtr> 
  24.                      <mtd><mi>z</mi></mtd> 
  25.                      <mtd><mi>w</mi></mtd> 
  26.                   </mtr> 
  27.                </mtable> 
  28.                
  29.             </mfenced> 
  30.          </mrow> 
  31.       </math> 
  32.        
  33.    </body> 
  34. </html> 

运行结果图,如下所示:

 

五、总结

本文基于HTML基础,介绍了MathML常见的用法。在本文中,介绍了如何用作 MathML 字符,重点介绍了MathML乘法的实际应用。通过一个个案例的分析,介绍了其用法,属性。运行效果图的展示,能够让读者更好的理解。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2023-07-11 15:34:02

2021-06-30 00:20:12

Hangfire.NET平台

2023-05-12 08:19:12

Netty程序框架

2021-01-29 18:41:16

JavaScript函数语法

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2024-01-30 13:47:45

2023-09-06 14:57:46

JavaScript编程语言

2021-01-26 23:46:32

JavaScript数据结构前端

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2021-06-24 09:05:08

JavaScript日期前端

2024-04-19 14:23:52

SwitchJavaScript开发

2023-07-30 15:18:54

JavaScript属性

2021-03-09 14:04:01

JavaScriptCookie数据

2021-03-05 18:04:15

JavaScript循环代码

2023-05-08 08:21:15

JavaNIO编程

2021-09-27 09:18:30

ListIterato接口方法

2021-02-26 20:01:57

SVG滤镜元素

2020-12-08 08:09:49

SVG图标Web
点赞
收藏

51CTO技术栈公众号