Учебники

HTML5 — MathML

Август 22, 2018

Синтаксис HTML в HTML5 позволяет использовать элементы MathML внутри документа с использованием тегов <math> … </ math>.

Большинство веб-браузеров могут отображать теги MathML. Если ваш браузер не поддерживает MathML, я бы посоветовал вам использовать последнюю версию Firefox.

Примеры MathML

Ниже приведен действительный документ HTML5 с MathML —

Live Demo

<!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>

Это даст следующий результат —

Использование символов MathML

Обратите внимание, что ниже приведена разметка, в которой используются символы & InvisibleTimes; —

Live Demo 

<!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 + 4x + 4 = 0, используйте Firefox 3.5 или более позднюю версию.

Это даст следующий результат —

Примеры матричной презентации

Рассмотрим следующий пример, который будет использоваться для представления простой матрицы 2×2:

Live Demo 

<!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>

Это даст следующий результат —

Это дало бы следующий результат. Если вы не можете увидеть правильный результат, используйте Firefox 3.5 или более позднюю версию.

42
Share: