HTML5文本 描述性信息 上下标

    ■知识点

    在传统印刷中，上标和下标是很重要的排版格式。HTML5使用sup和sub来定义上标文本和下标文本。上标和下标文本比主体文本稍高或稍低。常见的上标包括商标符号、指数和脚注编号等；常见的下 标包括化学符号等。

    ■实例设计

【示例1】本例使用sup元素标识脚注编号。根据从属关系，将脚注放在article的footer里，而不是页面的footer里。

<article>

    <hl> 王维 </hl>

    <p>王维参禅悟理，学庄信道，精通诗、书、画、音乐等，以诗名盛于开元、天宝间，尤长五言，多咏山水田园，与孟浩然合称“王孟”，有“诗佛”之称<a href="#footnote-l" title="参考注释"> ^[l]</a> 。 </p>

    <footer>

    <h2>参考资料</h2>

<Pid="f00tn0te-l”><Sup>[l]</Sup>孙昌武•《佛教与中国文学》第二章：“王维的诗歌受佛教影响是很显著的。因此早在生前，就得到‘当代诗匠，又精禅理’的赞誉。后来，更得到‘诗佛’的称 号。” </p>

    </footer>

</article>

    为每个脚注编号定义链接，指向footei，内的对应的脚注，方便浏览者点击跳转。

    ■小结

    在默认状态下，sub和sup元素会微微增大行高。用户可以使用CSS修复这个问题，也可以根据内容的字号对这个CSS做一些调整，使各行行高保持一致。

sub, sup {

    font-size: 75%; line-height: 0;

    position: relative;

    vertical-align: baseline;

}

sup { top: -0.5em; }

sub { bottom: -0.25em; }