社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > H5教程 > 在HTML5中使用MathML数学公式的简单讲解_html5教程技巧

在HTML5中使用MathML数学公式的简单讲解_html5教程技巧

WBOY
发布： 2016-05-16 15:45:57
原创
2605 人浏览过

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

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

XML/HTML Code复制内容到剪贴板
  1. html   
  2. nbsp;html>  
  3.   html>  
  4.   head>  
  5.   meta charset="UTF-8">  
  6.   title>Pythagorean theoremtitle>  
  7.   head>  
  8.   body>  
  9.     math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.       mrow>  
  11.         msup>mi>ami>mn>2mn>msup>  
  12.         mo>+mo>  
  13.         msup>mi>bmi>mn>2mn>msup>  
  14.         mo>=mo>  
  15.         msup>mi>cmi>mn>2mn>msup>  
  16.       mrow>  
  17.     math>  
  18.   body>  
  19. html>    

这会生成如下结果：


复制代码
代码如下:
a2 + b2 = c2

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

使用 MathML 字符
想象一下，下面是一个使用字符 ⁢ 的标记：

XML/HTML Code复制内容到剪贴板
  1. html   
  2. nbsp;html>  
  3.   html>  
  4.   head>  
  5.   meta charset="UTF-8">  
  6.   title>MathML Examplestitle>  
  7.   head>  
  8.   body>  
  9.     math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.        mrow>  
  11.           mrow>  
  12.              msup>  
  13.                 mi>xmi>  
  14.                 mn>2mn>  
  15.              msup>  
  16.              mo>+mo>  
  17.              mrow>  
  18.                 mn>4mn>  
  19.                 mo>⁢mo>  
  20.                 mi>xmi>  
  21.              mrow>  
  22.              mo>+mo>  
  23.              mn>4mn>  
  24.           mrow>  
  25.              mo>=mo>  
  26.              mn>0mn>  
  27.         mrow>  
  28.    math>  
  29. body>  
  30. html>   

这会生成如下结果


复制代码
代码如下:
x 2 + 4 x + 4 = 0

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

矩阵表达示例
想象一下下面的例子，它会被用来表示一个简单的 2x2 矩阵：

XML/HTML Code复制内容到剪贴板
  1. html   
  2. nbsp;html>  
  3.   html>  
  4.   head>  
  5.   meta charset="UTF-8">  
  6.   title>MathML Examplestitle>  
  7.   head>  
  8.   body>  
  9.     math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.        mrow>  
  11.           mi>Ami>  
  12.           mo>=mo>  
  13.           mfenced open="[" close="]">  
  14.              mtable>  
  15.                 mtr>  
  16.                    mtd>mi>xmi>mtd>  
  17.                    mtd>mi>ymi>mtd>  
  18.                 mtr>  
  19.                 mtr>  
  20.                    mtd>mi>zmi>mtd>  
  21.                    mtd>mi>wmi>mtd>  
  22.                 mtr>  
  23.              mtable>  
  24.          mfenced>  
  25.       mrow>  
  26.    math>  
  27. body>  
  28. html>   

这会生成如下结果
2016219113648268.jpg (86×68)

相关标签：
html5 math
来源：php.cn
上一篇：HTML5中meta属性的使用方法_html5教程技巧 下一篇：HTML5中的音频和视频媒体播放元素小结_html5教程技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...
来自于 2024-04-06 15:33:12
0
1
433
PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...
来自于 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什么区别？ 我只是想知道HTMLLivingStandard（又名新的HTML5规范）中的属性enctype和formenctype之间有什么区别？我一直在阅读《面向开发人员的HTML标准》，...
来自于 2024-04-02 11:47:56
0
1
275
使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
来自于 2024-04-01 20:42:38
0
1
259
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板