HTML-Subtag und Sup-Tag

HTML-Subtag und Sup-Tag

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.

<<:  Die Ressourcen und Aktivierungsmethoden des MySQL-Desktoptools SQLyog verabschieden sich von der schwarz-weißen Befehlszeile

>>:  Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts mit reinem CSS

Artikel empfehlen

Detaillierte Erklärung der Kontrolle des Zugriffsvolumens durch Nginx

Zweck Machen Sie sich mit den Nginx-Modulen ngx_h...

Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.

Inhaltsverzeichnis verifizieren: Kombiniert mit d...

Detaillierte Erläuterung des Prozesses zur Behebung der Ursache für hohe CPU-Auslastung unter Linux

Inhaltsverzeichnis Vorwort Start Schritt Fehlerbe...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

<meta http-equiv="X-UA-kompatibel" c...

Detaillierte Erklärung zum Anzeigen und Festlegen von Dateiberechtigungen auf dem Mac

Vorwort Um Dateiberechtigungen im Terminal eines ...

Kurze Analyse von CentOS 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Baidu Cloud-Festplatte: Link: https://pan.baidu.c...

JS realisiert Video-Sperreffekt

Verwenden Sie um dies zu erreichen, die modulare ...

Detaillierte Schritte zur Installation von MySQL auf CentOS 7

Wenn wir in CentOS7 MySQL installieren, wird Mari...

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Dieser Artikel darf gerne geteilt und zusammengef...

So fügen Sie schnell 10 Millionen Datensätze in MySQL ein

Ich habe gehört, dass es eine Interviewfrage gibt...

Installieren Sie Tomcat und stellen Sie die Website unter Linux bereit (empfohlen)

Installieren Sie JDK: Offizieller Oracle-Download...

Docker startet das Elasticsearch-Image und behebt den Fehler nach dem Mounten des Verzeichnisses

Ein ES-Image vom Docker-Hub heruntergeladen, Vers...

Erste Schritte beim Erstellen einer Website für Anfänger ③ Alias-Einträge (CNAME) und URL-Weiterleitung

①. So verwenden Sie den Alias-Eintrag (CNAME): Be...

So implementieren Sie die Fernzugriffskontrolle in Centos 7.4

1. SSH-Remoteverwaltung SSH ist ein sicheres Kana...