编程 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中的calc函数浅析

Jul 10 HTML / CSS

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

Jan 06 HTML / CSS

CSS实现定位元素居中的方法

Jun 23 HTML / CSS

css3 transform及原生js实现鼠标拖动3D立方体旋转

Jun 20 HTML / CSS

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

Nov 16 HTML / CSS

CSS3实现伪类hover离开时平滑过渡效果示例

Aug 10 HTML / CSS

基于Html5实现的react拖拽排序组件示例

Aug 13 HTML / CSS

关于前端上传文件全面基础扫盲贴（入门）

Aug 01 HTML / CSS

html5-websocket基于远程方法调用的数据交互实现

Dec 04 HTML / CSS

HTML5实现经典坦克大战坦克乱走还能发出一个子弹

Sep 02 HTML / CSS

HTML5标签嵌套规则详解【必看】

Apr 26 HTML / CSS

字中字效果的实现【html5实例】

May 03 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往windows中添加用户

2006/12/06 PHP

php入门学习知识点三 PHP上传

2011/07/14 PHP

php下获取http状态的实现代码

2014/05/09 PHP

php实现兼容2038年后Unix时间戳转换函数

2015/03/18 PHP

PHP实现对文件锁进行加锁、解锁操作的方法

2017/07/04 PHP

laravel框架创建授权策略实例分析

2019/11/22 PHP

php的无刷新操作实现方法分析

2020/02/28 PHP

jquery 的 $("#id").html() 无内容的解决方法

2010/06/07 Javascript

iframe子页面获取父页面元素的方法

2013/11/05 Javascript

了解Javascript的模块化开发

2015/03/02 Javascript

JS设置cookie、读取cookie、删除cookie

2015/04/17 Javascript

javascript实现炫酷的拖动分页

2015/05/11 Javascript

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

2015/08/11 Javascript

使用jquery.qrcode.min.js实现中文转化二维码

2016/03/11 Javascript

vue.js入门教程之绑定class和style样式

2016/09/02 Javascript

vue.js初学入门教程（2）

2016/11/07 Javascript

Bootstrap基本组件学习笔记之列表组(11)

2016/12/07 Javascript

ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

2016/12/16 Javascript

bootstrap fileinput 插件使用项目总结(经验)

2017/02/22 Javascript

JavaScript你不知道的一些数组方法

2017/08/18 Javascript

layui表格checkbox选择全选样式及功能的实例

2018/03/07 Javascript

vue配置文件实现代理v2版本的方法

2019/06/21 Javascript

Node.js 实现抢票小工具 & 短信通知提醒功能

2019/10/22 Javascript

python中threading超线程用法实例分析

2015/05/16 Python

python通过get,post方式发送http请求和接收http响应的方法

2015/05/26 Python

详解Python中contextlib上下文管理模块的用法

2016/06/28 Python

Python实现的文本简单可逆加密算法示例

2017/05/18 Python

python利用sklearn包编写决策树源代码

2017/12/21 Python

详解Python3 对象组合zip()和回退方式*zip

2019/05/15 Python

Rentalcars.com中国：世界上最大的在线汽车租赁服务

2019/08/22 全球购物

秋季运动会稿件

2014/01/30 职场文书

博士生求职信

2014/07/06 职场文书

2015年世界无烟日活动总结

2015/02/10 职场文书

2014年终个人总结报告

2015/03/09 职场文书

材料员岗位职责范本

2015/04/11 职场文书

幼儿园奖惩制度范本

2015/08/05 职场文书