html/css排版一些简单的数学公式

最近做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字符，也可以使用。

对于一些简单场景下的应用，使用这样的数学符号来偷懒还是可以的。如果是比较专业的场景，例如做教育类、题库类的，应该想更全面的办法。