在HTML5中使用MathML数学公式的简单讲解


Posted in HTML / CSS onFebruary 19, 2016

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

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

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

这会生成如下结果:

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

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

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

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

这会生成如下结果

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

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

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

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

这会生成如下结果
在HTML5中使用MathML数学公式的简单讲解

HTML / CSS 相关文章推荐
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 #HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 #HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 #HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
HTML5实现预览本地图片
Feb 17 #HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 #HTML / CSS
You might like
jQuery ui 1.7更新小结
2009/08/15 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python避免死锁方法实例分析
2015/06/04 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python decimal模块使用方法详解
2020/06/08 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
经典c++面试题五
2014/12/17 面试题
iostream与iostream.h的区别
2015/01/16 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
给医务人员表扬信
2014/01/12 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Python连续赋值需要注意的一些问题
2021/06/03 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
css3 文字断裂效果
2022/04/22 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS