在HTML5中使用MathML数学公式的简单讲解

所属分类：网页制作 / html5 阅读数： 711

收藏 0赞 0分享

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>

这会生成如下结果
2016219113648268.jpg (86×68)

更多精彩内容其他人还在看

HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码，深度美化页面增进用户体验效果,需要的朋友可以参考下

收藏 0赞 0分享

html5实现图片转圈的动画效果——让页面动起来

这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

收藏 0赞 0分享

html5清空画布方法（三种）

本篇文章主要介绍了html5清空画布方法（三种），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收藏 0赞 0分享

HTML5 文件域+FileReader 分段读取文件并上传到服务器

这篇文章主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下

收藏 0赞 0分享

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

这篇文章主要介绍了基于HTML5的WebGL实现json和echarts图表展现在同一个界面的相关资料,需要的朋友可以参考下

收藏 0赞 0分享

解决HTML5手机端页面缩放的问题

这篇文章主要介绍了解决HTML5手机端页面缩放的问题的相关资料,需要的朋友可以参考下

收藏 0赞 0分享

HTML5新特性之语义化标签

HTML5 只有一个简单的文档类型：<!DOCTYPE html>，表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签，感兴趣的朋友一起看看吧

收藏 0赞 0分享

基于HTML5 Canvas的3D动态Chart图表的示例

这篇文章主要介绍了基于HTML5 Canvas的3D动态Chart图表的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收藏 0赞 0分享

HTML5添加禁止缩放功能

本文通过一段代码给大家介绍了HTML5添加禁止缩放功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

收藏 0赞 0分享

如何避免常见的6种HTML5错误用法

本文是小编给大家收藏整理的关于常见的6种HTML5错误用法，非常不错，具有参考借鉴价值，需要的朋友参考下吧

收藏 0赞 0分享

在HTML5中使用MathML数学公式的简单讲解

HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

html5实现图片转圈的动画效果——让页面动起来

html5清空画布方法（三种）

HTML5 文件域+FileReader 分段读取文件并上传到服务器

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

解决HTML5手机端页面缩放的问题

HTML5新特性之语义化标签

基于HTML5 Canvas的3D动态Chart图表的示例

HTML5添加禁止缩放功能

如何避免常见的6种HTML5错误用法

网络赚钱

站长故事