在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>

这会生成如下结果

复制代码

阅读剩余部分

相关阅读 >>

bootstrap与HTML5的区别是什么

分享一款HTML5小游戏绵羊快跑

HTML5视频播放的详细介绍

如何使用HTML5 canvas绘制文字

HTML5多媒体audio和video详细介绍(二)

分享一个简单的HTML5 视频嵌入实例代码

h5移动端各种各样的列表的制作方法(五)

h5的块级标签汇总

HTML5 canvas的事件处理介绍

详细介绍HTML5实现3d迷宫的代码案例

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




打赏

取消

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

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

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

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

评论

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