如何用HTML编写化学公式？

Question

如何在HTML中编写以下内容？

我已经尝试过以下代码但看起来不太好

<sup>119</sup><sub>50</sub>Sn<sup>2+</sup>

¹¹⁹ <子> 50 的Sn ^{2 +}

Answer 1

我不知道是否可以使用纯HTML，但您可以使用CSS来相对于彼此定位元素。运行以下代码段。

.supsub {position: absolute}
.subscript {display:block; position:relative; left:5px; top: -5px}
.superscript {display:block; position:relative; left:0px; top: -5px}
.base {position:relative; left: 20px;}

<span class='supsub'><sup class='superscript'>119</sup><sub class='subscript'>50</sub></span><span class='supsub'><span class='base'>Sn<sup>2+</sup></span>

您可能需要使用left和top值来完全按照您的喜好定位。您可能还需要将整个HTML块放在自己的span或div中，这样定位元素就不会与页面上的其他元素交互。

Answer 2

您可以使用MathML，这可能有点冗长。这在技术上不是HTML，而是XML。但是，some browsers本身支持它，例如Safari和Firefox。不幸的是，Chrome不支持此功能，但通过包含MathJax脚本，它可以转换为纯HTML。

NLS_CHARACTERSET=CL8MSWIN1251
NLS_LANGUAGE=RUSSIAN
NLS_TERRITORY=RUSSIA

更多关于mmultiscripts的信息：https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mmultiscripts

一些MathML示例：https://www.w3.org/Math/XSL/csmall2.xml

Answer 3

我知道现在已经很晚了，但对于新手来说，这 website 对 html 中的科学很有帮助

.limes {
    position: relative;
    display: inline-block;
    margin: 0 0.2em;
    vertical-align: middle; 
    text-align: center;
}
.limes > span { 
    display: block;
    margin:-0.5ex auto;
}
.limes span.numup,
.limes span.overdn {
    font-size: 70%;
}
.eq-c {
  font-weight: 900;
  }

<div class="eq-c">
    <span class="limes"><span class="numup">119</span><span class="overdn">50</span></span>Sn<sup>2+</sup>
</div>