最近做H5應用，遇到了一個棘手的問題，怎麼在網頁上排版中學題目。問題關鍵在於，現在的中學題目，具有太豐富的形式，在網頁設計的時候，有許多情形要考慮，列幾條：
- 題目篇幅太長，一般還帶有閱讀材料，主要體現在語文和英語上
- 圖文混排，格式比較雜
- 理科還有各種公式之類的
- 選項多樣，單選，多選
這麼看來，在線教育的題庫，確實是個比較重要的問題。
在做這個的時候，發現一些小的技巧可以解決許多理科排版上的問題，拿出來分享一下。當然，粗暴一點，通過文字+圖片的形式，其實可以解決所有的題目排版的，就是比較費功夫。
一些簡單的數學排版
上標
用途：平方、立方及n次方等
排版：使用html的sup標籤
a<sup>n</sup>示例：
下標
用途：腳標
排版：使用html的sub標籤
a<sub>n</sub>示例：
根號
用途：平方根
排版：使用√+上劃線合成
√<span style="text-decoration:overline;">5</span>示例：
上劃線和下劃線
用途：強調、變量命名等
排版：及text-decoration
<u>x+y</u>
<span style="text-decoration:overline;">a</span>示例：
分數
分數只能通過斜槓來表示，例如1/2, 1/3, 1/4 ……
一些html字符實體
html語法中，帶有不少字符實體，舉一些例子。這些符號都可以直接通過html標籤來描述。
| 顯示 | 描述 | 名稱 | 編號 |
|---|---|---|---|
| “ | quotation mark | " | " |
| ‘ | apostrophe | ' | ' |
| & | ampersand | & | & |
| < | less-than | < | < |
| > | greater-than | > | > |
| ± | plus-or-minus | ± | ± |
| × | multiplication | × | × |
| ÷ | division | ÷ | ÷ |
更多HTML字符實體，參考這裏。
其他可用字符
注意觀察，平時在網頁上也會經常看到一些特殊的字符，例如π, ⋂，∀，∃等，這些都是Unicode或者UTF8字符，也可以使用。
對於一些簡單場景下的應用，使用這樣的數學符號來偷懶還是可以的。如果是比較專業的場景，例如做教育類、題庫類的，應該想更全面的辦法。