首页 » 编程语言 » html » 正文

html元素sup标签的使用方法及作用

html元素sup标签的使用方法及作用详解如下:

<sup>标签的定义

<sup>标签是英文单词“Superscripted”的缩写,有“上标”的意思;

<sup>标签是用来定义上标文本,而定义下标文本则是<sub>标签;

<sup>标签是双标签,必须成对出现,上标文本必须放在<sup>和</sup>之间;

浏览器支持情况

<sup>标签已被所有主流浏览器都支持 ;

<sup>标签的用法

包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

1、添加脚注数字

可向文档中的某个文本、词组、句子段落添加上标脚注数字。

上食埃<sup>[1]</sup>土,下饮黄泉。——《荀子·劝学》

以上代码中的sup标签为“埃”字添加了脚注数字[1],如果我们在文档末尾或页脚底部,再给对应的脚注“埃”进行注释,就是像下图所示的那样:

2020-05-03_164349.png

如果和 <a> 标签结合起来使用,就可以创建出很好的超链接脚注。

2、超链接脚注

有时的时候,我可以给脚注数字添加一个超链接,比如,前面的案例中,给埃字添加了脚注数字[1],然后,在这个脚注数字上面创建一个超链接,跳转到一个专门解释埃字的页面,演示代码如下:

上食埃<sup><a href="http://liusongsong.com/archives/6.html">[1]</a></sup>土,下饮黄泉。——《荀子·劝学》

 以上代码在浏览器中显示效果及分析图片如下:

2020-05-04_004704.png

3、添加数的次方

可运用在数学方程式中,主要表达数的次方

<p>3的平方:3 <sup>2</sup> </p>
<p>3的5次方:3 <sup>5</sup> </p>

以上代码在浏览器中显示效果如下:

2020-05-02_002721.png



欢迎您发表评论或留言