Today I will meet two html tags that I don’t use very often: sub tags and sup tags.
Related articles: HTML tags: optgroup, sub, sup and bdo
Today I will meet two html tags that I don’t use very often: sub tags and sup tags.
Definition and usage:The <sub> tag can define subscript text. <sup> can define superscript text. All belong to in-line elements, and by default they are slightly smaller than the current font.
example:<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
<title>sub and sup tags in html</title>
<style type=text/css>
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
This tag is <sub>sub</sub>
This tag is <sup>sup</sup>
</div>
</body>
</html>
learn by analogy:Let’s take a look at how this effect of mathematical equations is achieved?
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
<title>sub and sup tags in html</title>
<style type=text/css>
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
x<sub>1</sub> y<sub>2</sub><sup>3</sup>=15
</div>
</body>
</html>
Other applications:By chance, I found that Taobao had made some modifications to the price some time ago (I don’t know why, but now it has been restored), which is different from the traditional price performance before.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
<title>sub and sup tags in html</title>>
</head>
<style type=text/css>
<!--
body { font:12px/1.8 Tahoma}
span.price { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:red;}
span.price sub { vertical-align:baseline; font-size:12px;}
span.price sup { vertical-align:text-bottom; color:#555}
-->
</style>
<body>
<span class=price><sup>￥</sup>43.<sub>26</sub></span>
</body>
</html>
I believe that the application of sub and sup tags is not limited to this, but the same is true for other html tags. As long as you understand them and stimulate our thinking and imagination, you can use them proficiently and show their unique charm.