Maison  >  Article  >  interface Web  >  Utiliser des formules mathématiques MathML en HTML5

Utiliser des formules mathématiques MathML en HTML5

不言
不言original
2018-06-05 14:14:532905parcourir

Cet article présente principalement une explication simple de l'utilisation des formules mathématiques MathML en HTML5. L'utilisation merveilleuse des balises mathématiques peut souvent produire des effets inattendus. Les amis dans le besoin peuvent se référer aux autorisations de syntaxe HTML

Nous appliquons les éléments MathML. dans le document à l'aide de la balise e54a3976ed0d77ffbddf4a497f6cab74...7f3ab92a71d29302c9b0d35ffb4a1f8b.

Ce qui suit est un document HTML5 valide utilisant MathML :

Code XML/HTMLCopier le contenu dans le presse-papiers

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>

Cela générera le résultat suivant :

Copiez le code

Le code est le suivant :

a2 + b2 = c2

Facile à apprendre ces concepts - Veuillez utiliser FireFox 3.7 ou supérieur pour les exercices en ligne.

Utiliser des caractères MathML
Imaginez que voici un balisage qui utilise le caractère ⁢ :

Code XML/HTML Copiez le contenu dans le presse-papiers

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>

Cela générera les résultats suivants

Copiez le code

Le code est le suivant :

x 2 + 4  x + 4 = 0

Facile à apprendre ce concept - veuillez utiliser FireFox 3.7 ou supérieur pour vous entraîner en ligne.

Exemple d'expression matricielle
Imaginez l'exemple suivant, qui sera utilisé pour représenter une simple matrice 2x2 :

Code XML/HTML Copier le contenu dans le presse-papiers

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>

Cela générera les résultats suivants
2016219113648268.jpg (86×68)

Recommandations associées :

Recadrer l'image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn