Tags in HTML sind wie Schlüsselwörter. Jedes Tag hat seine eigene Semantik (Bedeutung). Das Tag <p> steht beispielsweise für einen Absatz und das Tag <b> für Fettdruck. Abhängig vom Tag zeigt der Browser den Inhalt des Tags auf unterschiedliche Weise an.
In der tatsächlichen Entwicklung nennen wir HTML-Tags manchmal auch HTML-Elemente.
Eigentum
↓
<div class=foo>C-Sprachnetzwerk</div>
↑ ↑ ↑
Start-Tag-Inhalt, End-Tag
Zusätzlich zum Klassenattribut kann das Start-Tag auch andere Attributinformationen wie ID, Titel usw. enthalten, die wir später erläutern.
Hinweis: Obwohl in der Syntax von HTML-Tags die Groß-/Kleinschreibung nicht beachtet wird, wird aus Gründen der Standardisierung und Professionalität dringend empfohlen, bei der Definition von Tags Kleinbuchstaben zu verwenden.
(1) Tag-Semantik
Das Erlernen von Tags ist schwierig. Der Schwerpunkt liegt darauf, sich die Semantik jedes Tags zu merken. Ein einfaches Verständnis bezieht sich auf die Bedeutung des Etiketts, das heißt, wofür das Etikett verwendet wird. Entsprechend der Semantik des Etiketts. Wenn Sie die sinnvollste Bezeichnung an der richtigen Stelle anbringen, kann die Seitenstruktur klarer gestaltet werden.
(2) Titel-Tag h1-h6
Um Webseiten semantischer zu gestalten, verwenden wir häufig Titel-Tags auf Seiten. HTML bietet 6 Ebenen von Webseitentiteln, nämlich <h1> – <h6>
<h1>Ich bin ein Tag der ersten Ebene</h1>
h ist die Abkürzung des Wortes head, was Kopftitel bedeutet.
Tag-Semantik: Wird als Titel verwendet und in absteigender Reihenfolge der Wichtigkeit.
● Funktionen:
1. Der Text mit dem Titel wird fett dargestellt und auch die Schriftgröße wird der Reihe nach erhöht.
2. Ein Titel belegt eine eigene Zeile.
(3) Absatz-Tags und Zeilenumbruch-Tags
Sie möchten, dass Text in Abschnitten auf einer Webseite angezeigt wird. Das <p>-Tag wird zum Definieren von Absatzstilen verwendet.
<p>Ich bin ein Absatz-Tag</p>
p steht für Absatz, was bedeutet, dass HTML in mehrere Absätze unterteilt werden kann und die Zeilen automatisch entsprechend der Größe des Browserfensters umgebrochen werden, sodass Lücken zwischen den Absätzen entstehen.
In HIML wird der Text in einem Absatz von links nach rechts angeordnet, bis er das rechte Ende des Browserfensters erreicht, und dann automatisch umbrochen. Wenn Sie möchten, dass ein bestimmter Textabschnitt in eine neue Zeile umgebrochen wird, müssen Sie das Zeilenumbruch-Tag <br/> verwenden.
break erzwingt einen Zeilenumbruch mit kleinem Abstand zwischen einzelnen Beschriftungszeilen.
Nachrichtenfälle:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< T itle>Internationale Nachrichten</title></head><body><h1>Internationale Nachrichten</h1><h4>Die Ukraine schickte an diesem Morgen Drohnen, um Militärflughäfen in den russischen Oblasten Rjasan und Saratow anzugreifen</ h4><p> Am 5. Dezember Ortszeit gab das russische Verteidigungsministerium eine Erklärung heraus, in der es hieß, die Ukraine habe an diesem Morgen Drohnen geschickt, um Militärflughäfen in den russischen Regionen Rjasan und Saratow anzugreifen, diese seien jedoch vom russischen Luftverteidigungssystem abgefangen worden. Bei dem Angriff wurden drei russische Soldaten getötet und vier weitere verletzt. </p><p>Darüber hinaus verursachte der Absturz einer ukrainischen Drohne über einem Militärflughafen Schäden an den Körpern zweier russischer Kampfflugzeuge. Wenige Stunden später berichtete die Ukraine, dass Russland eine neue Runde von Raketenangriffen gestartet habe. </p><h4>Es ist für Russland unmöglich, die Kontrolle über das Kernkraftwerk Saporoschje abzugeben</h4><p>Die Sprecherin des russischen Außenministeriums Sacharowa sagte gegenüber der Nachrichtenagentur Sputnik, dass es für Russland unmöglich sei, die Kontrolle über Saporoschje abzugeben Kernkraftwerkssteuerung thermonuklearer Kraftwerke. </p><h4>Biden wird nicht in Erwägung ziehen, russisches Öl zur Auffüllung strategischer Ölreserven zu nutzen</h4><p>Das Weiße Haus sagte, es sei von der Reaktion Russlands auf die Preisobergrenze nicht überrascht. Biden wird nicht erwägen, russisches Öl zur Auffüllung der strategischen Erdölreserven zu verwenden. Der US-Gesandte für Energiesicherheit, Hochstein, sagte, die Vereinigten Staaten hätten immer noch genügend strategische Erdölreserven (SPR), um Notfälle zu bewältigen. Die Biden-Regierung wird am 8. Dezember ein Online-Treffen mit Führungskräften der US-Ölindustrie abhalten, um zu besprechen, wie die Energieinfrastruktur der Ukraine unterstützt werden kann. Der US-Energieminister wird am 14. mit zahlreichen Führungskräften von Ölkonzernen zusammentreffen. </p><p>C Language Network<br/>2022-12-6</p></body></html>
Wird wie folgt angezeigt:
(4) Textformatierungs-Tags
Auf Webseiten müssen Sie manchmal Fett-, Kursiv- oder Unterstreichungseffekte für Text festlegen. In diesem Fall müssen Sie Textformatierungs-Tags in HTML verwenden. Lassen Sie Text auf besondere Weise erscheinen.
Tag-Semantik: Das Hervorheben von Wichtigkeit ist wichtiger als gewöhnlicher Text.
<strong>Fett</strong><b>Fett</b><em>Kursiv</em><i>Kursiv</i><del>Durchgestrichen</del><s>Durchgestrichen</ s><ins >Unterstreichen</ins><u>Unterstreichen</u>
Unten dargestellt:
(5) div- und span-Tags
<div> und <span> haben keine Semantik. Es handelt sich lediglich um Felder, die zur Aufnahme von Inhalten verwendet werden.
Division Split Partition Spanne Spanne Spanne
● Funktionen:
Das <div>-Tag wird für das Layout verwendet, aber jetzt kann nur ein <div> in einer Zeile platziert werden. Das große Feld belegt eine Zeile.
Das <span>-Tag wird für das Layout verwendet. Es können mehrere <span>s in einer Zeile vorhanden sein.
(6) Bild-Tags und Pfade
1. Bild-Tags
In HTML-Tags wird das <img>-Tag verwendet, um Bilder in HTML-Seiten zu definieren.
<img src=imageURL />
Abkürzung für das Wort Bild. Bedeutungsbild.
src ist ein erforderliches Attribut des <img>-Tags. Es wird verwendet, um den Pfad und Dateinamen der Bilddatei anzugeben.
Die sogenannten Attribute: Ein einfaches Verständnis sind die Merkmale dieses Bild-Tags.
<imgsrc=bg.pngalt=/>
Zusätzliche Eigenschaften für Bild-Tags
Was Sie bei der Verwendung von Bild-Tags beachten sollten
(1) Bild-Tags können mehrere Attribute haben, die nach dem Tag-Namen geschrieben werden müssen.
(2) Die Attribute sind in keiner bestimmten Reihenfolge angeordnet und die Attribute sind durch Leerzeichen getrennt.
(3) Attribute haben das Format von Schlüssel-Wert-Paaren, d. h. Schlüssel = „Wert“-Format, Attribut = Attributwert“
2. Pfad
(1) Verzeichnisordner und Stammverzeichnis:
Bei der tatsächlichen Arbeit können unsere Dateien nicht zufällig abgelegt werden, da es sonst schwierig wird, sie schnell zu finden. Daher benötigen wir einen Ordner, um sie zu verwalten.
Verzeichnisordner: Es handelt sich um einen gewöhnlichen Ordner, in dem nur die relevanten Materialien gespeichert werden, die wir zum Erstellen von Seiten benötigen, z. B. HTML-Dateien, Bilder usw.
Stammverzeichnis: Die erste Ebene des geöffneten Verzeichnisordners ist das Stammverzeichnis.
(2) VSCode öffnet den Verzeichnisordner
Datei – Öffnen Sie den Ordner, um ihn später zu verwalten. Alternativ können Sie ihn auch direkt hineinziehen.
Auf der Seite befinden sich viele Bilder. Normalerweise erstellen wir einen neuen Ordner zum Speichern dieser Bilddateien (Bilder). Bei der Suche nach Bildern müssen wir den Speicherort der Bilddateien verwenden.
Pfade können unterteilt werden in:
(1) Relativer Pfad, ein Verzeichnispfad, der basierend auf dem Speicherort der referenzierten Datei erstellt wird.
(2) Der absolute Pfad bezieht sich auf die absolute Position im Verzeichnis, die direkt zum Zielort führt, normalerweise der Pfad, der mit dem Laufwerksbuchstaben beginnt.
(7) Hyperlink-Tags
1. Link-Syntaxformat
<ahref=jump target target=Popup-Methode des Zielfensters>Text oder Bild</a>
Abkürzung für das Wort Anker: Anker
Die beiden Attribute funktionieren wie folgt
2. Linkklassifizierung
(1) Externe Links, wie zum Beispiel <a href=http://www.baidu.com>baidu<a>.
(2) Interne Links, die gegenseitigen Links zwischen internen Seiten der Website, können direkt auf die internen Seitennamen verweisen, z. B. <a href=index.html>Homepage<a>.
(3) Leerer Link, wenn das Linkziel nicht bestimmt ist, <a href=#>Homepage<a>.
(4) Download-Link: Wenn die Adresse in href eine Datei oder ein komprimiertes Paket ist, wird die Datei heruntergeladen.
(5) Links zu Webseitenelementen Verschiedene Webseitenelemente auf der Webseite, wie z. B. Textbilder, Tabellen, Audio, Video usw., können mit Hyperlinks hinzugefügt werden.