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

这会生成如下结果

复制代码

阅读剩余部分

相关阅读 >>

h5混合开发app如何升级

HTML5实战-svg的详解

HTML5 实现访问本地文件的方法

关于HTML5中如何调用相机拍照并且压缩图片的示例详解

详细介绍7款炫酷的HTML5 canvas动画特效

移动端HTML5列表的制作方法

HTML5 websql四种基本操作的介绍

HTML5新特性之跨文档消息传输详解

HTML5剪切板功能的实现

HTML5中canvas画线有毛边如何解决

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




打赏

取消

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

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

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

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

评论

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