Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

2.1 Semantisierung sorgt dafür, dass Ihre Webseiten von Suchmaschinen besser verstanden werden

In diesem Kapitel werden wir nacheinander die in Webseiten häufig verwendeten Tags vorstellen. Beim Studium dieses Kapitels müssen Sie bedenken, dass Sie beim Erlernen von HTML-Tags auf zwei Aspekte achten sollten: den Zweck des Tags und den Standardstil des Tags im Browser.

Was ist Semantik? Einfach ausgedrückt bedeutet es, den Zweck jedes Tags zu verstehen (unter welchen Umständen es sinnvoll ist, dieses Tag zu verwenden). Beispielsweise kann der Titel eines Artikels auf einer Webseite mit einem Titel-Tag geschrieben werden, und die Namen verschiedener Spalten auf einer Webseite können ebenfalls mit einem Titel-Tag geschrieben werden. Die Inhaltsabsätze des Artikels müssen in Absatz-Tags platziert werden. Wenn der Artikel Text enthält, den Sie hervorheben möchten, können Sie das em-Tag verwenden, um Hervorhebungen usw. anzuzeigen.

2.2 Body-Tag, hier wird der Anzeigeinhalt der Webseite platziert

Im Body-Tag muss der Seiteninhalt platziert werden, der auf der Webseite angezeigt werden soll. Die folgende Abbildung ist eine Webseite eines Nachrichtenartikels.

這里寫圖片描述


Der Browsereffekt ist wie folgt:

這里寫圖片描述

2.3 p-Tag, Absatz hinzufügen

Wenn Sie einen Artikel auf einer Webseite anzeigen möchten, benötigen Sie das <p> -Tag und müssen die Absätze des Artikels in das <p> -Tag einfügen.

Syntax: <p>段落文本</p> Beachten Sie, dass es für jeden Textabsatz ein Tag gibt. Wenn ein Nachrichtenartikel beispielsweise drei Textabsätze enthält, sollten diese drei Absätze jeweils in drei <p> -Tags platziert werden. Wie in der folgenden Abbildung dargestellt:

這里寫圖片描述


Der Anzeigeeffekt des Browsers ist wie folgt:

這里寫圖片描述

Der Standardstil des <p>-Tags ist in der Abbildung oben zu sehen. Vor und nach dem Absatz befinden sich Leerzeichen. Wenn Ihnen dieses Leerzeichen nicht gefällt, können Sie es mithilfe des CSS-Stils löschen oder ändern. Absatzvalidierungscode:

 XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  <Kopf>​​            
  4.  < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5.  <Titel> p - Tag </Titel>​​        
  6.  </ Kopf >        
  7.  < Textkörper >            
  8.  < h2 > Absatzvalidierung </ h2 >            
  9.  < p > Mein erster Absatz. </ p >            
  10.  < p > Mein zweiter Absatz. </ p >        
  11.  </ Körper >   
  12.  </ html >   

2.4 hx-Tag, Titel hinzufügen

Es gibt insgesamt 6 Titel-Tags, h1, h2, h3, h4, h5 und h6 sind jeweils die Titel der ersten, zweiten, dritten, vierten, fünften und sechsten Ebene. Und zwar in absteigender Reihenfolge der Wichtigkeit. <h1> ist die höchste Ebene.

Syntax: <hx>標題文本</hx> (x為1-6)

Wie bereits erwähnt, können Titel-Tags für den Titel des Artikels verwendet werden. Diese können auch für die Titel verschiedener Spalten auf der Webseite verwendet werden. Die folgende Abbildung zeigt die Tencent-Website:

這里寫圖片描述

Hinweis: Da das h1-Tag auf einer Webseite wichtiger ist, wird es normalerweise für den Websitenamen verwendet. Dies ist, was die Tencent-Website macht. Beispiel: <h1>騰訊網</h1> Der Standardstil der h1-h6-Tags ist:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >   
  2. < h1 > Titel der ersten Ebene </ h1 >   
  3. < h2 > Zweittitel </ h2 >   
  4. < h3 > Überschrift der Ebene 3 </ h3 >   
  5. < h4 > Überschrift der Ebene 4 </ h4 >   
  6. < h5 > Überschrift der Ebene 5 </ h5 >   
  7.      < h6 > Überschrift der Ebene 6 </ h6 >   
  8. </ Körper >   

