编程 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+font字体文件实现圆形半透明菜单具体步骤(图解)

Jun 03 HTML / CSS

纯CSS3实现圆角效果（含IE兼容解决方法）

May 07 HTML / CSS

CSS3 :not()选择器实现最后一行li去除某种css样式

Oct 19 HTML / CSS

利用纯CSS3实现动态的自行车特效源码

Jan 20 HTML / CSS

CSS3与动画有关的属性transition、animation、transform对比（史上最全版）

Aug 18 HTML / CSS

css3遮罩层镂空效果的多种实现方法

May 11 HTML / CSS

详解css3 flex弹性盒自动铺满写法

Sep 17 HTML / CSS

html5中地理位置定位api接口开发应用小结

Jan 04 HTML / CSS

如何让IE9以下版本(ie6/7/8)认识html5元素

Apr 01 HTML / CSS

H5新属性audio音频和video视频的控制详解（推荐）

Dec 09 HTML / CSS

微信html5页面调用第三方位置导航的示例

Mar 14 HTML / CSS

html5 figure和figcaption的使用方法

Sep 10 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

PHPUnit测试私有属性和方法功能示例

2018/06/12 PHP

多浏览器兼容的获取元素和鼠标的位置的js代码

2009/12/15 Javascript

jQueryUI写一个调整分类的拖放效果实现代码

2012/05/10 Javascript

JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题

2016/08/03 Javascript

jQuery基本选择器和层次选择器学习使用

2017/02/27 Javascript

如何给ss bash 写一个 WEB 端查看流量的页面

2017/03/23 Javascript

详解Node.js 命令行程序开发教程

2017/06/07 Javascript

vscode 开发Vue项目的方法步骤

2018/11/25 Javascript

PyMongo安装使用笔记

2015/04/27 Python

初步讲解Python中的元组概念

2015/05/21 Python

Python连接MySQL并使用fetchall()方法过滤特殊字符

2016/03/13 Python

python数字图像处理之高级形态学处理

2018/04/27 Python

python实现名片管理系统项目

2019/04/26 Python

使用pandas 将DataFrame转化成dict

2019/12/10 Python

Python的形参和实参使用方式

2019/12/24 Python

pytorch点乘与叉乘示例讲解

2019/12/27 Python

python列表返回重复数据的下标

2020/02/10 Python

对python中return与yield的区别详解

2020/03/12 Python

python实现文字版扫雷

2020/04/24 Python

Python参数传递及收集机制原理解析

2020/06/05 Python

css3遮罩层镂空效果的多种实现方法

2020/05/11 HTML / CSS

德国最大的拼图在线商店：Puzzle.de

2016/12/17 全球购物

Vince官网：全球著名设计师品牌，休闲而优雅的服饰

2017/01/15 全球购物

联想韩国官网：Lenovo Korea

2018/05/10 全球购物

Omio中国：全欧洲低价大巴、火车和航班搜索和比价

2018/08/09 全球购物

联想C++笔试题

2012/06/13 面试题

优秀毕业大学生推荐信

2013/11/13 职场文书

中介公司区域经理岗位职责范本

2014/03/02 职场文书

《祁黄羊》教学反思

2014/04/22 职场文书

护理学专业求职信

2014/06/29 职场文书

国际商务英语专业求职信

2014/07/08 职场文书

优秀党支部申报材料

2014/12/24 职场文书

2015年世界无车日活动总结

2015/03/23 职场文书

快消品行业营销模式与盈利模式分享

2019/09/27 职场文书

基于Golang 高并发问题的解决方案

2021/05/08 Golang

浅谈resultMap的用法及关联结果集映射

2021/06/30 Java/Android