编程 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的border-radius绘制太极及爱心图案示例

May 17 HTML / CSS

详解HTML5 canvas绘图基本使用方法

Jan 29 HTML / CSS

分享一个H5原生form表单的checkbox特效代码

Feb 26 HTML / CSS

html5与css3小应用

Apr 03 HTML / CSS

html5中JavaScript removeChild 删除所有节点

May 16 HTML / CSS

使用分层画布来优化HTML5渲染的教程

May 08 HTML / CSS

HTML5移动端开发中的Viewport标签及相关CSS用法解析

Apr 15 HTML / CSS

HTML5中的强制下载属性download使用实例解析

May 12 HTML / CSS

HTML5 HTMLCollection和NodeList的区别详解

Apr 29 HTML / CSS

浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同

Jun 04 HTML / CSS

html5的pushstate以及监听浏览器返回事件的实现

Aug 11 HTML / CSS

Html5获取用户当前位置的几种方式

Jan 18 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

php学习之数据类型之间的转换代码

2011/05/29 PHP

整理的一些实用WordPress后台MySQL操作命令

2013/01/07 PHP

JavaScript 加号(+)运算符号

2009/12/06 Javascript

基于jQuery替换table中的内容并显示进度条的代码

2011/08/02 Javascript

基于jquery的多彩百分比动态进度条投票效果显示效果实现代码

2011/08/28 Javascript

JS实现侧悬浮浮动实例代码

2013/11/29 Javascript

js中style.display=""无效的解决方法

2014/10/30 Javascript

Jquery 1.9.1源码分析系列（十二）之筛选操作

2015/12/02 Javascript

AngularJS实现全选反选功能

2015/12/08 Javascript

js 获取本地文件及目录的方法(推荐)

2016/11/10 Javascript

详解vue2.0监听属性的使用心得及搭配计算属性的使用

2018/07/18 Javascript

React注册倒计时功能的实现

2018/09/06 Javascript

富文本编辑器vue2-editor实现全屏功能

2019/05/26 Javascript

微信小程序登录对接Django后端实现JWT方式验证登录详解

2019/07/29 Javascript

微信小程序动画组件使用解析，类似vue，且更强大

2019/08/01 Javascript

使用Python读写文本文件及编写简单的文本编辑器

2016/03/11 Python

python将unicode转为str的方法

2017/06/21 Python

Python实现按学生年龄排序的实际问题详解

2017/08/29 Python

利用Python读取txt文档的方法讲解

2018/06/23 Python

Python计算开方、立方、圆周率,精确到小数点后任意位的方法

2018/07/17 Python

Python常用的json标准库

2019/02/19 Python

Python函数的参数常见分类与用法实例详解

2019/03/30 Python

Python Pandas中根据列的值选取多行数据

2019/07/08 Python

ORM Django 终端打印 SQL 语句实现解析

2019/08/09 Python

tensorflow 重置/清除计算图的实现

2020/01/19 Python

CSS3 @font-face属性使用指南

2014/12/12 HTML / CSS

美国亚洲时尚和美容产品的一站式网上商店：Stylevana

2019/09/05 全球购物

高中自我鉴定范文

2013/11/03 职场文书

服装采购员岗位职责

2014/03/15 职场文书

母校寄语大全

2014/04/10 职场文书

质量标语大全

2014/06/12 职场文书

2014年村支部书记四风对照检查材料思想汇报

2014/10/02 职场文书

群众路线个人剖析材料

2014/10/07 职场文书

社区党员群众路线教育实践活动心得体会

2014/11/03 职场文书

合理化建议书

2015/02/04 职场文书

大学生个人学习总结

2015/02/15 职场文书