HTML5文本 描述性信息 上下標(biāo)

    ■知識(shí)點(diǎn)

    在傳統(tǒng)印刷中，上標(biāo)和下標(biāo)是很重要的排版格式。HTML5使用sup和sub來定義上標(biāo)文本和下標(biāo)文本。上標(biāo)和下標(biāo)文本比主體文本稍高或稍低。常見的上標(biāo)包括商標(biāo)符號(hào)、指數(shù)和腳注編號(hào)等；常見的下 標(biāo)包括化學(xué)符號(hào)等。

    ■實(shí)例設(shè)計(jì)

【示例1】本例使用sup元素標(biāo)識(shí)腳注編號(hào)。根據(jù)從屬關(guān)系，將腳注放在article的footer里，而不是頁面的footer里。

<article>

    <hl> 王維 </hl>

    <p>王維參禪悟理，學(xué)莊信道，精通詩、書、畫、音樂等，以詩名盛于開元、天寶間，尤長五言，多詠山水田園，與孟浩然合稱“王孟”，有“詩佛”之稱<a href="#footnote-l" title="參考注釋"> ^[l]</a> 。 </p>

    <footer>

    <h2>參考資料</h2>

<Pid="f00tn0te-l”><Sup>[l]</Sup>孫昌武?《佛教與中國文學(xué)》第二章：“王維的詩歌受佛教影響是很顯著的。因此早在生前，就得到‘當(dāng)代詩匠，又精禪理’的贊譽(yù)。后來，更得到‘詩佛’的稱 號(hào)?！?</p>

    </footer>

</article>

    為每個(gè)腳注編號(hào)定義鏈接，指向footei，內(nèi)的對(duì)應(yīng)的腳注，方便瀏覽者點(diǎn)擊跳轉(zhuǎn)。

    ■小結(jié)

    在默認(rèn)狀態(tài)下，sub和sup元素會(huì)微微增大行高。用戶可以使用CSS修復(fù)這個(gè)問題，也可以根據(jù)內(nèi)容的字號(hào)對(duì)這個(gè)CSS做一些調(diào)整，使各行行高保持一致。

sub, sup {

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

    position: relative;

    vertical-align: baseline;

}

sup { top: -0.5em; }

sub { bottom: -0.25em; }