HTML sub tag and sup tag

HTML sub tag and sup tag

Today I will introduce two HTML tags that I don’t use very often: the sub tag and the sup tag.
Definition and Usage:
 The <sub> tag defines subscript text. <sup> defines superscript text. They are all inline elements and are slightly smaller than the current font by default.

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 see how to achieve this effect with mathematical equations.




<!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 discovered that Taobao had made some adjustments to its prices some time ago (I don't know why, but it has been restored now), which is different from the traditional price display in the past.















<!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. The same is true for other HTML tags. As long as you understand them and mobilize your thinking and imagination, you can use them skillfully and show their unique charm.

<<:  Practice of el-cascader cascade selector in elementui

>>:  Sample code for achieving three-dimensional picture placement effect with pure CSS

Recommend

Detailed explanation of javascript event bubbling, event capture and event delegation

1. Event bubbling : In the process of JavaScript ...

The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands

What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...

CSS3 to achieve dynamic background gradient effect

Learning CSS3 is more about getting familiar with...

What is web design

<br />Original article: http://www.alistapar...

Specific implementation methods of MySQL table sharding and partitioning

Vertical table Vertical table splitting means spl...

Detailed explanation of mysql exists and not exists examples

Detailed explanation of mysql exists and not exis...

base target="" specifies the target of the base link to open the frame

<base target=_blank> changes the target fram...

Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop

Table of contents 1. Why is JavaScript single-thr...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Detailed explanation of the steps to create a web server with node.js

Preface It is very simple to create a server in n...

Getting Started: A brief introduction to HTML's basic tags and attributes

HTML is made up of tags and attributes, which are...

Improvement experience and sharing of 163 mailbox login box interactive design

I saw in the LOFTER competition that it was mentio...

MySQL 8.0.24 installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

Detailed explanation of MySQL remote connection permission

1. Log in to MySQL database mysql -u root -p View...

How to operate MySql database with gorm

1. Setting case sensitivity of fields in the tabl...