Durchgestrichenen Text in HTML erstellen

Einführung

Im HTML repräsentiert das <s>-Tag durchgestrichenen Text oder Text mit einer Linie dazwischen. Es kann verwendet werden, um irrelevanten oder nicht mehr aktuellen Textinhalt anzuzeigen. Es ist wichtig, das <del>-Tag statt des <s>-Tags für Zwecke der Dokumentenbearbeitung zu verwenden. In diesem Lab werden Sie lernen, wie Sie in HTML durchgestrichenen Text mit dem <s>-Tag erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML 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/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70841{{"HTML durchgestrichener Text"}} html/head_elems -.-> lab-70841{{"HTML durchgestrichener Text"}} html/text_dir -.-> lab-70841{{"HTML durchgestrichener Text"}} html/doc_flow -.-> lab-70841{{"HTML durchgestrichener Text"}} html/inter_elems -.-> lab-70841{{"HTML durchgestrichener Text"}} html/custom_attr -.-> lab-70841{{"HTML durchgestrichener Text"}} end

Erstellen einer einfachen HTML-Datei

Erstellen Sie eine HTML-Datei namens index.html. Hier ist, wie Sie eine einfache HTML-Struktur erstellen:

<!doctype html>
<html>
  <head>
    <title>Creating a Strikethrough Text in HTML</title>
  </head>
  <body>
    <!-- Your HTML code will go here -->
  </body>
</html>

Fügen Sie durchgestrichenen Text hinzu

Fügen Sie innerhalb des body-Tags Ihrer HTML-Datei das <s>-Tag hinzu, das durchgestrichenen Text darstellt. Hier ist, wie Sie die grundlegende Syntax schreiben:

<s>This text has a strikethrough.</s>

Im HTML-Ausgabe werden Sie den obigen Text mit einer Linie dazwischen sehen.

Fügen Sie ein Attribut hinzu

Obwohl das <s>-Tag keine spezifischen Attribute hat, unterstützt es sowohl globale als auch Ereignisattribute. Hier ist, wie Sie einem <s>-Tag ein Ereignisattribut hinzufügen:

<s onclick="alert('This is a strikethrough text.')">Click me!</s>

Im obigen Code wird das onclick-Ereignisattribut eine Alert-Nachricht mit dem Text anzeigen, wenn Sie auf den durchgestrichenen Text klicken.

Fügen Sie CSS-Stile hinzu

Sie können auch benutzerdefinierte CSS-Stile hinzufügen, um das Aussehen des durchgestrichenen Texts zu ändern. Hier ist, wie Sie CSS-Stile zum <s>-Tag hinzufügen:

<style>
  s {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
  }
</style>

Im obigen Code macht die Eigenschaft text-decoration den durchgestrichenen Effekt, die Eigenschaft color ändert die Schriftfarbe in rot, und die Eigenschaft font-size setzt die Schriftgröße auf 20px.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie in HTML durchgestrichenen Text mit dem <s>-Tag erstellen. Sie können das Aussehen des Texts durch Hinzufügen von CSS-Stilen oder Ereignisattributen anpassen. Das <s>-Tag eignet sich hervorragend zur Angabe von Text, der nicht mehr korrekt oder relevant ist, und kann auch bei der Dokumentenbearbeitung nützlich sein.