在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的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
input框中的name和id的区别
2016/11/16 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python PO设计模式的具体使用
2019/08/16 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
大学生活自我评价
2014/04/09 职场文书
大学活动总结格式
2014/04/29 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
初中毕业生自我评价
2015/03/02 职场文书
护理工作心得体会
2016/01/22 职场文书
汽车销售合同文本
2019/08/08 职场文书