Hervorgehobener Text mit Mark-Tag

Einführung

Im HTML wird das -Tag verwendet, um einen Textabschnitt hervorzuheben oder zu markieren, um die Wichtigkeit des Textes zu zeigen. In diesem Lab werden wir lernen, wie das -Tag verwendet wird, um hervorgehobenen 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.

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.

Stellen Sie die HTML-Datei ein

Beginnen Sie mit der Erstellung einer index.html-Datei und dem Einrichten der grundlegenden Struktur der HTML-Datei. Fügen Sie den folgenden Code ein:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

Fügen Sie Text zum Markup hinzu

Zwischen den <body>-Tags fügen Sie etwas Text hinzu. In diesem Beispiel werden wir den Text "Brown fox" innerhalb eines Satzes hervorheben.

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

Fügen Sie einen CSS-Stil hinzu, um die Standardfarbe zu ändern

Standardmäßig hat der hervorgehobene Text eine gelbe Hintergrundfarbe und eine schwarze Textfarbe. Sie können diese Farben ändern, indem Sie CSS zum -Tag hinzufügen. Beispielsweise um die hervorgehobene Hintergrundfarbe in rot und die Textfarbe in weiß zu ändern, fügen Sie den folgenden CSS-Stil hinzu:

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

Optional): Fügen Sie einen Klassenselektor für die Gestaltung hinzu

Wenn Sie auf einer Seite mehrere Instanzen von hervorgehobenen Texten haben und Sie möchten, dass sie alle auf die gleiche Weise formatiert werden, können Sie einer -Tag eine Klasse hinzufügen und einen CSS-Klassenselektor hinzufügen. Im folgenden Beispiel werden wir der -Tag eine Klasse namens highlight hinzufügen und dann mit CSS formatiert.

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

Zusammenfassung

Das war's! Sie haben gelernt, wie Sie in HTML hervorgehobenen Text mit dem -Tag erstellen. Indem Sie den -Tag und einige CSS-Stile verwenden, können Sie Ihren Lesern leicht die Aufmerksamkeit auf wichtige Teile Ihres Textes lenken.

HTML hervorgehobener Text