一篇文章帶你瞭解HTML5 MathML
HTML5 可以在文件中使用 MathML 元素,對應的標籤是 <math>... </math> 。
MathML 是數學標記語言,是一種基於XML(標準通用標記語言的子集)的標準,用來在網際網路上書寫數學符號和公式的置標語言。
注意:
大部分瀏覽器都支援 MathML 標籤,如果你的瀏覽器不支援該標籤,可以使用最新版的 Firefox 或 Safari 瀏覽器檢視。
一、MathML 簡單例項
以下是一個簡單的 MathML 例項。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>專案</title> </head> <body style="background-color: aqua;"> <math xmlns=" <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>
執行結果圖,如下所示:
二、
用作
MathML 字元
想象一下,下面是一個用作字元 的標記:XML/HTML Code貼上內容到剪貼簿。
以下例項新增了一些運算子:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>專案</title> </head> <body style="background-color: aqua;"> <math xmlns=" <mrow> <mrow> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo></mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>6</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </body></html>
執行結果圖,如下所示:
三、MathML乘法
<msgroup>用於對 <mstack>元素和 <mlongdiv>元素內的行進行分組,以使其位置相對於堆疊的對齊方式。帶有shift屬性的 <msgroup>元素可以用於建立簡單乘法。
1. 用法
以下是使用此標籤的簡單語法 。
<msgroup> expression </msgroup>
2. 引數
這是這個標籤的所有引數的描述 ( 表示式 - 表示式 )。
3. 屬性
位置 : 指定組內相對於由包含msgroup控制的位置(根據其位置和位移屬性)的行的水平位置。預設值為0。
shift : 指定組內連續子項(行或組)的位置的遞增位移。預設值為0。
4. 案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>專案</title> </head> <body style="background-color: aqua;"> <math xmlns=" <mstack> <msgroup> <mn>123</mn> <msrow> <mo>×</mo> <mn>321</mn> </msrow> </msgroup> <msline /> <msgroup shift="1"> <mn>123</mn> <mn>246</mn> <mn>369</mn> </msgroup> <msline /> <mn>39483</mn> </mstack> </math> </body></html>
四、矩陣表達出來
下面的例子,它可能會被用來指出一個比較簡單的 2x2 矩陣。XML/HTML Code副本內容到剪貼簿
以下例項是一個 2×2 矩陣。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>專案</title> </head> <body style="background-color: aqua;"> <math xmlns=" <mrow> <mi>BAS</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>
執行結果圖,如下所示:
五、總結
本文基於HTML基礎,介紹了MathML常見的用法。在本文中,介紹瞭如何用作 MathML 字元,重點介紹了MathML乘法的實際應用。透過一個個案例的分析,介紹了其用法,屬性。執行效果圖的展示,能夠讓讀者更好的理解。
歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
更多的 HTML教程也會繼續給大家更新,整理的 全套HTML影片教學,學習的夥伴,可以關注學習!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69923331/viewspace-2730847/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 一篇文章帶你初步瞭解—CSS特指度CSS
- 一篇文章帶你瞭解和使用Promise物件Promise物件
- 一篇文章帶你瞭解——Kotlin協程Kotlin
- 一篇文章帶你瞭解介面自動化
- 一篇文章帶你瞭解HTML格式化元素HTML
- 一篇文章帶你瞭解CSS 分頁例項CSS
- 一篇文章帶你瞭解高可用架構分析架構
- 一篇文章帶你瞭解設計模式——建立者模式設計模式
- 一篇文章帶你瞭解設計模式——結構型模式設計模式
- 你真的瞭解python嗎?這篇文章帶你快速瞭解!Python
- 一篇文章帶你瞭解高質量代理ip的使用技巧
- 一篇文章帶你瞭解Python基礎測試工具——UnitTestPython
- 機器學習到底是什麼?一篇文章帶你瞭解透徹機器學習
- 一篇帶你瞭解TCP/IP 概念TCP
- 什麼是工藝流程圖?一篇文章帶你詳細瞭解流程圖
- 一篇文章帶你更深入瞭解區塊鏈有哪些應用?區塊鏈
- 一篇文章幫你瞭解 PHP 7.3 更新PHP
- 一篇文章帶你瞭解網路爬蟲的概念及其工作原理爬蟲
- 什麼是Python爬蟲?一篇文章帶你全面瞭解爬蟲Python爬蟲
- 一文章帶你瞭解微服務微服務
- 一篇文章帶你瞭解Python常用自動化測試框架——PytestPython框架
- 一篇文章瞭解大前端前端
- 一篇文章帶你吃透 Docker 原理Docker
- 一篇文章帶你入門Zookeeper
- 一篇文章讓你徹底瞭解Java內部類Java
- 一篇文章帶你瞭解 Java 自動記憶體管理機制及效能優化Java記憶體優化
- 一篇文章帶你瞭解設計模式原理——UML圖和軟體設計原則設計模式
- 一篇文章瞭解JsBridgeJS
- 帶你瞭解webpackWeb
- 一篇文章帶你認識 SpringSecuritySpringGse
- 一篇文章圖文並茂地帶你輕鬆學會 HTML5 storageHTML
- 這一篇就夠啦,帶你瞭解MySQL的常用技巧MySql
- 一篇文章瞭解Redis資料庫Redis資料庫
- 一篇文章瞭解RPC框架原理RPC框架
- 分享一篇文章 "深入瞭解 Go 方法"Go
- 帶你快速瞭解HTMLHTML
- 一篇文章讓你瞭解Android各個版本的歷程Android
- 一篇文章圖文並茂地帶你輕鬆實踐 HTML5 history apiHTMLAPI