집 >웹 프론트엔드 >HTML 튜토리얼 >HTML5에서 MathML 수학 공식 사용

HTML5에서 MathML 수학 공식 사용

不言원래의: 2018-06-05 14:14:532991검색

이 글에서는 주로 HTML5에서 MathML 수학 공식을 사용하는 방법에 대해 소개합니다. 수학 태그를 훌륭하게 사용하면 종종 예상치 못한 효과가 나타날 수 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

HTML5의 HTML 구문을 사용하면 문서 내에서 < ;math>를 사용할 수 있습니다. ;...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 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 코드콘텐츠를 클립보드에 복사

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 수학 공식 사용

관련 기사