编程 HTML / CSS

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

Posted in HTML / CSS onFebruary 19, 2016

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

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

XML/HTML Code复制内容到剪贴板

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>

这会生成如下结果：

复制代码

代码如下:

a2 + b2 = c2

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

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

XML/HTML Code复制内容到剪贴板

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>

这会生成如下结果

复制代码

代码如下:

x 2 + 4 x + 4 = 0

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

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

XML/HTML Code复制内容到剪贴板

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>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

详解CSS3开启硬件加速的使用和坑

Aug 21 HTML / CSS

CSS3教程：background-clip和background-origin

Oct 17 HTML / CSS

CSS3 圆角效果

Jul 15 HTML / CSS

css3 按钮利用css3实现超酷下载按钮

Mar 18 HTML / CSS

详解CSS3原生支持div铺满浏览器的方法

Aug 30 HTML / CSS

css3针对移动端卡顿问题的解决(动画性能优化)

Feb 14 HTML / CSS

html5 input元素新特性_动力节点Java学院整理

Jul 06 HTML / CSS

HTML5中实现拖放效果无须借助javascript

Dec 26 HTML / CSS

利用HTML5 Canvas制作一个简单的打飞机游戏

May 11 HTML / CSS

HTML5 canvas实现移动端上传头像拖拽裁剪效果

Mar 14 HTML / CSS

HTML5头部标签的一些常用信息小结

Oct 23 HTML / CSS

使用html5实现表格实现标题合并的实例代码

May 13 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

Js 订制自己的AlertBox(信息提示框)

2009/01/09 Javascript

jquery中常用的SET和GET

2009/01/13 Javascript

js中巧用cssText属性批量操作样式

2011/03/13 Javascript

javascript full screen 全屏显示页面元素的方法

2013/09/27 Javascript

JavaScript设计模式之策略模式实例

2014/10/10 Javascript

NodeJS使用jQuery选择器操作DOM

2015/02/13 NodeJs

jQuery异步上传文件插件ajaxFileUpload详细介绍

2015/05/19 Javascript

jQuery实现下拉加载功能实例代码

2016/04/01 Javascript

JavaScript实战之菜单特效

2016/08/16 Javascript

值得分享的bootstrap table实例

2016/09/22 Javascript

用jmSlip编写移动端顶部日历选择控件

2016/10/24 Javascript

ng-options和ng-checked在表单中的高级运用(推荐)

2017/01/21 Javascript

react性能优化达到最大化的方法 immutable.js使用的必要性

2017/03/09 Javascript

JS 插件dropload下拉刷新、上拉加载使用小结

2017/04/13 Javascript

nodeJS实现简单网页爬虫功能的实例(分享)

2017/06/08 NodeJs

Angular 2父子组件数据传递之@Input和@Output详解(下)

2017/07/05 Javascript

详解React中的组件通信问题

2017/07/31 Javascript

web页面和微信小程序页面实现瀑布流效果

2018/09/26 Javascript

详解vue 不同环境配置不同的打包命令

2019/04/07 Javascript

vuex存值与取值的实例

2019/11/06 Javascript

解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

2020/07/21 Javascript

[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界

2014/06/20 DOTA

[01:37]PWL S2开团时刻DAY1&2——这符有毒

2020/11/20 DOTA

python 排列组合之itertools

2013/03/20 Python

Python中最常用的操作列表的几种方法归纳

2015/04/24 Python

CentOS安装pillow报错的解决方法

2016/01/27 Python

批处理与python代码混合编程的方法

2016/05/19 Python

《夜晚的实验》教学反思

2014/02/19 职场文书

《蚕姑娘》教学反思

2014/04/15 职场文书

食堂标语大全

2014/06/11 职场文书

产品质量保证书范本

2015/02/27 职场文书

2015新学期校长寄语（3篇）

2015/03/25 职场文书

《观察物体》教学反思

2016/02/17 职场文书

导游词之吉林花园山

2019/10/17 职场文书

写一个Python脚本自动爬取Bilibili小视频

2021/04/24 Python

关于Python中进度条的六个实用技巧分享

2022/04/05 Python