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

The 6 Most Effective Ways to Write HTML and CSS

This article shares the 6 most effective methods,...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

Docker deploys Macvlan to achieve cross-host network communication

Basic concepts: Macvlan working principle: Macvla...

Solution for installing opencv 3.2.0 in Ubuntu 18.04

Download opencv.zip Install the dependencies ahea...

CentOS 7.x deployment of master and slave DNS servers

1. Preparation Example: Two machines: 192.168.219...

Next.js Getting Started Tutorial

Table of contents Introduction Create a Next.js p...

A complete list of commonly used Linux commands (recommended collection)

Table of contents 1. System Information 2. Shutdo...

Detailed explanation of routes configuration of Vue-Router

Table of contents introduce Object attributes in ...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

VMware implements the detailed process of PXE+kickstart unattended installation of Centos7 system

Table of contents PXE implements unattended batch...

A brief discussion on Mysql specified order sorting query

Recently, I have been working on a large-screen d...

Introduction to using MySQL commands to create, delete, and query indexes

MySQL database tables can create, view, rebuild a...

Docker image creation Dockerfile and commit operations

Build the image There are two main ways to build ...

Detailed explanation of the reasons and solutions for Docker failing to start normally

1. Abnormal performance of Docker startup: 1. The...

JavaScript to achieve mouse tailing effect

Mouse effects require the use of setTimeout to ge...