IT-Kurs HTML-Grundlagen 011_Text

HTML bietet eine Vielzahl von Text-Tags, die wir bei der Erstellung von Webseiten verwenden können. Diese Tags helfen uns, unsere Textinhalte besser zu organisieren und zu formatieren. Im Folgenden sind einige häufig verwendete HTML-Text-Tags aufgeführt.

Überschriften

Überschriftenelemente werden verwendet, um Überschriften oder Unterüberschriften eines HTML-Dokuments zu definieren. Sie stellen normalerweise die hierarchische Struktur des Dokuments dar. Es gibt sechs Überschriftenebenen von h1 bis h6, wobei höhere Ebenen wichtigere Überschriften darstellen.

Beispiel:

1
<h1>Dies ist eine h1-Überschrift</h1>
2
<h2>Dies ist eine h2-Überschrift</h2>
3
...
4
<h6>Dies ist eine h6-Überschrift</h6>

Effekt:

[!Zusammenfassung]

• Bitte stellen Sie sicher, dass Überschriftenelemente nur für Überschriften verwendet werden und nicht nur für Fettdruck oder große Schriftgrößen eingesetzt werden sollten.
• Suchmaschinen verwenden Überschriften, um die Struktur und den Inhalt Ihrer Webseite zu indizieren.
• Die korrekte Verwendung von Überschriftenelementen kann die Seite lesbarer und zugänglicher machen und ist gleichzeitig vorteilhaft für SEO.
• Sie sollten h1 als einzige Hauptüberschrift (am wichtigsten) verwenden, gefolgt von h2 (zweitwichtigste), dann h3 und so weiter.

Absätze

Absatzelemente werden verwendet, um die Absatzstruktur von Text zu definieren, was den Text organisierter und lesbarer macht. Es fügt vor und nach dem Inhalt jeweils einen Zeilenumbruch hinzu und gruppiert den Text in unabhängige Abschnitte, sodass Absätze deutlich voneinander getrennt sind. Das Absatzelement besteht hauptsächlich aus dem <p>-Tag, das einen Absatz darstellt.

Beispiel:

1
<p>Dies ist ein Absatz.</p>
2
<p>Dies ist ein anderer Absatz.</p>

Effekt:

[!Zusammenfassung]

• Ein HTML-Dokument kann mehrere Absätze enthalten
• Browser fügen automatisch Leerzeilen vor und nach Absätzen hinzu
• Vergessen Sie nicht das schließende Tag (auch wenn Sie es vergessen, zeigen die meisten Browser es korrekt an)
• Wenn Sie die vom Absatzelement hinzugefügten Leerzeilen nicht mögen und den Zeilenabstand verringern möchten, verwenden Sie das <br>-Tag
• Standardmäßig wird die Anzahl der in einer Zeile angezeigten Zeichen im Absatzelement durch die Bildschirmbreite bestimmt

Hyperlinks

Das <a>-Element wird verwendet, um Hyperlinks zu definieren, sodass Benutzer auf Links klicken und zu anderen Seiten oder Ressourcen navigieren können. Das <a>-Tag enthält normalerweise Text oder Bilder, die zum anklickbaren Teil des Links werden. Gleichzeitig geben wir die Zieladresse des Links über das href-Attribut des <a>-Tags an. Hyperlinks sind eine grundlegende Funktion in HTML und können auf andere Teile einer Webseite, auf andere Webseiten oder sogar auf andere Websites verlinken.

Beispiel:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Effekt:

Hyperlink-Attribute

• href: Gibt die URL des Link-Ziels an, dies ist das wichtigste Attribut des Links. Es kann die URL einer anderen Webseite, einer Datei oder einer anderen Ressource sein.
• target (optional): Gibt an, wie der Link im Browser geöffnet wird. Häufige Werte sind _blank (Link in neuem Tab oder Fenster öffnen) und _self (Link im aktuellen Tab oder Fenster öffnen, Standardzustand).
• title (optional): Bietet Textinformationen zum Link, die normalerweise angezeigt werden, wenn die Maus über dem Link schwebt.
• rel (optional): Gibt die Beziehung zum Link-Ziel an, wie nofollow (nicht folgen), noopener (keinen neuen Kontext öffnen), noreferrer (keine Referenzinformationen weitergeben) usw.
• class: Gibt die CSS-Klasse des Links an.
• id: Gibt die CSS-ID des Links an.

Ankerlinks

Auf einer langen Webseite möchten wir möglicherweise Links zu bestimmten Abschnitten innerhalb der Seite erstellen. Dies kann durch Ankerlinks erreicht werden. Zuerst müssen wir das name- oder id-Attribut des <a>-Tags verwenden, um die Zielposition zu markieren, dann im href-Attribut des Links # plus den name- oder id-Wert des Ziels verwenden, um den Link zu erstellen.

Beispiel:

1
<a href="#a1">Zu a1 springen</a>
2
<!-- Hier werden Inhalte ausgelassen, die ausreichen, um die Seite zu scrollen, oder <br> -->
3
<a name="a1">Einige Inhalte</a>