Anzeigestile im Browser:

這里寫圖片描述

Im obigen Bild können wir erkennen, dass die Stile der Titel-Tags alle fett sind, das h1-Tag die größte Schriftgröße hat, das h2-Tag eine kleinere Schriftgröße als h1 usw. und das h6-Tag die kleinste Schriftgröße hat.

2.5 strong/em verleiht Nachdruck

Wenn wir nun über Absätze und Titel verfügen und bestimmte Wörter in einem Absatz hervorheben möchten, können wir <em>或<strong> verwenden.

Zwischen beiden besteht ein Unterschied im Ton der Betonung: <em> zeigt eine Betonung an, während <strong> eine stärkere Betonung anzeigt. Und im Browser wird <em> standardmäßig kursiv und <strong> standardmäßig fett gedruckt. Im Vergleich zu den beiden Tags verwenden inländische Frontend-Programmierer derzeit lieber <strong> , um Hervorhebungen auszudrücken.

Grammatik:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <em> Hervorzuhebender Text </em>​​      
  2. < strong > Hervorzuhebender Text </ strong >   

Beispiele für „em“- und „strong“-Tags:

這里寫圖片描述


Im Browser wird es folgendermaßen angezeigt:

這里寫圖片描述

Der Inhalt von <em> wird beim Browsen kursiv und <strong> fett angezeigt. Wenn Ihnen dieser Stil nicht gefällt, ist das nicht schlimm. Sie können ihn später mit dem CSS-Stil ändern.

2.6 style/span-Tag, legen Sie einen separaten Stil für den Text fest

Fassen wir die drei Tags <em>、<strong>、<span> zusammen:

<em> und <strong> werden verwendet, um Schlüsselwörter in einem Absatz hervorzuheben. Ihre Bedeutung ist die Hervorhebung.

Der <span> -Tag hat keine Semantik und wird zum Festlegen individueller Stile verwendet.

Wenn wir nun die drei Wörter „American Dream“ im ersten Absatz des vorigen Abschnitts blau markieren möchten, beachten Sie jedoch, dass dies nicht dazu dient, „American Dream“ hervorzuheben, sondern nur einen anderen Stil dafür als für den übrigen Text festzulegen (und wir möchten nicht, dass der Screenreader die drei Wörter „American Dream“ hervorhebt), können wir in diesem Fall das Tag <span> verwenden.

Grammatik:

 <span>文本</span>

Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < Titel > Der große Gatsby </ Titel >   
  6.          < Stil >   
  7. Spanne{
  8. Farbe: blau;
  9. }
  10.          </ Stil >   
  11.      </ Kopf >   
  12.      < Textkörper >   
  13.          < p > < span > Amerikanischer Traum </ span > . </ p >   
  14.          < p > < strong > Fitzgerald </ strong > </ p >   
  15.          < p > < em > Alice </ em > </ p >   
  16.      </ Körper >   
  17. </ html >   

Im Browser angezeigt als:

這里寫圖片描述


Diejenigen mit „span“ werden blau, diejenigen mit dem Tag „strong“ werden fett und diejenigen mit dem Tag „em“ werden kursiv.

2.7 q-Tag, kurzes Textzitat

Möchten Sie Ihrem HTML ein Zitat hinzufügen? Wenn Sie beispielsweise in einem Artikel auf Ihrer Webseite ein Gedicht eines bestimmten Autors zitieren möchten, um Ihren Artikel hervorzuheben, benötigen Sie Tags. Grammatik:

 <q>引用文本</q>

Beachten Sie, dass Sie den zitierten Text nicht in Anführungszeichen setzen müssen. Der Browser setzt automatisch doppelte Anführungszeichen um das q-Tag.

Beachten Sie , dass der wirklich entscheidende Punkt bei der Verwendung des Tags hier nicht sein Standardstil der Anführungszeichen ist (wenn dies der Fall wäre, könnten wir genauso gut Anführungszeichen auf der Tastatur eingeben), sondern seine Semantik: das Zitieren der Worte einer anderen Person.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          <Titel> q - Tag </Titel>​​   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          < p > Zhou Yu verdient tatsächlich das Sprichwort < q >: „ Ein Mann mit außergewöhnlicher Intelligenz ist ein Held, und ein Mann mit außergewöhnlichem Mut ist ein Held.“ </ q > </ p >   
  9.      </ Körper >   
  10. </ html >   
  11.   

Im Code sind keine Anführungszeichen vorhanden, da es sich aber um ein <q> -Tag handelt, werden automatisch Anführungszeichen hinzugefügt.

2.8 Blockquote-Tag, langes Textzitat

Die Funktion von <blockquote> besteht auch darin, Texte anderer Personen zu zitieren. Es handelt sich jedoch um einen Verweis auf einen langen Text, beispielsweise um die Einführung einer langen Textpassage eines bekannten Autors in einen Artikel. In diesem Fall wird dieses Tag benötigt.

Das Tag <q> wird verwendet, um einen kurzen Text zu zitieren. Beispielsweise wird das Tag <q> verwendet, um einen Satz zu zitieren.

Syntax: <blockquote>引用文本</blockquote>

Der Browser interpretiert das Tag <blockquote> als eingerückten Stil.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. <Kopf>​​            
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5. < title > Verwendung des Blockquote - Tags </title>        
  6. </ Kopf >        
  7. < Textkörper >            
  8. < h2 > Mein Herz ist wie der blühende Osmanthus </ h2 >            
  9. < p > Jeder ist mit dem beschäftigt, was er für das Wichtigste hält, schafft es aber nicht, den Spaß am Leben zu genießen und muss stattdessen die bitteren Früchte schlucken? </ p >            
  10. < blockquote > Die Farbe ist matt und hellgelb, der Körper ist weich, die Gefühle sind weit weg und nur der Duft bleibt. </ blockquote >            
  11. < blockquote > Warum soll es die hellgrüne oder tiefrote Farbe sein? Sie ist die schönste aller Blumen. </ blockquote >            
  12. < p > Dies ist eine Zeile aus Li Qingzhaos Ode an die Osmanthus. Nach Li Qingzhaos Meinung ist die Osmanthus von matter grüner und gelber Farbe, sanft im Temperament, gleichgültig und selbstzufrieden und weitaus lobenswerter als diese leuchtend roten und violetten Blumen. </ p >        
  13. </ Körper >   
  14. </ html >   

Der Anzeigeeffekt im Browser ist wie folgt. Sie können sehen, dass der vom Tag <blockquote> umgebene Teil davor und danach eingerückt ist:

這里寫圖片描述

2.9 br-Tag zeigt Text in separaten Zeilen an

Wie kann ich nach jeder Gedichtzeile einen Zeilenumbruch einfügen? Dann können Sie das Tag <br /> verwenden. Fügen Sie <br />，<br /> entspricht dem Wagenrücklauf in einem Word-Dokument.

Grammatik:
xhtml1.0-Schreibmethode: <br />
HTML4.01-Schreibmethode: <br>

Im Gegensatz zu den Tags, die wir zuvor kennengelernt haben, ist das <br /> -Tag ein leeres Tag. Ein Tag ohne HTML-Inhalt ist ein leeres Tag. Ein leeres Tag muss nur ein öffnendes Tag enthalten. Zu solchen Tags gehören <br />、<hr />和<img /> .

Zusammenfassung: Die Eingabe von Wagenrückläufen und Leerzeichen im HTML-Code hat keine Auswirkung. Wenn Sie in einem HTML-Text einen Wagenrücklauf und einen Zeilenvorschub einfügen möchten, müssen Sie <br /> eingeben.

 XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  <Kopf>​​            
  4.  < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5.  < title > Verwendung des br-Tags </ title >        
  6.  </ Kopf >        
  7.  < Textkörper >            
  8.  < h2 > Ode an Osmanthus fragrans </ h2 >            
  9.  < p >                
  10.  Dunkel hellgelb weich, < br >                
  11.  Die Liebe ist weit weg, aber der Duft bleibt. < br >                
  12.  Warum hellgrün oder tiefrot ,                
  13.  Es ist die schönste aller Blumen.
  14.  </ p >        
  15.  </ Körper >   
  16.  </ html >     
 Browser-Effekt: 
