编程 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 07 HTML / CSS

真正了解CSS3背景下的@font face规则

May 04 HTML / CSS

用CSS3实现无限循环的无缝滚动的示例代码

Nov 01 HTML / CSS

浅谈css3中的渐进增强和优雅降级

Dec 01 HTML / CSS

css3利用transform变形结合事件完成扇形导航

Oct 26 HTML / CSS

css3实现简单的白云飘动背景特效

Oct 28 HTML / CSS

HTML5 声明兼容IE的写法

May 16 HTML / CSS

HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

Dec 09 HTML / CSS

HTML最新标准HTML5总结(必看)

Jun 13 HTML / CSS

Canvas制作的下雨动画的示例

Mar 06 HTML / CSS

浅谈Html5多线程开发之WebWorkers

May 02 HTML / CSS

CSS 左边固定宽右边自适应的6种方法

May 15 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

Excel数据导入Mysql数据库的实现代码

2008/06/05 PHP

PHP生成图像验证码的方法小结(2种方法)

2016/07/18 PHP

浅谈laravel 5.6 安装 windows上使用composer的安装过程

2019/10/18 PHP

PHP单元测试配置与使用方法详解

2019/12/27 PHP

YII2框架中behavior行为的理解与使用方法示例

2020/03/13 PHP

javascript 打印内容方法小结

2009/11/04 Javascript

javascript定义函数的方法

2010/12/06 Javascript

jquery和css3实现的炫酷时尚的菜单导航

2014/09/01 Javascript

JavaScript将字符串转换为整数的方法

2015/04/14 Javascript

基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

2016/02/01 Javascript

jQuery实现的超链接提示效果示例【附demo源码下载】

2016/09/09 Javascript

老生常谈javascript的面向对象思想

2017/08/22 Javascript

详解vue mixins和extends的巧妙用法

2017/12/20 Javascript

详解vue-cli 2.0配置文件(小结)

2019/01/14 Javascript

使用layui日期控件laydate对开始和结束时间进行联动控制的方法

2019/09/06 Javascript

浅谈layui 表单元素的选中问题

2019/10/25 Javascript

[04:09]2018年度DOTA2社区贡献奖-完美盛典

2018/12/16 DOTA

Python深入学习之特殊方法与多范式

2014/08/31 Python

Python检测QQ在线状态的方法

2015/05/09 Python

Python fileinput模块使用实例

2015/06/03 Python

使用 Python 实现微信公众号粉丝迁移流程

2018/01/03 Python

详解pyenv下使用python matplotlib模块的问题解决

2018/11/29 Python

Python 从一个文件中调用另一个文件的类方法

2019/01/10 Python

使用python将mysql数据库的数据转换为json数据的方法

2019/07/01 Python

HTML5视频播放插件 video.js介绍

2018/09/29 HTML / CSS

蔻驰法国官网：COACH法国

2018/11/14 全球购物

优秀毕业大学生推荐信

2013/11/13 职场文书

面料业务员岗位职责

2013/12/26 职场文书

学校欢迎标语

2014/06/18 职场文书

大学专科求职信

2014/07/02 职场文书

改进作风怎么办发言材料

2014/08/17 职场文书

高中课前三分钟演讲稿

2014/08/18 职场文书

2014年关工委工作总结

2014/11/17 职场文书

军训个人总结

2015/03/03 职场文书

运动会宣传语

2015/07/13 职场文书

公司老总年会致辞

2015/07/30 职场文书