Details zu verschiedenen Schriftformaten in HTML-Webseiten

Dieser Abschnitt beginnt mit den Details der Textänderung, damit die Leser die Änderungen in verschiedenen HTML-Schriftformaten verstehen und professionellere Webseiten erstellen können.
4.2 Verschiedene Textverzierungen Im vorigen Abschnitt haben wir verschiedene Einstellungen für große Absätze kennengelernt. Die Verzierung des Textes selbst scheint attraktiver zu sein. Dieser Abschnitt beginnt mit den Details der Textänderung, damit die Leser die Änderungen in verschiedenen HTML-Schriftformaten verstehen und professionellere Webseiten erstellen können.
4.2.1 Grundlegende Tags für Textstileinstellungen – 
Das grundlegende Tag zum Festlegen des Schriftstils ist und der darin enthaltene Text ist der Stilbereich. Wenn Anfänger HTML-Code schreiben, wird leicht mehrfach verschachtelt, wie zum Beispiel <font-Attribut 1=Wert 1><font-Attribut 2=Wert 2>Text. Eine andere Situation besteht darin, dass die Tags falsch verschachtelt sind, beispielsweise Text. Um das Schreiben von Code zu standardisieren und unnötige Fehler zu vermeiden, müssen die Leser beim ersten Lernen vorsichtig sein.
4.2.2 Einstellen der Textfarbe
Farbe ist eines der Attribute des Tags und wird zum Festlegen der Textfarbe verwendet. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie font_color.htm und schreiben Sie den Code wie in Code 4.7 gezeigt.
Code 4.7 Schriftfarbeneinstellung: font_color.htm
<html>
<Kopf>
<title>Schriftfarbeneinstellungen</title>
</Kopf>
<Text>
Hellroter Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelroter Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Hellgrüner Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelgrüner Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Hellblauer Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelblauer Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Hellgelber Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelgelber Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Hellcyanfarbener Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelblaugrüner Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Hellvioletter Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
Dunkelvioletter Text: Das Wesentliche beim HTML-Lernen ist, das zu verwenden, was benötigt wird 
</body>
</html>
Geben Sie http://localhost/font_color.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.7 angezeigt.

Abbildung 4.7 Festlegen der Schriftfarbe. Leser können nicht nur lernen, wie das Farbattribut im Schriftart-Tag aus Code 4.7 verwendet wird, sondern sich auch mit der Darstellung verschiedener Farben vertraut machen.
4.2.3 Textgröße einstellen
Die Größe ist auch ein Attribut des Tags , mit dem die Textgröße festgelegt wird. Der Größenwert liegt zwischen 1 und 7, der Standardwert ist 3. Wir können vor dem Größenattributwert die Zeichen „+“ oder „-“ hinzufügen, um die Erhöhung oder Verringerung der Schriftgröße relativ zum Anfangswert anzugeben. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie font_size.htm und schreiben Sie den Code wie in Code 4.8 gezeigt.
Code 4.8 Schriftgrößeneinstellung: font_size.htm
<html>
<Kopf>
<title>Schriftgrößeneinstellungen</title>
</Kopf>
<Text>
Größe ist 1: HTML-Lernen 
Größe ist 2: HTML-Lernen 
Größe ist 3: HTML-Lernen 
Größe ist 4: HTML-Lernen 
Größe ist 5: HTML-Lernen 
Größe ist 6: HTML-Lernen 
Größe ist 7: HTML-Lernen 
</body>
</html>
Geben Sie http://localhost/font_size.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.8 angezeigt.

Abbildung 4.8 Einstellen der Schriftgröße Leser können versuchen, vor dem Größenwert die Zeichen „+“ oder „-“ hinzuzufügen, um die Textgröße flexibler einzustellen.
4.2.4 Schriftart des Textes festlegen
„face“ ist auch ein Attribut des Tags , das zum Festlegen der Textschriftart (Schriftbild) verwendet wird. Die in HTML-Webseiten angezeigten Schriftarten werden vom Browsersystem aufgerufen. Um die Schriftart konsistent zu halten, wird daher empfohlen, Songti zu verwenden. HTML-Seiten verwenden standardmäßig auch Songti. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie font_face.htm und schreiben Sie den Code wie in Code 4.9 gezeigt.
Code 4.9 Schrifteinstellungen: font_face.htm
<html>
<Kopf>
<title>Schrifteinstellungen</title>
</Kopf>
<Text>
Die Schriftart ist Songti: Qinyuanchun·Changsha-Mao Zedong 
Die Schriftart ist in Kaiti: Qinyuanchun·Changsha-Mao Zedong 
Die Schrift ist fett: Qinyuanchun·Changsha-Mao Zedong 
Die Schriftart ist die offizielle Schrift: Qinyuanchun·Changsha-Mao Zedong
</body>
</html>
Geben Sie http://localhost/font_face.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.9 angezeigt.

Abbildung 4.9 Schrifteinstellungen Der Autor stellt die Textgröße der geänderten Schriftart auf 5 ein, um den Lesern die Anzeige zu erleichtern.
4.2.5 Text kursiv machen Verwenden Sie doppelte Tags , um den Text kursiv zu machen und so besondere Effekte zu erzielen, wie etwa das Datum eines Artikels. wird als Hervorhebungstag bezeichnet und ist ebenfalls kursiv. Es wird derzeit häufiger verwendet als das Tag . Seine Schreibweise ist wie folgt:
Dies ist kursiver Text
Dies ist auch kursiver Text
4.2.6 Text fett machen Verwenden Sie Doppel-Tags , um Text fett und auffälliger zu machen, beispielsweise den Titel eines Artikels. ist ein spezielles Hervorhebungs-Tag, das den Text ebenfalls fett macht. Es wird derzeit häufiger verwendet als das Tag . Seine Schreibweise ist wie folgt:
Dies ist fettgedruckter Text
Auch dies ist fettgedruckter Text
4.2.7 Text unterstreichen Verwenden Sie doppelte Tags , um den Text zu unterstreichen. Nachfolgend finden Sie eine Kombination aus Beispielen für kursiven, fetten und unterstrichenen Text. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie font_style.htm und schreiben Sie den Code wie in Code 4.10 gezeigt.
Code 4.10 Textdekorationseinstellungen: font_style.htm
<html>
<Kopf>
<title>Einstellungen für Schriftdekoration</title>
</Kopf>
<Text>
Kursiv: Qinyuanchun·Changsha-Mao Zedong 
Fett: Qinyuanchun·Changsha-Mao Zedong 
Unterstreichung: Qinyuanchun Changsha-Mao Zedong 
Kursiv, fett und unterstrichen: 沁园春·长沙-毛信毛
</body>
</html>
Geben Sie http://localhost/font_style.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.10 angezeigt.

Abbildung 4.10 Einstellungen zur Schriftartänderung Der Autor setzt die Größe des gesamten Textes innerhalb von <body></body> auf 5, um das Lesen für die Leser zu erleichtern.
— Hinweis: Wenn mehrere Tags denselben Textblock enthalten, darf die Reihenfolge der Einbindung nicht falsch sein.
4.2.8 Verwendung mehrerer Titelstile Um die Bedeutung des Titels in Webseitenartikeln hervorzuheben, ist der Titelstil relativ speziell. Die HTML-Technologie schützt eine Reihe von Stil-Tags für Titel, bei denen es sich um Doppel-Tags <h1> bis <h6> handelt. Die Textgröße von groß bis klein stellt verschiedene Titelebenen dar. Die Besonderheit des Titel-Tags besteht darin, dass es eine einzelne Zeile einnimmt, fett gedruckt ist und zentriert ist. Auf diese Weise können Sie ganz einfach den Titel festlegen und mehrere Titelebenen einrichten. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie font_h.htm und schreiben Sie den Code wie in Code 4.11 gezeigt.
Code 4.11 Titeleinstellungen: font_h.htm
<html>
<Kopf>
<title>Titeleinstellungen</title>
</Kopf>
<Text>
<h1>Titel 1</h1>
<h2>Titel 2</h2>
<h3>Titel 3</h3>
<h4>Titel 4</h4>
<h5>Titel 5</h5>
<h6>Titel Nr. 6</h6>
<h1>Fortune Magazine: Warum Google nicht scheitern wird</h1>
<h3>Auf mögliche Probleme stoßen</h3>
    Einige Branchenkenner sind der Ansicht, dass Google, das lange Zeit die Märkte für Internetsuche und -werbung monopolisiert hat, letztendlich seinen Niedergang erleben könnte. ...Gleichzeitig wurden auch viele der neuen Pläne von Google, die es in letzter Zeit gab, weitgehend in Frage gestellt. Dazu zählen etwa die Open Handset Alliance, die universelle Social-Networking-Plattform OpenSocial und die mögliche Investition von mehreren Milliarden Dollar in die Ausschreibung von Mobilfunkfrequenzen.
