编程 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的鼠标经过动画显示详情特效的实例教程

Dec 29 HTML / CSS

CSS3中几个新增加的盒模型属性使用教程

Mar 01 HTML / CSS

CSS3制作气泡对话框的实例教程

May 10 HTML / CSS

HTML5中的nav标签学习笔记

Jun 24 HTML / CSS

HTML5的Geolocation地理位置定位API使用教程

May 12 HTML / CSS

使用HTML5的链接预取功能(link prefetching)给网站提速

Dec 13 HTML / CSS

整理HTML5移动端开发的常用触摸事件

Apr 15 HTML / CSS

mui几种页面跳转方式对比总结概括

Aug 18 HTML / CSS

详解H5 活动页之移动端 REM 布局适配方法

Dec 07 HTML / CSS

微信端html5页面调用分享接口示例

Mar 14 HTML / CSS

详解三种方式实现平滑滚动页面到顶部的功能

Apr 23 HTML / CSS

html2canvas生成清晰的图片实现打印的示例代码

Sep 30 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

linux系统下php安装mbstring扩展的二种方法

2014/01/20 PHP

php随机显示图片的简单示例

2014/02/15 PHP

php+mysql实现的二级联动菜单效果详解

2016/05/10 PHP

php pdo oracle中文乱码的快速解决方法

2016/05/16 PHP

PHP连接及操作PostgreSQL数据库的方法详解

2019/01/30 PHP

JQUERY THICKBOX弹出层插件

2008/08/30 Javascript

js中字符替换函数String.replace()使用技巧

2011/08/14 Javascript

浅谈关于JavaScript的语言特性分析

2013/04/11 Javascript

5秒后跳转到另一个页面的js代码

2013/10/12 Javascript

jQuery分组选择器用法实例

2014/12/23 Javascript

jQuery过滤选择器经典应用

2016/08/18 Javascript

jQuery实现简洁的轮播图效果实例

2016/09/07 Javascript

input框中的name和id的区别

2016/11/16 Javascript

全新打包工具parcel零配置vue开发脚手架

2018/01/11 Javascript

详解React服务端渲染从入门到精通

2019/03/28 Javascript

Python open()文件处理使用介绍

2014/11/30 Python

Python中用pycurl监控http响应时间脚本分享

2015/02/02 Python

Tensorflow使用tfrecord输入数据格式

2018/06/19 Python

把csv文件转化为数组及数组的切片方法

2018/07/04 Python

bluepy 一款python封装的BLE利器简单介绍

2019/06/25 Python

python利用wx实现界面按钮和按钮监听和字体改变的方法

2019/07/17 Python

Python PO设计模式的具体使用

2019/08/16 Python

python自动保存百度盘资源到百度盘中的实例代码

2019/08/26 Python

手把手教你进行Python虚拟环境配置教程

2020/02/03 Python

python 实现分组求和与分组累加求和代码

2020/05/18 Python

windows10在visual studio2019下配置使用openCV4.3.0

2020/07/14 Python

css和css3弹性盒模型实现元素宽度（高度）自适应

2019/05/15 HTML / CSS

世界上最大的糖果店：Dylan’s Candy Bar

2017/11/07 全球购物

大学生活自我评价

2014/04/09 职场文书

大学活动总结格式

2014/04/29 职场文书

党员批评与自我批评发言

2014/10/02 职场文书

2014乡镇机关党员个人对照检查材料思想汇报

2014/10/09 职场文书

2014年世界艾滋病日演讲稿

2014/11/28 职场文书

初中毕业生自我评价

2015/03/02 职场文书

护理工作心得体会

2016/01/22 职场文书

汽车销售合同文本

2019/08/08 职场文书