当前位置: 首页 > article >正文

HTML5 MathML

HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。

MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。

注意:目前只有 Firefox 或 Safari 浏览器支持,大部分浏览器还不支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari 浏览器查看。

 

MathML 实例

以下是一个简单的 MathML 实例:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</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> 

使用第三方库来支持:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
      <script type="text/javascript" src="https://static.jyshare.com/assets/js/mathml/mspace.js"></script>
   </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> 

运行结果图,如下所示:

以下实例添加了一些运算符:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</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> 

使用第三方库来支持:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
      <script type="text/javascript" src="https://static.jyshare.com/assets/js/mathml/mspace.js"></script>
   </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>
                  <mi>x</mi>
               </mrow>
                                        
               <mo>+</mo>
               <mn>4</mn>
                                        
            </mrow>
                                
            <mo>=</mo>
            <mn>0</mn>
                                 
         </mrow>
      </math>
                
   </body>
</html> 

运行结果图,如下所示:

以下实例是一个 2×2 矩阵,可以在 Firefox 3.5 以上版本查看到效果:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</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>

使用第三方库来支持:

实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
      <script type="text/javascript" src="https://static.jyshare.com/assets/js/mathml/mspace.js"></script>
   </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>

运行结果图,如下所示:


http://www.kler.cn/a/442267.html

相关文章:

  • 嵌入式杂谈——什么是DMA?有什么用?
  • WOA-CNN-GRU-Attention、CNN-GRU-Attention、WOA-CNN-GRU、CNN-GRU四模型对比多变量时序预测
  • PyTorch使用教程(2)-torch包
  • 构建优雅、高效的 Nodejs 命令行工具 - Archons
  • 使用 spring boot 2.5.6 版本时缺少 jvm 配置项
  • eBay账号安全攻略:巧妙应对风险
  • 【mysql】如何解决主从架构从库延迟问题
  • MybatisPlus介绍与应用
  • 泷羽sec学习打卡-brupsuite8伪造IP和爬虫审计
  • CTF_1
  • STM32-笔记4-按键点亮led
  • Jsckson @JsonValue 注解
  • springcloud打成jar包运行在centos7
  • 使用html2canvas库对可滚动的dom节点导出全量的图片
  • 【机器人】Graspness 端到端 抓取点估计 | 论文解读
  • Linux 磁盘空间不足之排查方法(Troubleshooting Method for Linux Disk Space Shortage)
  • 上传图片的预览
  • 【从零开始入门unity游戏开发之——C#篇16】C#什么是面向对象编程?
  • Kioptix Level 4(0基础教学)
  • 机器学习经典算法(scikit-learn)
  • 深入探索Vue.js中的v-show指令:动态控制DOM元素的高级技巧
  • Pandas教程之二十九: 使用 Pandas 处理日期和时间
  • 键盘常见键的keyCode和对应的键名
  • VMware OpenWrt怎么桥接模式联网
  • 视频直播点播平台EasyDSS推拉流技术结合无人机推流在道路交通巡检场景中的应用
  • 穷举vs暴搜vs深搜vs回溯vs剪枝专题一>全排列