当前位置：主页 > 查看内容

一篇文章带你了解HTML5 MathML

发布时间：2021-07-18 00:00| 有 位朋友查看

简介：HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。 MathML 是数学标记语言，是一种基于XML(标准通用标记语言的子集)的标准，用来在互联网上书写数学符号和公式的置标语言。 注意： 大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可……

 

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乘法的实际应用。通过一个个案例的分析，介绍了其用法，属性。运行效果图的展示，能够让读者更好的理解。

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

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


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/uhrVQ-XIKWDlLHA8kriuQA
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Nodejs-Ipc的设计与实现 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