编程 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属性选择符介绍

Oct 17 HTML / CSS

5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

Aug 15 HTML / CSS

详解CSS3阴影 box-shadow的使用和技巧总结

Dec 03 HTML / CSS

CSS3实现文本垂直排列的方法

Jul 10 HTML / CSS

HTML5中的nav标签学习笔记

Jun 24 HTML / CSS

canvas三角函数模拟水波效果的示例代码

Jul 03 HTML / CSS

HTML5 使用 sessionStorage 进行页面传值的方法

Jul 02 HTML / CSS

整理HTML5中表单的常用属性及新属性

Feb 19 HTML / CSS

详解使用HTML5 Canvas创建动态粒子网格动画

Dec 14 HTML / CSS

html5简介_动力节点Java学院整理

Jul 07 HTML / CSS

data:image data url 文件转为Blob上传后端的方法

Jul 16 HTML / CSS

video下autoplay属性无效的解决方法(添加muted属性)

May 19 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分页函数代码（简单实用型）

2010/12/02 PHP

php的ajax框架xajax入门与试用介绍

2010/12/19 PHP

PHP注释语法规范与命名规范详解篇

2018/01/21 PHP

各种常用浏览器getBoundingClientRect的解析

2009/05/21 Javascript

js前台判断开始时间是否小于结束时间

2012/02/23 Javascript

js调用打印机打印网页字体总是缩小一号的解决方法

2014/01/24 Javascript

js中window.open打开一个新的页面

2014/08/10 Javascript

影响jQuery使用的14个方面

2014/09/01 Javascript

js获取元素外链样式的方法

2015/01/27 Javascript

jQuery选择器源码解读（七）：elementMatcher函数

2015/03/31 Javascript

js重写方法的简单实现

2016/07/10 Javascript

Javascript函数中的arguments.callee用法实例分析

2016/09/16 Javascript

10分钟掌握XML、JSON及其解析

2020/12/06 Javascript

jquery手机触屏滑动拼音字母城市选择器的实例代码

2017/12/11 jQuery

vue页面跳转后返回原页面初始位置方法

2018/02/11 Javascript

NodeJS模块与ES6模块系统语法及注意点详解

2019/01/04 NodeJs

js Array.slice的8种不同用法示例

2019/07/10 Javascript

Vue 实现CLI 3.0 + momentjs + lodash打包时优化

2019/11/13 Javascript

react实现复选框全选和反选组件效果

2020/08/25 Javascript

Vue双向数据绑定(MVVM)的原理

2020/10/03 Javascript

原生JavaScript实现贪吃蛇游戏

2020/11/04 Javascript

python服务器与android客户端socket通信实例

2014/11/12 Python

利用python获取某年中每个月的第一天和最后一天

2016/12/15 Python

python使用tornado实现登录和登出

2018/07/28 Python

Python实现繁?转为简体的方法示例

2018/12/18 Python

如何用tempfile库创建python进程中的临时文件

2021/01/28 Python

HTML5实现应用程序缓存(Application Cache)

2020/06/16 HTML / CSS

史蒂夫·马登加拿大官网：Steve Madden加拿大

2017/11/18 全球购物

JD Sports芬兰：英国领先的运动鞋和运动服饰零售商

2018/11/16 全球购物

库房主管岗位职责

2013/12/31 职场文书

感恩节活动方案

2014/01/27 职场文书

电大奖学金获奖感言

2014/08/14 职场文书

最美乡村教师观后感

2015/06/11 职场文书

出生证明范本

2015/06/15 职场文书

2021好看的国漫排行榜前十名《完美世界》上榜，《元龙》排名第一

2022/03/18 国漫

Java死锁的排查

2022/05/11 Java/Android