编程 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混合模式mix-blend-mode/background-blend-mode简介

Mar 15 HTML / CSS

纯CSS3单页切换导航菜单界面设计的简单实现

Aug 16 HTML / CSS

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

Nov 05 HTML / CSS

浅谈基于HTML5的在线视频播放方案

Feb 18 HTML / CSS

HTML5 canvas实现移动端上传头像拖拽裁剪效果

Mar 14 HTML / CSS

HTML5 body设置自适应全屏

May 07 HTML / CSS

Html5导航栏吸顶方案原理与对比实现

Jun 10 HTML / CSS

Canvas波浪花环的示例代码

Aug 21 HTML / CSS

HTML5中外部浏览器唤起微信分享功能的代码

Sep 15 HTML / CSS

在HTML中引入CSS的几种方式介绍

Dec 06 HTML / CSS

html中相对位置与绝对位置的具体使用

May 15 HTML / CSS

纯CSS实现一个简单步骤条的示例代码

Jul 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

一个程序下载的管理程序(四)

2006/10/09 PHP

比较时间段一与时间段二是否有交集的php函数

2011/05/31 PHP

Discuz7.2版的faq.php SQL注入漏洞分析

2014/08/06 PHP

php实现统计目录文件大小的函数

2015/12/25 PHP

Laravel与CI框架中截取字符串函数

2016/05/08 PHP

laravel 使用auth编写登录的方法

2019/09/30 PHP

初学Javascript的一些总结

2008/11/03 Javascript

Javascript中产生固定结果的函数优化技巧

2013/01/16 Javascript

Javascript前端UI框架Kit使用指南之kitjs事件管理

2014/11/28 Javascript

jQuery实现鼠标划过展示大图的方法

2015/03/09 Javascript

详解JavaScript的流程控制语句

2015/11/30 Javascript

前端性能优化及技巧

2016/05/06 Javascript

再次谈论Javascript中的this

2016/06/23 Javascript

JavaScript每天必学之数组和对象部分

2016/09/17 Javascript

vue中如何引入jQuery和Bootstrap

2017/04/10 jQuery

Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

2017/08/22 Javascript

基于VUE.JS的移动端框架Mint UI的使用

2017/10/11 Javascript

jQuery插件Validation表单验证详解

2018/05/26 jQuery

对VUE中的对象添加属性

2018/09/18 Javascript

vue-router beforeEach跳转路由验证用户登录状态

2018/12/26 Javascript

详解Element-UI中上传的文件前端处理

2019/08/07 Javascript

Django渲染Markdown文章目录的方法示例

2019/01/02 Python

python添加菜单图文讲解

2019/06/04 Python

Python socket实现的文件下载器功能示例

2019/11/15 Python

pytorch实现onehot编码转为普通label标签

2020/01/02 Python

解决Pycharm 中遇到Unresolved reference 'sklearn'的问题

2020/07/13 Python

详解如何用canvas画一个微笑的表情

2019/03/14 HTML / CSS

美国社交购物市场：MassGenie

2019/02/18 全球购物

The Body Shop美体小铺西班牙官网：天然化妆品

2019/06/21 全球购物

为什么使用接口？

2014/08/13 面试题

中专生自荐信

2013/10/12 职场文书

软件工程专业推荐信

2013/10/28 职场文书

春秋淹城导游词

2015/02/11 职场文书

2015年端午节活动方案

2015/05/05 职场文书

护理心得体会范文

2016/01/22 职场文书

MySQL查询学习之基础查询操作

2021/05/08 MySQL