Effekt:

Nach dem Klicken auf den Hyperlink “Zu a1 springen” springt die Seite zum Abschnitt “a1 Inhalt”.

E-Mail-Links

Neben der Verlinkung zu anderen Webseiten kann das <a>-Tag auch auf E-Mail-Adressen verlinken. Durch Hinzufügen von mailto: vor dem Wert des href-Attributs kann ein Link erstellt werden, der beim Klicken den Standard-E-Mail-Client des Benutzers startet und eine neue E-Mail erstellt.

Beispiel:

1
<a href="mailto:757118@qq.com">E-Mail senden an 757118@qq.com</a>

Effekt:

Wenn Sie auf diesen Hyperlink klicken, startet das System den Standard-E-Mail-Client und erstellt eine neue E-Mail an 757118@qq.com.

[!Zusammenfassung]

• Wenn Sie den Mauszeiger über einen Link auf einer Webseite bewegen, verwandelt sich der Pfeil in eine kleine Hand.
• Hyperlinks müssen nicht unbedingt Text sein, Bilder oder andere HTML-Elemente können ebenfalls zu Links werden.
• Standardmäßig erscheinen Links im Browser in folgender Form: Ein nicht besuchter Link wird in blauer Schrift mit Unterstreichung angezeigt. Ein besuchter Link wird in lila mit Unterstreichung angezeigt. Beim Klicken auf einen Link wird dieser in rot mit Unterstreichung angezeigt.

Zeilenumbruch

Das Zeilenumbruchelement <br> wird verwendet, um ein Zeilenumbruchzeichen in den Text einzufügen und den Text zu zwingen, in eine neue Zeile umzubrechen.

Beispiel:

1
Dies ist eine Textzeile.<br>Dies ist eine andere Textzeile.

Effekt:

[!Zusammenfassung]

• Der Schrägstrich / im <br>-Tag ist optional. In HTML 4 muss das <br />-Tag einen Schrägstrich enthalten; In HTML 5 ist der Schrägstrich optional.

Fettdruck

Das <b>-Element ist ein grundlegendes Textstil-Tag, das verwendet wird, um Text fett darzustellen, ohne jedoch die semantische Betonung des Textes zu betonen. Das <strong>-Element ist ein semantisches Tag, das verwendet wird, um die Betonung von Text auszudrücken, wobei Browser es normalerweise fett darstellen.

Beispiel:

1
Dies ist normaler Text
2
<b>Dies ist fetter Text</b>
3
<strong>Dies ist fetter Text mit semantischer Betonung</strong>

Effekt:

Kursiv

Das <i>-Element wird verwendet, um einen kursiven Texteffekt darzustellen, ohne jedoch die semantische Betonung des Textes zu betonen. Das <em>-Element wird verwendet, um kursiven Text darzustellen und wird normalerweise verwendet, um die Wichtigkeit des Textes zu betonen oder visuelle Effekte zu erzeugen.

Beispiel:

1
Dies ist normaler Text
2
<i>Dies ist ein kursiver Text</i>
3
<em>Dies ist ein kursiver Text mit semantischer Betonung</em>

Effekt:

Unterstreichung

Das Unterstreichungselement <u> wird verwendet, um unterstrichenen Text darzustellen.

Beispiel:

1
Dies ist ein Text mit <u>Unterstreichung</u>

Effekt:

[!Zusammenfassung]

• In HTML 5 wurde das Unterstreichungselement <u> verworfen. Das bedeutet, dass es immer noch ein gültiges HTML-Element ist, aber seine Verwendung wird nicht empfohlen.

Durchstreichung

Das Durchstreichungselement <del> wird verwendet, um Text anzuzeigen, der gelöscht oder veraltet ist. Browser fügen normalerweise eine horizontale Linie durch diesen Text hinzu.

Beispiel:

1
Dies ist ein Text mit <del>Durchstreichung</del>

Effekt:

[!Zusammenfassung]

• In HTML5 wurde das Durchstreichungselement <del> verworfen. Das bedeutet, dass es immer noch ein gültiges HTML-Element ist, aber seine Verwendung wird nicht empfohlen.

Hervorhebung

Das <mark>-Element wird verwendet, um einen Teil des Textes zu markieren, um diesen Teil hervorzuheben oder zu kennzeichnen. Normalerweise wird der vom <mark>-Element markierte Text mit einem gelben Hintergrund hervorgehoben, um ihn im Dokument auffälliger zu machen.

Beispiel:

1
Dies ist ein <mark>hervorgehobener</mark> Text

Effekt:

Tiefgestellt und Hochgestellt

Das <sub>-Element stellt tiefgestellten Text dar (subscript), das <sup>-Element stellt hochgestellten Text dar (superscript). Tiefgestellte und hochgestellte Elemente werden normalerweise in Mathematik, chemischen Formeln, Daten, Temperaturen und anderen Szenarien verwendet.

Beispiel:

1
H<sub>2</sub>O ist die Summenformel von Wasser.
2
2<sup>10</sup> ist gleich 1024.

Effekt: