首頁 >web前端 >html教學 >在HTML5中使用MathML數學公式

在HTML5中使用MathML數學公式

不言原創: 2018-06-05 14:14:532964瀏覽

這篇文章主要介紹了在HTML5中使用MathML數學公式的簡單講解,math標籤的妙用往往可以收貨意想不到的效果,需要的朋友可以參考下

HTML5 的HTML 語法允許我們在文件內使用e54a3976ed0d77ffbddf4a497f6cab74...7f3ab92a71d29302c9b0d35ffb4a1f8b 標籤應用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中使用MathML數學公式

相關文章