首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在HTML5中使用MathML数学公式的简单讲解_html5教程技巧

作者：gavinwu | 来源：互联网 | 2017-05-11 14:13
这篇文章主要介绍了在HTML5中使用MathML数学公式的简单讲解,math标签的妙用往往可以收货意想不到的效果,需要的朋友可以参考下
HTML5 的 HTML 语法允许我们在文档内使用 ... 标签应用 MathML 元素。

下面是一个使用 MathML 的有效 HTML5 文档：

XML/HTML Code复制内容到剪贴板

  1. html
  2. >
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Pythagorean theoremtitle>
  7. head>
  8. <body>
  9. <math xmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <msup><mi>ami><mn>2mn>msup>
  12. <mo>+mo>
  13. <msup><mi>bmi><mn>2mn>msup>
  14. <mo>=mo>
  15. <msup><mi>cmi><mn>2mn>msup>
  16. mrow>
  17. math>
  18. body>
  19. html>

这会生成如下结果：


代码如下:

a2 + b2 = c2


便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

使用 MathML 字符
想象一下，下面是一个使用字符 ⁢ 的标记：

XML/HTML Code复制内容到剪贴板

  1. html
  2. >
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>MathML Examplestitle>
  7. head>
  8. <body>
  9. <math xmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <mrow>
  12. <msup>
  13. <mi>xmi>
  14. <mn>2mn>
  15. msup>
  16. <mo>+mo>
  17. <mrow>
  18. <mn>4mn>
  19. <mo>&＃8290;mo>
  20. <mi>xmi>
  21. mrow>
  22. <mo>+mo>
  23. <mn>4mn>
  24. mrow>
  25. <mo>=mo>
  26. <mn>0mn>
  27. mrow>
  28. math>
  29. body>
  30. html>

这会生成如下结果


代码如下:

x 2 + 4 x + 4 = 0


便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行在线练习。

矩阵表达示例
想象一下下面的例子，它会被用来表示一个简单的 2x2 矩阵：

XML/HTML Code复制内容到剪贴板

  1. html
  2. >
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>MathML Examplestitle>
  7. head>
  8. <body>
  9. <math xmlns="http://www.w3.org/1998/Math/MathML">
  10. <mrow>
  11. <mi>Ami>
  12. <mo>=mo>
  13. <mfenced open="[" close="]">
  14. <mtable>
  15. <mtr>
  16. <mtd><mi>xmi>mtd>
  17. <mtd><mi>ymi>mtd>
  18. mtr>
  19. <mtr>
  20. <mtd><mi>zmi>mtd>
  21. <mtd><mi>wmi>mtd>
  22. mtr>
  23. mtable>
  24. mfenced>
  25. mrow>
  26. math>
  27. body>
  28. html>

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

推荐阅读
  • cookie

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]
  • list

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • list

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • list

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • get

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • get

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • spring

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • io

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • get

    的错误消息：

    ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • get

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • main

    Android开发实现的计时器功能示例

    Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例，包括效果图、布局和按钮的使用。通过使用Chronometer控件，可以实现计时器功能。该示例适用于Android平台，供开发者参考。 ... [详细]
  • import

    使用cacti监控mssql 2005运行资源情况的操作步骤

    本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • spring

    分享css中提升优先级属性!important的用法总结

    分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • config

    网页播放视频的三种实现方式

    本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]
  • main

    CSS |网格行结束属性

    CSS|网格-行-结束属性原文:https://www.gee ... [详细]
author-avatar
gavinwu
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有