這里寫圖片描述

2.10 Fügen Sie der Webseite einige Leerzeichen hinzu

Es wurde erklärt, dass die Eingabe von Leerzeichen und Zeilenumbrüchen im HTML-Code keine Auswirkungen hat. Um ein Leerzeichen einzugeben, müssen Sie schreiben

Syntax: &nbsp;

Fügen Sie wie folgt zwei Leerzeichen ein:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < Titel > Raumerklärung </ Titel >   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          < h1 > Träume verwirklichen </ h1 >   
  9. Quelle: Composition Network Autor: Fly for the Dream
  10.      </ Körper >   
  11. </ html >   
  12.   

2.11 Stundenbeschriftung, horizontale Linie hinzufügen

Beim Anzeigen von Informationen müssen Sie manchmal zur Trennung einige horizontale Linien hinzufügen, damit der Artikel übersichtlicher aussieht. Beispielsweise die folgende Webseite

Grammatik:

html4.01 Version <hr>
xhtml1.0-Version <hr />

Auch der < hr /> Tag ist wie der <br /> -Tag ein leerer Tag, es gibt also nur einen Start-Tag und keinen End-Tag.

Der Standardstil des <hr /> Tags im Browser ist dicker und grau. Manche Leute finden diesen Stil vielleicht unansehnlich, aber das ist nicht schlimm. Diese externen Stile können geändert werden, nachdem wir CSS-Stylesheets gelernt haben.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. <Kopf>​​            
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5. <Titel> HR - Tag - Verwendung </Titel>        
  6. </ Kopf >        
  7. < Textkörper >            
  8. < p > In der dunklen Nacht rast der Zug durch das Dorf. Das Mondlicht weckt bei den Menschen immer wieder Einsamkeit und Sehnsucht. </ p >            
  9. < hr >            
  10. < p > Jede Pusteblume, die vom Wind verweht wird, ist erfüllt vom liebevollen Abschied eines Augenpaars und der Zurückhaltung eines Blickes. </ p >        
  11. </ Körper >   
  12. </ html >   

Wirkung im Browser:

這里寫圖片描述

2.12 Adress-Tag: Fügen Sie der Webseite Adressinformationen hinzu

Im Allgemeinen gibt es auf der Webseite einige Kontaktadressinformationen, die auf der Webseite angezeigt werden müssen. Diese Kontaktadressinformationen, beispielsweise die Firmenadresse, können gekennzeichnet werden. Auch die Angabe einer Adresse (zum Beispiel einer E-Mail-Adresse), einer Signatur oder der Urheberschaft eines Dokuments ist möglich.

Grammatik:
 <address>聯系地址信息</address>
 <address> 本文的作者：<a href="mailto:[email protected]">lilian</a> </address>
Der im Browser angezeigte Stil ist kursiv. Wenn Sie Kursivschrift nicht mögen, können Sie in den folgenden Kursen natürlich CSS-Stile verwenden, um den Standardstil des Tags <address> zu ändern.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. <Kopf>​​            
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5. < title > Einführung in das Adress-Tag </ title >        
  6. </ Kopf >        
  7. < Textkörper >            
  8. < h2 > MOOC.com </ h2 >            
  9. < p > Super coole kostenlose Lernplattform für Internet- und IT-Technologie! Firmenadresse: < address > Nr. 10 Dewai Street, Bezirk Xicheng, Peking </ address > </ p >         
  10. </ Körper >   
  11. </ html >   

2.13 Code-Tag, Codezeile hinzufügen

Auf Websites, die Sprachtechnologie einführen, ist es unvermeidlich, einige Computerprogrammiercodes auf der Webseite anzuzeigen. Wenn der Code eine Zeile lang ist, können Sie das Tag <code> verwenden. Hinweis: Wenn Sie mehrere Codezeilen in einen Artikel einfügen möchten, können Sie das Tag <code> nicht verwenden. Wie im folgenden Beispiel:

 <code>var i=i+300;</code>
