MathML - 括號與上標和下標

Hello, 動手的數學家們和網頁開發者們！今天，我們將要深入令人著迷的 MathML 世界，特別專注於下標和上標。作為你們親切鄰居的電腦老師，我很興奮能夠引導你們走過這段旅程。讓我們讓網頁上的數學表示法變得輕鬆！

括號和上標與下標是什麼？

在我們跳進程式碼之前，讓我們先了解下標和上標是什麼。想像你正在寫一個化學公式，如 H₂O 或者討論指數，如 x²。那些出現在文字下方或上方的小數字是什麼？那些就是下標和上標！

• 下標：出現在正常文字行下方的小字元。
• 上標：出現在正常文字行上方的小字元。

語法

在 MathML 中，我們使用兩個主要元素來表示下標和上標：

1. <msub>：用於下標
2. <msup>：用於上標

讓我們分解一下語法：

<msub>
<mi>基數</mi>
<mi>下標</mi>
</msub>

<msup>
<mi>基數</mi>
<mi>上標</mi>
</msup>

在這裡，<mi> 代表 "數學標識符"，通常用於變量或函數名稱。

參數

<msub> 和 <msup> 都接受兩個子元素：

1. 基數元素（你要添加下標或上標的元素）
2. 標記元素（實際的下標或上標）

屬性

雖然 <msub> 和 <msup> 沒有他們自己的特定屬性，但他們繼承了 MathML 的全局屬性。一些常見的包括：

屬性	描述
class	將類名分配給元素
id	為元素提供唯一標識符
style	應用內聯 CSS 樣式

示例

讓我們看看一些實際的例子，真正理解這些元素是如何工作的。

示例 1：化學公式（H₂O）

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>H</mi>
<msub>
<mn>2</mn>
<mi>O</mi>
</msub>
</mrow>
</math>

在這個例子中，我們正在創建水的公式。<mrow> 元素將 H 和下標的 O 一起組合。<msub> 元素創建下標，以 2 為基數，O 為下標。

示例 2：指數（x²）

<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>

在這裡，我們使用 <msup> 來創建 x 的平方。基數是 x，而上標是 2。

示例 3：結合下標和上標

<math xmlns="http://www.w3.org/1998/Math/MathML">
<msubsup>
<mi>a</mi>
<mi>i</mi>
<mi>j</mi>
</msubsup>
</math>

這個例子引入了 <msubsup>，它允許我們在同一個基數元素上添加下標和上標。就像說 "a 的 j 次方，下標 i"。

輸出

當由支持 MathML 的瀏覽器正確渲染時，這些例子應該看起來像這樣：

1. H₂O
2. x²
3. a_i^j

記住，不是所有的瀏覽器都原生支持 MathML，因此你可能需要使用多填或 JavaScript 库，如 MathJax，以確保在所有瀏覽器中的渲染一致性。

實用小貼士

1. 保持簡單：從基本的公式開始，然後逐漸增加複雜度。
2. 檢查瀏覽器支持：總是在不同的瀏覽器中測試你的 MathML。
3. 使用有意義的標識符：與其使用 <mi>x</mi>，不如考慮使用 <mi>變量</mi> 來提高可讀性。

結論

恭喜你們！你們已經踏出了進入 MathML 下標和上標世界的第一步。記住，熟練使人完美。嘗試從你的數學教科書中創造一些公式，或者發明你自己的數學表達式。

當我們結束時，我想到一位學生曾經告訴我，"數學只是寫下簡單想法的時尚方式。"有了 MathML，我們讓這些時尚的寫作對所有人來說都能在網上訪問！

繼續探索，繼續編程，最重要的是，繼續在數學中找到樂趣！

Credits: Image by storyset