HTML-Tags: Sub-Tag und Sup-Tag

HTML-Tags: Sub-Tag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nicht sehr oft verwende: das Sub-Tag und das Sup-Tag.
Verwandter Artikel: HTML-Tags: optgroup, sub, sup und bdo
Heute stelle ich zwei HTML-Tags vor, die ich nicht sehr oft verwende: das Sub-Tag und das Sup-Tag.
Definition und Verwendung:
Das <sub>-Tag definiert tiefgestellten Text. <sup> definiert hochgestellten Text. Sie sind alle Inline-Elemente und standardmäßig etwas kleiner als die aktuelle Schriftart.
Beispiel:
<!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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>sub- und sup-Tags in html</title>
<style type="text/css">
* { Schriftgröße:12px; Schriftfamilie:Tahoma}
</Stil>
</Kopf>
<Text>
<div>
Dieses Tag ist <sub>sub</sub>
Dieses Tag ist <sup>sup</sup>
</div>
</body>
</html>





durch Analogie lernen:

Sehen wir uns an, wie dieser Effekt mit mathematischen Gleichungen erzielt werden kann.





<!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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Sub- und Sup-Tags in HTML</title>
<style type="text/css">
* { Schriftgröße:12px; Schriftfamilie:Tahoma}
</Stil>
</Kopf>
<Text>
<div>
x<sub>1</sub> y<sub>2</sub><sup>3</sup>=15
</div>
</body>
</html>
Andere Anwendungen:
Durch Zufall habe ich entdeckt, dass Taobao vor einiger Zeit einige Anpassungen an seinen Preisen vorgenommen hat (ich weiß nicht, warum, aber jetzt sind sie wiederhergestellt), die sich von der herkömmlichen Preisanzeige in der Vergangenheit unterscheiden.










<!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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>sub- und sup-Tags in html</title>>
</Kopf>
<style type="text/css">
<!--
Text { Schriftart:12px/1.8 Tahoma}
span.price { Schriftfamilie: Arial, Helvetica, serifenlos; Schriftgröße: 16px; Schriftstärke: 700; Farbe: rot;}
span.price sub { vertikale Ausrichtung: Grundlinie; Schriftgröße: 12px;}
span.price sup { vertical-align:text-bottom; color:#555}
-->
</Stil>
<Text>
<span class="Preis"><sup>￥</sup>43,<sub>26</sub></span>
</body>
</html>
Ich glaube, dass die Anwendung von Sub- und Sup-Tags nicht darauf beschränkt ist. Dasselbe gilt für andere HTML-Tags. Solange Sie sie verstehen und Ihr Denken und Ihre Vorstellungskraft mobilisieren, können Sie sie geschickt einsetzen und ihren einzigartigen Charme entfalten.

<<:  Vue-Vorlagenkonfiguration und Webstorm-Codeformatspezifikationseinstellungen

>>:  So löschen Sie schwebenden Beispielcode in CSS

Artikel empfehlen

Zwei Möglichkeiten, dem Hintergrundbild mithilfe der Hintergrundfarbe über CSS einen Maskeneffekt hinzuzufügen

Wenn ein Div gleichzeitig Hintergrundfarbe und Hi...

Implementierungscode der Front-End-HTML-Skin-Änderungsfunktion

50 Zeilen Code zum Ändern von 5 Hautfarben, einsc...

React tsx generiert einen zufälligen Bestätigungscode

React tsx generiert einen zufälligen Bestätigungs...

js implementiert Array-Abflachung

Inhaltsverzeichnis So reduzieren Sie ein Array 1....

Detaillierte Erläuterung der Wertübertragung von nicht über- und untergeordneten Komponenten in Vue3

Inhaltsverzeichnis App.vue sub1.vue sub2.vue Zusa...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...

Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue

Inhaltsverzeichnis Vorwort SVG generieren Einführ...

Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren

Inhaltsverzeichnis 1. Grundprinzipien 2. Spezifis...

Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS

Die traditionelle Methode besteht darin, ein Quad...

So starten Sie ein Vue.js-Projekt

Inhaltsverzeichnis 1. Node.js und Vue 2. Führen S...

Detaillierte Erläuterung der Anwendung von Docker Swarm im kontinuierlichen Integrationstest

Hintergrund Das Agile-Modell wird häufig verwende...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

Im Mybatis MySQL-Löschvorgang kann nur die erste Datenmethode gelöscht werden

Insekten Wie in der Abbildung gezeigt, begann ich...

Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten

Inhaltsverzeichnis 1. So erhalten Sie unterschied...

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

URL: http://hostname.com/contextPath/servletPath/...