HTML gelöschter Text

Einführung

Das HTML del-Tag wird verwendet, um einen gelöschten Text in einem Dokument anzuzeigen. Mit dem del-Tag können wir den gelöschten Text mit einem Durchstrich darstellen. In diesem Lab werden Sie lernen, wie Sie das HTML del-Tag verwenden, um einen durchgestrichenen Text zu erstellen.

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

Erstellen eines durchgestrichenen Texts

Bevor Sie beginnen, erstellen Sie eine HTML-Datei namens index.html. In dieser Datei werden wir einen durchgestrichenen Text mit dem HTML del-Tag erstellen.

Um einen durchgestrichenen Text zu erstellen, gehen Sie folgendermaßen vor:

1. Öffnen Sie die Datei index.html in Ihrem Code-Editor.
2. Fügen Sie das HTML del-Tag (<del>) dem Text hinzu, den Sie durchstreichen möchten.

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>

   Im obigen Beispiel wird das Wort quick als durchgestrichen angezeigt.
3. Speichern Sie die Datei index.html und öffnen Sie sie im Browser.

Verwenden von Attributen des HTML del-Tags

Das HTML del-Tag hat zwei wichtige Attribute: 'cite' und 'datetime'. In diesem Schritt werden wir sehen, wie diese Attribute verwendet werden.

1. Hinzufügen des Cite-Attributs - Verwenden Sie das Cite-Attribut, um die URL einer Datei anzugeben, die den gelöschten Text beschreibt.

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

2. Hinzufügen des Datetime-Attributs - Verwenden Sie das Datetime-Attribut, um den Zeitpunkt anzugeben, zu dem der Text gelöscht wurde.

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

Erstellen eines durchgestrichenen Texts mit eingefügtem Text

Oft möchten wir, wenn wir Text aus einer Webseite löschen, anstelle dessen anderen Text einfügen. In diesem Schritt werden wir sehen, wie das ins-Tag verwendet wird, um einen eingefügten Text anzuzeigen.

1. Öffnen Sie die Datei index.html in Ihrem Code-Editor.
2. Fügen Sie das HTML ins-Tag zum eingefügten Text hinzu, der den gelöschten Text ersetzt.

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>

   Im obigen Beispiel wird das Wort 'quick' als durchgestrichen angezeigt, und 'brown' wird als eingefügter Text angezeigt.

Hinzufügen von CSS-Stil zum HTML del-Tag

Der Standard-CSS-Stil für das HTML del-Tag ist ein Durchstrich. Sie können den CSS-Stil nach Ihren Anforderungen anpassen.

1. Fügen Sie den folgenden CSS-Code zu Ihrer HTML-Datei hinzu, um den Standardstil des del-Tags zu ändern.

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>

Im obigen Beispiel wurde die Farbe des del-Tags auf rot geändert.

Zusammenfassung

Das Erstellen eines durchgestrichenen Texts mit dem HTML del-Tag ist einfach. In diesem Lab haben Sie gelernt, wie Sie das HTML del-Tag verwenden, um einen durchgestrichenen Text zu erstellen, Attribute zum del-Tag hinzuzufügen, das ins-Tag zum Einfügen zu verwenden und den CSS-Stil des del-Tags zu modifizieren.