编程 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实现质感细腻丝滑按钮

Mar 09 HTML / CSS

使用CSS3来绘制一个月食图案

Jul 18 HTML / CSS

基于CSS3实现的漂亮Menu菜单效果代码

Sep 10 HTML / CSS

HTML+CSS3+JS 实现的下拉菜单

Nov 25 HTML / CSS

HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）

Jan 05 HTML / CSS

html5 application cache遇到的严重问题

Dec 26 HTML / CSS

HTML5 Canvas渐进填充与透明实现图像的Mask效果

Jul 11 HTML / CSS

浅谈Html5页面打开app的一些思考

Mar 30 HTML / CSS

html5 canvas 实现光线沿不规则路径运动

Apr 20 HTML / CSS

AmazeUI 模态窗口的实现代码

Aug 18 HTML / CSS

AmazeUI图片轮播效果的示例代码

Aug 20 HTML / CSS

CSS中理解层叠性及权重如何分配

Dec 24 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

把从SQL中取出的数据转化成XMl格式

2006/10/09 PHP

用php代码限制国内IP访问我们网站

2015/09/26 PHP

javascript判断单选框或复选框是否选中方法集锦

2007/04/04 Javascript

jquery中加载图片自适应大小主要实现代码

2013/08/23 Javascript

JavaScript获取Url里的参数

2014/12/18 Javascript

探讨JavaScript中的Rest参数和参数默认值

2015/07/29 Javascript

JavaScript实现url参数转成json形式

2016/09/25 Javascript

Javascript Event（事件）的传播与冒泡

2017/01/23 Javascript

jQuery ajax请求struts action实现异步刷新

2017/04/19 jQuery

jQuery实现腾讯信用界面(自制刻度尺)样式

2017/08/15 jQuery

使用JQ完成表格隔行换色的简单实例

2017/08/25 Javascript

jQuery实现的上传图片本地预览效果简单示例

2018/03/29 jQuery

解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

2018/08/30 Javascript

微信小程序时间控件picker view使用详解

2018/12/28 Javascript

深入理解Node内建模块和对象

2019/03/12 Javascript

vue源码nextTick使用及原理解析

2019/08/13 Javascript

微信小程序之高德地图多点路线规划过程示例详解

2021/01/18 Javascript

Python简单实现两个任意字符串乘积的方法示例

2018/04/12 Python

python绘制散点图并标记序号的方法

2018/12/11 Python

Python实现平行坐标图的绘制(plotly)方式

2019/11/22 Python

python循环嵌套的多种使用方法解析

2019/11/29 Python

Python Numpy中数据的常用保存与读取方法

2020/04/01 Python

Django Auth用户认证组件实现代码

2020/10/13 Python

介绍一下MYSQL常用的优化技巧

2012/10/25 面试题

国庆节活动总结

2014/08/26 职场文书

三好生演讲稿

2014/09/12 职场文书

初二学生评语大全

2014/12/26 职场文书

2015年三万活动总结

2015/03/25 职场文书

百万英镑观后感

2015/06/09 职场文书

2016新年致辞

2015/08/01 职场文书

2015年终个人政治思想工作总结

2015/11/24 职场文书

初中数学教学反思范文

2016/02/17 职场文书

导游词之山西关帝庙

2019/11/01 职场文书

OpenCV全景图像拼接的实现示例

2021/06/05 Python

详解Java实践之抽象工厂模式

2021/06/18 Java/Android

python数字图像处理：图像的绘制

2022/06/28 Python