Hinweis: Wenn es sich um mehrere Codezeilen handelt, können Sie das Tag <pre> verwenden.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. <Kopf>​​            
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >            
  5. < title > Code -Tag - Einführung </title>        
  6. </ Kopf >        
  7. < Textkörper >            
  8. < p > Wir kennen vielleicht die Implementierung eines horizontalen Farbverlaufs, die dieser ähnelt: < code > {background-image:linear-gradient(left, red 100px, yellow 200px);} </ code > </ p >        
  9. </ Körper >   
  10. </ html >   

Browser-Effekt:

這里寫圖片描述

2.14 Pre-Tag, großen Code hinzufügen

Im vorherigen Abschnitt haben wir vorgestellt, dass das Tag zum Hinzufügen einer Codezeile <code> ist, aber in den meisten Fällen müssen Sie einen großen Codeabschnitt hinzufügen, wie in der folgenden Abbildung gezeigt. Was sollten Sie tun? Es ist nicht notwendig, jedem Code ein <code> -Tag hinzuzufügen. Es ist nicht so kompliziert. Sie können an dieser Stelle das <pre> -Tag verwenden:

這里寫圖片描述

Die Hauptfunktion des <pre> -Tags: vorformatierter Text. In einem Pre-Element eingeschlossener Text behält normalerweise Leerzeichen und Zeilenumbrüche bei. Hinweis: Das <pre> -Tag wird nicht nur zum Anzeigen von Computerquellcode verwendet, sondern kann auch verwendet werden, wenn Sie das Format auf einer Webseite vorab anzeigen müssen. Eine häufige Anwendung des <pre> -Tags ist jedoch die Anzeige von Computerquellcode.

 XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  <Kopf>​​            
  4.  < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8"   />            
  5.  < title > Verwendung des Pre-Tags </ title >        
  6.  </ Kopf >        
  7.  < Textkörper >            
  8.  < pre > var message = "Willkommen" ;for(var i = 1 ;i < =10;i++){ alert(message);}
  9.  </ vor >        
  10.  </ Körper >   
  11.  < /html >   

Browser-Effekt:

這里寫圖片描述

Im obigen Beispiel können Sie sehen, dass Leerzeichen und Zeilenumbrüche im Code erhalten bleiben. Wenn Sie die vorherige Methode verwenden, müssen Sie <br> Zeichen für die Rückgabe und ein Leerzeichen für das &nbsp eingeben.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  js native Karussell-Plugin-Produktion

>>:  Detaillierte Erklärung zum manuellen Bereitstellen einer Remote-MySQL-Datenbank unter Linux

Artikel empfehlen

So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Originalcode: center.html : <!DOCTYPE html>...

So verwenden Sie CocosCreator zur Tonverarbeitung bei der Spieleentwicklung

Inhaltsverzeichnis 1. Grundlagen der Audiowiederg...

Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung

Im vorherigen Artikel zu Docker wurde die Konstru...

Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware

Als technischer Neuling zeichne ich den Vorgang d...

Redo-Dateiwartungsmethode der InnoDB-Engine

Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Beim Erlernen von CSS3 geht es mehr darum, sich m...

Detaillierte Erläuterung des Prozesses, mit dem Nginx die echte Quell-IP erhält, nachdem mehrere Proxy-Ebenen durchlaufen wurden

Frage Nginx nimmt $remote_addr als echte IP-Adres...

Beispiel für die Verwendung von @media responsive CSS zur Anpassung an verschiedene Bildschirme

Definition und Verwendung Mithilfe von @media-Abf...

Beispiel für die Implementierung der Graphql-Schnittstelle in Vue

Hinweis: In diesem Artikel geht es um die grundle...

Einführung in MySQL-Anweisungskommentare

MySQL unterstützt drei Arten von Kommentaren: 1. ...

Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite

Inhaltsverzeichnis Technologie-Stack Wirkung anal...

Vue realisiert den Logistik-Timeline-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

So installieren Sie mysql8.0.23 unter Win10 und lösen das Problem „Der Dienst reagiert nicht auf die Steuerfunktion“

Installieren Sie MySQL unter Win10 1. Laden Sie M...

Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)

Das CSS-Positionsattribut gibt den Positionierung...

vue+element-ui implementiert die Kopfnavigationsleistenkomponente

In diesem Artikel wird der spezifische Code von v...