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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Erstellen Sie eine grundlegende 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 einen 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.

HTML durchgestrichener Text