编程 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圆角和渐变2种常用功能详解

Jan 06 HTML / CSS

CSS3实现背景透明文字不透明的示例代码

Jun 25 HTML / CSS

10分钟理解CSS3 Grid布局

Dec 20 HTML / CSS

纯HTML5+CSS3制作生日蛋糕代码

Nov 16 HTML / CSS

使用HTML5 Canvas绘制直线或折线等线条的方法讲解

Mar 14 HTML / CSS

Html5页面在微信端的分享的实现方法

Aug 30 HTML / CSS

HTML5 CSS3打造相册效果附源码下载

Jun 16 HTML / CSS

html5使用canvas画一条线

Dec 15 HTML / CSS

HTML5拖放API实现拖放排序的实例代码

May 11 HTML / CSS

css position fixed 左右双定位的实现代码

Apr 29 HTML / CSS

css让页脚保持在底部位置的四种方案

Jul 23 HTML / CSS

html,css,javascript是怎样变成页面的

May 07 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 session会话的安全性分析

2011/09/08 PHP

给ECShop添加最新评论

2015/01/07 PHP

实现WordPress主题侧边栏切换功能的PHP脚本详解

2015/12/14 PHP

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

2017/09/15 PHP

LaravelS通过Swoole加速Laravel/Lumen详解

2018/03/02 PHP

Alliance vs AM BO3 第二场2.13

2021/03/10 DOTA

Jquery中显示隐藏的实现代码分析

2011/07/26 Javascript

解析Javascript小括号“()”的多义性

2013/12/03 Javascript

seajs中模块的解析规则详解和模块使用总结

2014/03/12 Javascript

JavaScript中消除闭包的一般方法介绍

2015/03/16 Javascript

jquery图片切换实例分析

2015/04/15 Javascript

JQuery实现简单的图片滑动切换特效

2015/11/22 Javascript

实例讲解避免javascript冲突的方法

2016/01/03 Javascript

Bootstrap CSS组件之按钮组(btn-group)

2016/12/17 Javascript

jquery 仿锚点跳转到页面指定位置的实例

2017/02/14 Javascript

在vue项目中使用element-ui的Upload上传组件的示例

2018/02/08 Javascript

微信小程序页面传多个参数跳转页面的实现方法

2019/05/17 Javascript

React 实现车牌键盘的示例代码

2019/12/20 Javascript

angular共享依赖的解决方案分享

2020/10/15 Javascript

vue移动端下拉刷新和上滑加载

2020/10/27 Javascript

vue 使用 sortable 实现 el-table 拖拽排序功能

2020/12/26 Vue.js

Python获取当前时间的方法

2014/01/14 Python

pycharm 使用心得（二）设置字体大小

2014/06/05 Python

python和shell实现的校验IP地址合法性脚本分享

2014/10/23 Python

django1.8使用表单上传文件的实现方法

2016/11/04 Python

用python标准库difflib比较两份文件的异同详解

2018/11/16 Python

浅谈keras中的目标函数和优化函数MSE用法

2020/06/10 Python

怎样在程序里获得一个空指针

2015/01/24 面试题

网友共享的几个面试题关于Java和Unix等方面的

2016/09/08 面试题

公司营业员的工作总结自我评价

2013/10/05 职场文书

幼儿园教师培训制度

2014/01/16 职场文书

CAD制图人员的自荐信

2014/02/07 职场文书

工厂车间标语

2014/06/19 职场文书

入股协议书范本

2014/11/01 职场文书

pyqt5蒙版遮罩mask,setmask的使用

2021/06/11 Python

Python Flask实现进度条

2022/05/11 Python