如何在 HTML 中编写求和表达式？答案

【问题标题】：How to write summation expression in HTML?如何在 HTML 中编写求和表达式？
【发布时间】：2012-11-17 13:08:01
【问题描述】：

如何为以下 Latex 编写等效的 HTML 表达式：

$$\sum_{k=1}^Nk(N-k+1)

图片是：

我是这样做的：

∑ <sub>k=1</sub> <sup>N</sup>

但是输出是这样的

∑_k=1^N

我不擅长 HTML，我在网上搜索但找不到答案。请对此提供帮助..谢谢！

【问题讨论】：

标签： html web

【解决方案1】：

如果您的项目中有很多东西需要它，您可能会发现MathJax 很有用。否则，如果您只需要这个公式，那么试试这个 - DEMO

<p>
    <span>&Sigma;</span>
    k ( N - k + 1 )
</p>

CSS

p {
    height: 50px;
    line-height: 50px;
}

span {
    position: relative;
    font-size: 2.5em;
    display: inline-block;
    line-height: .7em;
    vertical-align: middle;
}

span:before {
    font-size: 12px;
    display: block;
    position absolute;
    left: 0;
    top: 0;
    content: "N";
    width: 22px;
    text-align: center;
}

span:after {
    font-size: 12px;
    display: block;
    position absolute;
    left: 0;
    bottom: 0;
    content: "k = 1";
    width: 27px;
    text-align: center;
}

【讨论】：

@Zolthan Toth ：虽然它适用于 .html ......但是如果我需要在 stackoverflow 上 my answer 怎么写。最后我必须上传一张图片。
有一天我需要在stackoverflow上回答时写这种表达式，但我写不出来。在你回答之后，我可以写下我的 html pase ..How to write this expression in stackoverflow's answer form.
这里是my answer，我想写一个summation expression。
@GrijeshChauhan，你不能在 SO 上做自定义 CSS。图片足以解释。

【解决方案2】：

正如其他人所写，最好的选择可能是MathJax，尽管轻量级的jqMath 可能更适合某些需求。以下是如何将 MathJax 用于您的公式（对于生产用途，请考虑将 MathJax 软件上传到您自己的服务器上）：

<!DOCTYPE html>
<title>MathJax demo</title>
<script src=
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
$$\sum_{k=1}^Nk(N-k+1)$$

纯 HTML 不会带您走太远，即使使用 CSS 样式，显示公式的结果也不能令人满意。您将需要使用 CSS 定位（在这里会变得很棘手）或 HTML 中基于表格的笨拙构造；参看。到我的笔记Math in HTML (and CSS)，尤其是最后关于二维的笔记。

【讨论】：

来自未来的注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 以获取迁移提示（也许为未来的读者更新您的帖子）。

【解决方案3】：

虽然MathJax 几乎可以肯定是正确答案（主页上甚至还有一个求和示例），但您可以使用简单的 HTML 元素（但是这些看起来不如最终的 MathJax/LaTeX 结果好） .

求和符号是HTML实体&sum;，上、下标可以用sup和sub元素标记，所以试试：

&sum;<sub>k=1</sub><sup>N</sup> k (N - k + 1)

得到：∑_k=1^N k (N - k + 1) .

【讨论】：

【解决方案4】：

使用 Mathjax：http://www.mathjax.org/

它是专为您正在寻找的东西而构建的。

【讨论】：