<h3>Wird die Suche weiterhin monopolisieren</h3>
    In einigen aktuellen Artikeln hieß es, die Leute würden Google sofort verlassen, wenn es eine bessere Suchmaschine gäbe. Doch selbst wenn eine bessere Suchmaschine auf den Markt kommt, wird Google sich noch einige Zeit behaupten können. ...in diesen Situationen kann die Site-Geschwindigkeit oft den Unterschied zwischen Sieg und Niederlage ausmachen. 
</body>
</html>
Geben Sie http://localhost/font_h.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.11 angezeigt.

Abbildung 4.11 Titeleinstellungen
4.2.9 Umgang mit Sonderzeichen in Webseiten lernen In HTML haben einige Zeichen eine besondere Bedeutung. Beispielsweise sind „<“ und ">“ die linke und rechte Klammer des Tags. Das Tag steuert die Anzeige von HTML. Das Tag selbst kann nur vom Browser analysiert und nicht auf der Seite angezeigt werden. Wie zeigen Sie also „<“ und ">" in HTML an? HTML spezifiziert die Schreibmethoden einiger Sonderzeichen, sodass sie in Webseiten angezeigt werden können, wie in Tabelle 4.1 dargestellt.
Tabelle 4.1 Sonderzeichen in HTML

Sondersymbole
Sonderzeichen im HTML-Code
HTML Code
<
<
™ (Markensymbol)
&Handel;
>
>
® (Registrierungssymbol)
®
"" (halbbreites Englisch)
"
×
&mal;
§
&Sekte;
© (Copyright-Symbol)
&Kopie;
Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie string.htm und schreiben Sie den string.htm-Code wie in Code 4.12 gezeigt.
Code 4.12 Sonderzeicheneinstellungen: string.htm
<html>
<Kopf>
<title>Sonderzeicheneinstellungen</title>
</Kopf>
<Text>
<Schriftgröße="5">
So wird das Tag angezeigt: <HTML> 
So zeigen Sie Anführungszeichen an: „Englische Anführungszeichen halber Breite“ 
So zeigen Sie das Markenzeichen an: ™ 
So zeigen Sie das Registrierungssymbol an: ® 
So zeigen Sie das Copyright-Symbol an: © 
Anzeigen § 
Anzeige&Zeiten;

</body>
</html>
Geben Sie http://localhost/string.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.12 angezeigt.

Abbildung 4.12 Sonderzeicheneinstellungen
— Hinweis: Um das Symbol & allein anzuzeigen, müssen Sie den Code & verwenden.
4.2.10 So ignorieren Sie bequemer die Analyse eines Teils des HTML durch den Browser Wenn Sie ein HTML-Codebeispiel ähnlich dem in diesem Buch in eine Webseite einfügen, müssen Sie möglicherweise alle < und > in < und > umwandeln, was ziemlich mühsam ist. Mit <plaintext> und <xmp></xmp> im HTML-Code lässt sich dieses Problem leicht lösen.
<plaintext> ist ein einzelnes Tag. Wenn es in HTML-Code eingefügt wird, werden alle darauf folgenden HTML-Tags ungültig. Das heißt, der Browser analysiert nicht alle auf <plaintext> folgenden HTML-Tags und zeigt sie direkt auf der Seite an.
<xmp></xmp> ist ein Doppeltag, der lediglich die Tags im enthaltenen Inhalt ungültig macht. <xmp></xmp> wird häufiger verwendet. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie html.htm und schreiben Sie den Code wie in Code 4.13 gezeigt.
Listing 4.13 Tag-Einstellungen ignorieren: html.htm
<html>
<Kopf>
<title>Tag-Einstellungen ignorieren</title>
</Kopf>
<Text>
<h2>Qinyuanchun·Changsha</h2>
<xmp>Einsam im kalten Herbst fließt der Xiang-Fluss nach Norden, an der Spitze von Orange Island. Schauen Sie sich die Berge an, ganz rot, und die Wälder, ganz rot gefärbt. Der Fluss ist klar und blau, und Hunderte von Booten konkurrieren um die Strömung. </xmp>
Adler schweben am Himmel, Fische schwimmen im seichten Wasser und alle Lebewesen im frostigen Himmel konkurrieren um die Freiheit. Melancholisch und trostlos frage ich die grenzenlose Erde, wer ihren Aufstieg und Fall kontrolliert? 
<Klartext>
Ich habe Hunderte von Freunden mitgenommen, um gemeinsam zu reisen und uns an die glorreichen vergangenen Jahre zu erinnern. Wir sind junge Studenten, in der Blüte unserer Jugend; Wir sind voller jugendlicher Energie und Ehrgeiz, voller Ehrgeiz und Entschlossenheit. Auf Berge und Flüsse hinweisen, inspirierende Worte schreiben. Der Marquis der Vergangenheit wurde als Abschaum angesehen. Erinnern Sie sich daran, wie Sie mitten im Strom gepaddelt sind und die Wellen das Boot am Abheben gehindert haben?
</body>
</html>
Geben Sie http://localhost/string.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.13 angezeigt.

