ホームページ > 記事 > ウェブフロントエンド > HTML5 での MathML 数式の使用

HTML5 での MathML 数式の使用

不言オリジナル: 2018-06-05 14:14:532948ブラウズ

この記事では主に HTML5 で MathML の数式を使用する簡単な説明を紹介します。math タグの素晴らしい使用方法は、予期せぬ効果を生み出すことがよくあります。

HTML5 の HTML 構文では、ドキュメント内で e54a3976ed0d77ffbddf4a497f6cab74 を使用できます。 ...7f3ab92a71d29302c9b0d35ffb4a1f8b タグは MathML 要素を適用します。

MathML を使用した有効な HTML5 ドキュメントは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピーします

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 コードコンテンツをクリップボードにコピー

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 コードコンテンツをクリップボードにコピーします

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 数式の使用

関連記事