编程 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制作饼状旋转载入效果的实例

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