在HTML5中使用MathML数学公式


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了在HTML5中使用MathML数学公式的简单讲解,math标签的妙用往往可以收货意想不到的效果,需要的朋友可以参考下

HTML5 的 HTML 语法允许我们在文档内使用 <math>...</math> 标签应用 MathML 元素。

下面是一个使用 MathML 的有效 HTML5 文档:

XML/HTML Code复制内容到剪贴板

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

html  

<!doctype html>

  <html>

  <head>

  <meta charset="UTF-8">

  <title>Pythagorean theorem</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>

这会生成如下结果:

复制代码

代码如下:

1

a2 + b2 = c2

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

使用 MathML 字符
想象一下,下面是一个使用字符 &InvisibleTimes; 的标记:

XML/HTML Code复制内容到剪贴板

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

html  

<!doctype html>

  <html>

  <head>

  <meta charset="UTF-8">

  <title>MathML Examples</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>

这会生成如下结果

复制代码

阅读剩余部分

相关阅读 >>

如何使用HTML5 canvas绘制动态线性渐变

详解HTML5网络拓扑图整合openlayers实现gis地图应用(图)

什么是html语义化?html语义化的好处(总结)

h5中如何获取和设置自定义属性

html中的title是什么意思?

HTML5中在元素或者选取的文本被拖动时触发的事件ondrag

recorder.js 基于 HTML5 实现录音功能

h5history 模式的实例教程

HTML5中postmessage api的基本使用

HTML5的头部head的详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...