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="參考注釋"> <sup>[l]</sup></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; }
點(diǎn)擊加載更多評(píng)論>>