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

Linux CentOS MySQL database installation and configuration tutorial

Notes on installing MySQL database, share with ev...

Windows 2019 Activation Tutorial (Office2019)

A few days ago, I found that the official version...

Can asynchrony in JavaScript save await?

I knew before that to synchronously obtain the re...

Pessimistic locking and optimistic locking in MySQL

In relational databases, pessimistic locking and ...

How to add indexes to MySQL

Here is a brief introduction to indexes: The purp...

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Preface: I received crazy slow query and request ...

Summary of Linux nc command

NC's full name is Netcat (Network Knife), and...

Detailed explanation of possible problems in converting floating point data to character data in MySQL

Preface This article mainly introduces a problem ...

Solve the problem of MySQL Threads_running surge and slow query

Table of contents background Problem Description ...

JavaScript implements checkbox selection function

This article example shares the specific code of ...

An example of vertical centering of sub-elements in div using Flex layout

1. Flex is the abbreviation of Flexible Box, whic...

MySQL 5.7.16 free installation version installation and configuration method graphic tutorial

This article records the installation and configu...

Introduction to JavaScript Number and Math Objects

Table of contents 1. Number in JavaScript 2. Math...

Common browser compatibility issues (summary)

Browser compatibility is nothing more than style ...

Exploring the practical value of the CSS property *-gradient

Let me first introduce an interesting property - ...