编程 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实现炫酷的飞机起飞动画

Sep 17 HTML / CSS

CSS3的新特性介绍

Oct 31 HTML / CSS

css3 条纹化和透明化表格Firefox下测试成功

Apr 15 HTML / CSS

HTML5 声明兼容IE的写法

May 16 HTML / CSS

html5指南-1.html5全局属性(html5 global attributes)深入理解

Jan 07 HTML / CSS

Data URI scheme详解和使用实例及图片base64编码实现方法

May 08 HTML / CSS

解决Firefox下不支持outerHTML问题代码分享

Jun 04 HTML / CSS

详解HTML5中的元素与元素

Aug 17 HTML / CSS

Html5 audio标签样式的修改

Jan 28 HTML / CSS

HTML5中 rem适配方案与 viewport 适配问题详解

Apr 27 HTML / CSS

HTML CSS 一个标签实现带动画的抖音LOGO

Apr 26 HTML / CSS

聊聊CSS粘性定位sticky案例解析

Jun 01 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提示Failed to write session data错误的解决方法

2014/12/17 PHP

ajax+php实现无刷新验证手机号的实例

2017/12/22 PHP

代码分析jQuery四种静态方法使用

2015/07/23 Javascript

JS表格组件神器bootstrap table详解（基础版）

2015/12/08 Javascript

微信小程序网络请求API详解

2016/10/25 Javascript

AngularJS实现的生成随机数与猜数字大小功能示例

2017/12/25 Javascript

Vuex 进阶之模块化组织详解

2018/01/12 Javascript

基于vue 开发中出现警告问题去除方法

2018/01/25 Javascript

layui从数据库中获取复选框的值并默认选中方法

2018/08/15 Javascript

详解JavaScript添加给定的标签选项

2018/09/17 Javascript

如何在Node和浏览器控制台中打印彩色文字

2020/01/09 Javascript

Vue 封装防刷新考试倒计时组件的实现

2020/06/05 Javascript

js判断鼠标移入移出方向的方法

2020/06/24 Javascript

原生js实现拖拽移动与缩放效果

2020/08/24 Javascript

vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

2021/03/01 Vue.js

[00:20]DOTA2荣耀之路7：-ah fu-抢盾

2018/05/31 DOTA

[02:46]完美世界DOTA2联赛PWL DAY4集锦

2020/11/03 DOTA

Python FTP操作类代码分享

2014/05/13 Python

对python文件读写的缓冲行为详解

2019/02/13 Python

python协程之动态添加任务的方法

2019/02/19 Python

python绘制无向图度分布曲线示例

2019/11/22 Python

Python运行提示缺少模块问题解决方案

2020/04/02 Python

CSS3中的Transition过度与Animation动画属性使用要点

2016/05/20 HTML / CSS

雷朋巴西官方商店：Ray-Ban Brasil

2020/07/21 全球购物

德国亚马逊官方网站：Amazon.de

2020/11/15 全球购物

怎么写好自荐信

2013/10/30 职场文书

买卖车协议书

2014/04/21 职场文书

《青蛙看海》教学反思

2014/04/23 职场文书

财务人员担保书

2014/05/13 职场文书

简历自荐信范文

2015/03/09 职场文书

工作自我推荐信范文

2015/03/25 职场文书

幼儿园教学工作总结2015

2015/05/12 职场文书

Vue3 Composition API的使用简介

2021/03/29 Vue.js

攻击最高的10只幽灵系神奇宝贝，坚盾剑怪排第一，第五最为可怕

2022/03/18 日漫

shell进度条追踪指令执行时间的场景分析

2022/06/16 Servers

MySQL 原理与优化之原数据锁的应用

2022/08/14 MySQL