Abbildung 4.13 Tag-Einstellungen ignorieren
4.2.11 Andere Methoden zur Textänderung Um den Anforderungen verschiedener Bereiche gerecht zu werden, verfügt HTML auch über andere Tags zur Textänderung. Am häufigsten werden diese Format-Tags für hochgestellte und tiefgestellte Zeichen verwendet. In manchen Fällen ist sogar der Löscheffekt erforderlich, d. h. Sie können das HTML-Tag „Durchstreichen“ verwenden.
— Das Format-Tag für hochgestellte Zahlen ist ein Doppel-Tag , das hauptsächlich zum Ausdrücken mathematischer Exponenten wie dem Quadrat oder der Kubikzahl einer Zahl verwendet wird.
— Das Index-Format-Tag ist ein Doppel-Tag , das hauptsächlich für Anmerkungen und die Darstellung mathematischer Grundlagen verwendet wird.
— Das Durchstreich-Tag ist ein Doppel-Tag <strike></strike>, das meist für Löscheffekte verwendet wird.
Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie other.htm und schreiben Sie den Code wie in Code 4.14 gezeigt.
Code 4.14 Einstellungen für andere Modifikator-Tags: other.htm
<html>
<Kopf>
<title>Andere Änderungs-Tag-Einstellungen</title>
</Kopf>
<Text>
<Schriftgröße="5">
Qinyuanchun Changsha! 
Mathematische Exponenten: 23=8, 1002=10000 <hr />
Qinyuanchun Changsha! 
Darstellung der mathematischen Grundlagen: log381=4, log5125=3 <hr />
Löscheffekt: <strike>Ich wurde gelöscht</strike>

</body>
</html>
Geben Sie http://localhost/other.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.14 angezeigt.

Abbildung 4.14 Einstellungen für andere Änderungs-Tags

<<: Detaillierte Erklärung der Lösung für den Absturz von Tomcat beim Doppelklicken auf startup.bat

>>: Fallstudie zum Vue-Einkaufswagen

Tutorial zur Verwendung von Prepare-, Execute- und Deallocate-Anweisungen in MySQL

Details zu verschiedenen Schriftformaten in HTML-Webseiten

Tutorial zur Verwendung von Prepare-, Execute- und Deallocate-Anweisungen in MySQL

Lösung für die Protokollpersistenzlösung des Nginx-Ingress-Controllers

MySQL-Grundlagen-Tutorial Teil 1 MySQL5.7.18 Installations- und Verbindungs-Tutorial

Drei Möglichkeiten, das längste Wort in einem String in JavaScript zu finden (empfohlen)

js native Karussell-Plugin-Produktion

Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

Wie besteht man die W3C-Validierung?

Der HTML-Seitenkopfcode ist völlig klar

mysql 5.7.11 winx64 anfängliche Passwortänderung

MySQL nutzt geschickt Summe, Groß- und Kleinschreibung und Wann, um statistische Abfragen zu optimieren

Artikel empfehlen

MySQL verwendet Binlog-Protokolle zur Implementierung der Datenwiederherstellung

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

Analyse der Implementierung der MySQL-Anweisungssperre

Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen

JavaScript imitiert den Jingdong-Karusselleffekt

Bootstrap3.0-Studiennotizentabelle bezogen auf

Wie setze ich eine Unterstreichung in HTML? So unterstreiche ich Text in HTML

display:grid in CSS3, eine Einführung in das Rasterlayout

vsCode generiert Vue-Vorlagen mit einem Klick

JavaScript generiert zufällige Grafiken durch Klicken

Eine vollständige Liste gängiger Linux-Systembefehle für Anfänger

Detaillierte Erklärung der MySQL Truncate-Verwendung

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten