Superskript-Text: Erhöhen Sie Ihren HTML-Inhalt

Einführung

Das HTML-Tag sup ermöglicht es Ihnen, Text in Superskript-Format auf einer Webseite anzuzeigen. In diesem Lab werden wir demonstrieren, wie das sup-Tag verwendet wird, um Superskript-Text zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"HTML Superskript-Text"}} html/head_elems -.-> lab-70851{{"HTML Superskript-Text"}} html/lang_decl -.-> lab-70851{{"HTML Superskript-Text"}} html/text_dir -.-> lab-70851{{"HTML Superskript-Text"}} html/inter_elems -.-> lab-70851{{"HTML Superskript-Text"}} end

Einrichten der HTML-Datei

Erstellen Sie eine HTML-Datei namens index.html und legen Sie die grundlegende HTML-Struktur fest.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

Hinzufügen von Superskript-Text

Fügen Sie das sup-Tag zur HTML-Datei hinzu. Innerhalb der öffnenden und schließenden Tags des sup-Elements fügen Sie den Text hinzu, den Sie als Superskript anzeigen möchten.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>
      Meine E-Mail-Adresse lautet: user123<sup>@</sup>example<sup>.</sup>com
    </p>
  </body>
</html>

Gestalten des Superskript-Textes

Sie können das sup-Tag mit CSS gestalten, um seine Schriftgröße und vertikale Ausrichtung anzupassen. Fügen Sie den folgenden CSS-Code zu Ihrer HTML-Datei hinzu:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>
      Meine E-Mail-Adresse lautet: user123<sup>@</sup>example<sup>.</sup>com
    </p>
  </body>
</html>

Hinzufügen von mathematischen Notationen

Superskript-Text ist ein wichtiger Bestandteil mathematischer Notationen. Sie können das sup-Tag verwenden, um Exponenten und Potenzen darzustellen. Fügen Sie beispielsweise folgenden Code zu Ihrer HTML-Datei hinzu:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>Der Wert von 2<sup>3</sup> ist 8.</p>
  </body>
</html>

Zusammenfassung

In diesem Lab haben wir uns mit dem sup-Tag in HTML beschäftigt. Wir haben gelernt, wie man Superskript-Text erstellt und ihn verwendet, um Exponenten und Potenzen darzustellen. Wir haben auch gelernt, wie man das sup-Tag mit CSS gestaltet. Mit den aus diesem Lab erlernten Fähigkeiten können Sie jetzt leicht Superskript-Text zu Ihren HTML-Seiten hinzufügen.