编程 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教程(10):CSS3 HSL声明设置颜色

Apr 02 HTML / CSS

纯CSS3打造属于自己的“小黄人”

Mar 14 HTML / CSS

纯css3实现宠物小鸡实例代码

Oct 08 HTML / CSS

css3中仿放大镜效果的几种方式原理解析

Dec 03 HTML / CSS

html5音频_动力节点Java学院整理

Aug 22 HTML / CSS

利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

Jan 08 HTML / CSS

HTML5 Canvas像素处理使用接口介绍

Dec 02 HTML / CSS

程序设计HTML5 Canvas API

Apr 08 HTML / CSS

HTML5 canvas标签实现刮刮卡效果

Apr 24 HTML / CSS

怎样实现H5+CSS3手指滑动切换图片的示例代码

May 05 HTML / CSS

HTML5基础学习之文本标签控制

Mar 25 HTML / CSS

css中:last-child不生效的解决方法

Aug 05 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

DC四月将推出百页特刊漫画纪念小丑诞生80周年

2020/04/09 欧美动漫

smarty实例教程

2006/11/19 PHP

php 无极分类(递归)实现代码

2010/01/05 PHP

php中0,null,empty,空,false,字符串关系的详细介绍

2013/06/20 PHP

PHP简单获取随机数的常用方法小结

2017/06/07 PHP

JavaScript For Beginners(转载)

2007/01/05 Javascript

JS动态增加删除UL节点LI及相关内容示例

2014/05/21 Javascript

JavaScript数组常用操作技巧汇总

2014/11/17 Javascript

js的[defer]和[async]属性

2014/11/24 Javascript

jQuery中addClass()方法用法实例

2015/01/05 Javascript

javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

2015/07/27 Javascript

JS打印组合功能

2016/08/04 Javascript

angular+bootstrap的双向数据绑定实例

2017/03/03 Javascript

jQuery弹出窗口简单实现代码

2017/03/09 Javascript

JS中Swiper的使用和轮播图效果

2017/08/11 Javascript

Angular实现的简单查询天气预报功能示例

2017/12/27 Javascript

Three.js 再探 - 写一个微信跳一跳极简版游戏

2018/01/04 Javascript

JQuery选中select组件被选中的值方法

2018/03/08 jQuery

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

2019/06/14 Javascript

js实现移动端tab切换时下划线滑动效果

2019/09/08 Javascript

详解JSON.stringify()的5个秘密特性

2020/05/26 Javascript

vue3为什么要用proxy替代defineProperty

2020/10/19 Javascript

[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛

2014/05/26 DOTA

Python多线程下载文件的方法

2015/07/10 Python

python中利用zfill方法自动给数字前面补0

2018/04/10 Python

对Xpath 获取子标签下所有文本的方法详解

2019/01/02 Python

Django 静态文件配置过程详解

2019/07/23 Python

python3实现mysql导出excel的方法

2019/07/31 Python

马来西亚最好的婴儿商店：Motherhood

2017/09/14 全球购物

美国围栏公司：Walpole Outdoors

2019/11/19 全球购物

古汉语文学求职信范文

2014/03/16 职场文书

考试作弊检讨书

2015/01/27 职场文书

幼师自荐信范文

2015/03/06 职场文书

HR在给员工开具离职证明时，需要注意哪些问题？

2019/07/03 职场文书

Python 中 Shutil 模块详情

2021/11/11 Python

使用 CSS 构建强大且酷炫的粒子动画效果

2022/08/14 HTML / CSS