编程 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 相关文章推荐

收集的7个CSS3代码生成工具

Apr 17 HTML / CSS

CSS3图片旋转特效(360/60/-360度)

Oct 10 HTML / CSS

CSS3区域模块region相关编写示例

Aug 28 HTML / CSS

简单掌握CSS3中resize属性的用法

Apr 01 HTML / CSS

CSS3实现千变万化的文字阴影text-shadow效果设计

Apr 26 HTML / CSS

CSS3实现图片抽屉式效果的示例代码

Nov 06 HTML / CSS

基于ccs3的timeline时间线实现方法

Apr 30 HTML / CSS

CSS3 box-shadow属性实例详解

Jun 19 HTML / CSS

CSS3 实现穿梭星空动画

Nov 13 HTML / CSS

HTML5 Convas APIs方法详解

Apr 24 HTML / CSS

浅谈HTML5新增和废弃的标签

Apr 28 HTML / CSS

html css3不拉伸图片显示效果

Jun 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验证码类代码( 最新修改,完全定制化! )

2010/12/02 PHP

通过dbi使用perl连接mysql数据库的方法

2014/04/16 PHP

PHP文件锁函数flock()详细介绍

2014/11/18 PHP

php实现36进制与10进制转换功能示例

2017/01/10 PHP

从Ajax到JQuery Ajax学习

2007/02/14 Javascript

js 实现无缝滚动兼容IE和FF

2009/07/15 Javascript

js切换div css注意的细节

2012/12/10 Javascript

jquery修改属性值实例代码(设置属性值)

2014/01/06 Javascript

jquery选择器大全全面详解jquery选择器

2014/03/06 Javascript

jquery下拉select控件操作方法分享(jquery操作select)

2014/03/25 Javascript

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

2015/04/07 Javascript

web前端开发JQuery常用实例代码片段(50个)

2015/08/28 Javascript

js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)

2017/02/13 Javascript

你真的了解BOM中的history对象吗

2017/02/13 Javascript

Bootstrap表单制作代码

2017/03/17 Javascript

详解vue指令与$nextTick 操作DOM的不同之处

2018/08/02 Javascript

jquery 回调操作实例分析【回调成功与回调失败的情况】

2019/09/27 jQuery

小程序如何定位所在城市及发起周边搜索

2020/02/11 Javascript

JavaScript鼠标悬停事件用法解析

2020/05/15 Javascript

更改Python命令行交互提示符的方法

2015/01/14 Python

Python中列表与元组的乘法操作示例

2018/02/10 Python

Django如何防止定时任务并发浅析

2019/05/14 Python

python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py

2019/10/06 Python

python3.6环境下安装freetype库和基本使用方法(推荐)

2020/05/10 Python

Python 创建守护进程的示例

2020/09/29 Python

CSS 说明横向进度条最后显示文字的实现代码

2020/11/10 HTML / CSS

轻松制作精彩视频：Animoto

2018/09/19 全球购物

CHARLES & KEITH台湾官网：新加坡时尚品牌

2019/07/30 全球购物

毕业生自我鉴定范文

2013/11/08 职场文书

小学生美德少年事迹

2014/02/02 职场文书

求职信结尾怎么写

2014/05/26 职场文书

2014光棍节单身联谊活动策划书

2014/10/10 职场文书

2014年财务工作总结范文

2014/11/11 职场文书

库房管理员岗位职责

2015/02/12 职场文书

导游词之新疆-喀纳斯

2019/10/10 职场文书

Vue实现跑马灯样式文字横向滚动

2021/11/23 Vue.js