一篇文章带你了解HTML5 MathML

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

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

注意:

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

一、MathML 简单实例

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

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>项目</title>    </head>    <body style="background-color: aqua;">        <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>

运行结果图,如下所示:

二、用作 MathML 字符

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

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

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>项目</title>   </head>       <body  style="background-color: aqua;">          <math xmlns="http://www.w3.org/1998/Math/MathML">                 <mrow>                        <mrow>                               <msup>                  <mi>x</mi>                  <mn>3</mn>               </msup>                                   <mo>+</mo>                                   <mrow>                  <mn>4</mn>                  <mo>⁢</mo>                  <mi>x</mi>               </mrow>                                   <mo>+</mo>               <mn>6</mn>                                </mrow>                            <mo>=</mo>            <mn>0</mn>                         </mrow>      </math>           </body></html>

运行结果图,如下所示:

三、MathML乘法

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

1. 用法

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

<msgroup> expression </msgroup>

2. 参数

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

3. 属性

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

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

4. 案例

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>项目</title>    </head>    <body style="background-color: aqua;">        <math xmlns="http://www.w3.org/1998/Math/MathML">            <mstack>                <msgroup>                    <mn>123</mn>                    <msrow>                        <mo>×</mo>                        <mn>321</mn>                    </msrow>                </msgroup>                <msline />                <msgroup shift="1">                    <mn>123</mn>                    <mn>246</mn>                    <mn>369</mn>                </msgroup>                <msline />                <mn>39483</mn>            </mstack>        </math>    </body></html>

四、矩阵表达出来

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

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

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>项目</title>   </head>       <body  style="background-color: aqua;">      <math xmlns="http://www.w3.org/1998/Math/MathML">                 <mrow>            <mi>BAS</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>

运行结果图,如下所示:

五、总结

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

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

更多的HTML教程也会继续给大家更新,整理的全套HTML视频教学,学习的伙伴,可以关注学习!

(0)

相关推荐

  • 多波束前视声呐系统和探测方法与流程

    本发明涉及主动式声呐系统,特别是多波束前视声呐系统. 背景技术: 声呐系统按工作原理划分可分为主动式声呐与被动式声呐.被动声呐自身不发射声波信号,通过接收所探测目标发出的声波进行探测,而主动声呐通过发 ...

  • 让你永远忘不了的傅里叶变换解析

    作者:刘遥行 来自:https://charlesliuyx.github.io/2018/02/18/直观详解]让你永远忘不了的傅里叶变换解析/ 使用联想链条和几何直观,辅以从实际需求衍生概念的思考 ...

  • 一篇文章带你了解建设数字乡村问题有哪些?

    数字乡村是伴随网络化.信息化和数字化在农业农村经济社会发展中的应用,以及农民现代信息技能的提高而内生的农业农村现代化发展和转型进程,既是乡村振兴的战略方向,也是建设数字中国的重要内容.虽然数字乡村有着 ...

  • 一篇文章带你搞定牛吃草问题

    牛吃草问题,是小学数学一种重要的类型,又称为消长问题或牛顿问题,由17世纪英国科学家牛顿提出. 当年牛顿曾编过这样一道题目:牧场上有一片青草,每天都生长得一样快. 这片青草供给10头牛吃,可以吃22天 ...

  • 一篇文章带你搞定火车过桥问题

    火车过桥问题,在小学数学中是一种非常重要的行程问题. 难点在于,如果不太会画图的话,很容易找错路程之间的关系. 今天,就来给大家再总结一遍火车过桥中的一些基本情况,尤其是每种情况的图要分辨清楚. 孩子 ...

  • 一篇文章带你读懂湖田窑!资深藏家必看!

    湖田窑水晶莹玉润,白中泛青,色如湖蓝,极富情趣,刀法简捷明快,娴熟自然,结合造型.底足工艺特征判断,是开门的宋代湖田窑精品特征.湖田窑是汉族传统制瓷工艺中的珍品,位于今景德镇市东南湖田村,是中国宋.元 ...

  • 一篇文章带你了解强迫症!

    许多人都喜欢拿强迫症自居或者开玩笑,其实真实的强迫症一点都不好玩.本篇文章将带您了解强迫症到底是怎么一回事. 许多人认为,强迫症就是反复检查和洗手.其实不然.在临床调查中,50%左右的病人都有检查和清 ...

  • “吃素”到底好不好?一篇文章带你看穿素食的真相

    有人说, 人类进化了几十万年才爬上食物链的顶端, 可不是为了吃草. 然而,现在吃素的人越来越多了. 素食日渐风靡. 过去吃素可能是为了信仰,宗教,为了不杀生. 如今吃素是为了健康. 那么吃素有什么好处 ...

  • 为什么特发性震颤久治不愈?一篇文章带你深入了解它

    什么是特发性震颤?很多患者不知道该如何判断特发性震颤是属于哪种疾病,甚至认为特发性震颤是单纯的神经疾病与躯体疾病,对特发性震颤没有正确的认识,从而导致没有达到对症治疗,病情不但没有缓解反而越来越严重. ...

  • 想了解道家?一篇文章带你全面解锁

    通过对<庄子·外篇>的考察,除典型的庄子自由哲学形态外,还包含黄老道家哲学形态.神仙修炼道家形态.技艺武功修炼道家形态等.本文3755字,阅读大致需要10-15分钟.‍‍‍ 庄子分为< ...

  • 特发性震颤怎么办,一篇文章带你了解

    特发性震颤早期症状,一般会出现步态异常,患者通常都是以上肢开始,主要影响上肢双侧上肢对称起病也可单侧上肢起病.一旦上肢影响后常向上发展至头.面舌.下颚部,累及躯干和双侧下肢者少见,仅在病程的晚期出现, ...