Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

1. Das WEB verstehen

Webseiten bestehen hauptsächlich aus Elementen wie Text, Bildern und Hyperlinks. Natürlich können Webseiten neben diesen Elementen auch Audio, Video und Flash enthalten.

Der Browser ist die Plattform zum Anzeigen und Ausführen von Webseiten.

Browserkernel (Satz-Engine, Interpretations-Engine, Rendering-Engine)

Verantwortlich für das Lesen von Webseiteninhalten, das Organisieren von Informationen, das Berechnen der Anzeige der Webseite und das Anzeigen der Seite.

Browser Kernel Bemerkung
IE Dreizack IE, Cheetah Security, 360 Speed ​​Browser, Baidu Browser
Feuerfuchs Gecko Leider hat es in den letzten Jahren nachgelassen. Es öffnet sich langsam, muss häufig aktualisiert werden, hat einen schweineartigen Teamkollegen namens Flash und einen gottgleichen Gegner namens Chrome.
Safari Webkit Viele Leute bezeichnen WebKit fälschlicherweise als Chrome-Kernel (obwohl der Chrome-Kernel bereits Blink ist). Apple hatte das Gefühl, seine Frau sei ihm von jemand anderem weggeschnappt worden und fiel sogar weinend auf der Toilette in Ohnmacht.
Chrom Chromium/Blink Die Blink-Rendering-Engine (also der Browserkern) wurde im Chromium-Projekt entwickelt und in den Chrome-Browser integriert. Blink ist eigentlich ein Zweig von WebKit. Die neuesten Versionen der meisten inländischen Browser verwenden den Blink-Kernel. Sekundärentwicklung
Oper blinken Folgen Sie nun Chrome, um den Blink-Kernel zu verwenden.

Webstandards

„Zusammensetzung“ 👉 Strukturelle Standards, Leistungsstandards und Verhaltensstandards

  • Strukturelle Standards für die Organisation und Kategorisierung von Elementen auf einer Webseite (HTML)
  • Präsentationsstandards werden verwendet, um das Layout, die Farbe, die Größe und andere Darstellungsattribute von Webseitenelementen festzulegen (CSS).
  • Verhaltensstandards werden verwendet, um Webseitenmodelle zu definieren und Interaktionen zu schreiben (JavaScript).

„Vorteile von Webstandards“👇

  • Einfach zu warten: Sie können den Stil der gesamten Site ändern, indem Sie einfach die CSS-Datei ändern
  • Schnelle Seitenreaktion: Die Größe des HTML-Dokuments wird reduziert und die Reaktionszeit ist kurz
  • Zugänglichkeit: In semantischem HTML geschriebene Webseiten (HTML mit getrennter Struktur und Präsentation) können von Bildschirmleseprogrammen leichter erkannt werden.
  • Gerätekompatibilität: Unterschiedliche Stylesheets können dazu führen, dass Webseiten auf verschiedenen Geräten unterschiedlich aussehen.
  • Suchmaschinen: Semantisches HTML kann von Suchmaschinen leichter analysiert werden und das Ranking verbessern

2. Einführung in HTML

HTML (Hypertext Markup Language): Hypertext-Auszeichnungssprache

Der sogenannte Hypertext hat zwei Bedeutungen:

  • Weil es Bilder, Sounds, Animationen, Multimedia und andere Inhalte (über die Textgrenze hinaus) hinzufügen kann
  • Darüber hinaus ist es möglich, von einer Datei zur anderen zu springen und Verbindungen (durch Hyperlinks zu Text) mit Dateien herzustellen, die irgendwo auf der Welt gehostet werden.

„HTML-Skelettformat“

<!-- Das größte Stamm-Tag auf der Seite -->
<html>
    <!-- Header-Tag -->
    <Kopf>     
        <!-- Titel-Tag -->
        <Titel></Titel> 
    </Kopf>
    <!-- Hauptteil des Dokuments -->
    <Text>
    </body>
</html>

Vom Team vereinbarte Kapitalisierung

HTML-Tagnamen, Klassennamen, Tag-Attribute und die meisten Attributwerte sind alle in Kleinbuchstaben

Klassifizierung von HTML-Element-Tags

  • Normale Elemente (Doppel-Tags)
  • Leeres Element (einzelnes Tag)
 Normale Elemente (Doppel-Tags)
  <Tagname> Inhalt</Tagname> Zum Beispiel <body> Ich bin Text</body>
  Leeres Element (einzelnes Tag)
  <Tag-Name/> Zum Beispiel<br /> oder<br>

HTML-Tag-Beziehungen

  • Verschachtelte Beziehung Eltern-Kind-Inklusionsbeziehung
  • Parallele Beziehung Parallele Beziehung auf Bruderebene
  • Wenn die Beziehung zwischen zwei Tags eine verschachtelte Beziehung ist, wird das untergeordnete Element am besten um die Position einer Tabulatortaste eingerückt (ein Tabulator hat 4 Leerzeichen). Handelt es sich um eine parallele Beziehung, ist es am besten, sie vertikal auszurichten.

Dokumenttyp <!DOCTYPE>

Der Dokumenttyp wird verwendet, um anzugeben, welche Version von XHTML oder HTML Sie verwenden. Weist den Browser an, die Seite entsprechend dem HTML5-Standard zu analysieren.

Seitensprache lang

Lang gibt die Sprache an, die vom Inhalt des HTML-Tags verwendet wird

 <html lang="de">  
  en definiert die Sprache als Englisch zh-CN definiert die Sprache als Chinesisch

Die Rolle von lang

1. Legen Sie den CSS-Stil oder die Schriftart verschiedener Sprachen entsprechend dem Lang-Attribut fest

2. Fordern Sie die Suchmaschine auf, eine genaue Identifizierung vorzunehmen

3. Lassen Sie die Grammatikprüfung die Sprachenerkennung durchführen

4. Helfen Sie Übersetzungstools dabei,

5. Helfen Sie Webseiten-Lesern, zu erkennen

Zeichensatz

Ein Zeichensatz ist eine Sammlung mehrerer Zeichen. Damit ein Computer Text in verschiedenen Zeichensätzen korrekt verarbeiten kann, ist eine Zeichenkodierung erforderlich, damit der Computer verschiedene Texte erkennen und speichern kann.

  • UTF-8 ist die am häufigsten verwendete Zeichensatzkodierungsmethode.
  • Die HTML-Datei wird in der Kodierung UTF-8 gespeichert und der Browser dekodiert den entsprechenden HTML-Inhalt entsprechend der Kodierung.
  <meta charset="UTF-8" />

Verwendung des Meta-Viewports

Normalerweise bezieht sich „Ansichtsfenster“ auf das Fenster oder Ansichtsfenster. Der Bereich in einem Browser (oder möglicherweise einer Webansicht in einer App), der zum Anzeigen einer Webseite verwendet wird. Die Ansichtsfenster auf Mobilgeräten und PCs sind unterschiedlich. Das Ansichtsfenster auf dem PC ist der Browserfensterbereich, während es auf Mobilgeräten drei verschiedene Ansichtsfensterkonzepte gibt: Layout-Ansichtsfenster, visuelles Ansichtsfenster und ideales Ansichtsfenster.

Meta hat zwei Attribute: Name und http-equiv

Der Wert des Namensattributs

  • Schlüsselwörter (Keywords) teilen Suchmaschinen die Schlüsselwörter der Webseite mit
  • Die Beschreibung (Beschreibung des Website-Inhalts) wird verwendet, um Suchmaschinen den Hauptinhalt Ihrer Website mitzuteilen.
  • Ansichtsfenster (Fenster des mobilen Endgeräts)
  • Robots (definiert die Indizierungsmethode von Suchmaschinen-Crawlern) Robots werden verwendet, um Crawlern mitzuteilen, welche Seiten indexiert werden müssen und welche nicht.
  • Autor
  • Generator (Software zur Erstellung von Webseiten)
  • Copyright

http-equiv hat die folgenden Parameter

http-equiv entspricht dem Dateiheader von http. Es kann dem Browser einige nützliche Informationen zurückgeben, um den Inhalt der Webseite korrekt und genau anzuzeigen.

content-Type Legen Sie den Zeichensatz der Webseite fest (Verwendung von HTML4, nicht empfohlen).

Expires(期限) , mit dem die Ablaufzeit einer Webseite festgelegt werden kann. Wenn eine Webseite abläuft, muss sie erneut an den Server übertragen werden.

Pragma(cache模式) , verwendet, um den Browser so einzustellen, dass der Seiteninhalt nicht aus dem Cache des lokalen Computers abgerufen werden kann. Sobald dies eingestellt ist, kann der Inhalt nicht mehr aus dem Cache abgerufen werden, wenn Sie die Webseite verlassen.

Refresh(刷新) , automatisch aktualisieren und auf die neue Seite verweisen.

cache-control Caching-Mechanismus, gefolgt von Anfragen und Antworten)

	<meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

Semantisierung von HTML-Tags

  • Dies erleichtert das Lesen und Verwalten des Codes und kann dazu beitragen, dass die Seite eine klare Struktur aufweist, wenn der Stil verloren geht.
  • Dies ist für die SEO von Vorteil, da Suchmaschinen Tags verwenden, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen.
  • Erleichtert die Analyse durch andere Geräte, z. B. durch blinde Leser, die Webseiten auf der Grundlage der Semantik rendern

"Erweitert"-Tag : Gibt die Standard-URL für alle Links auf der Seite an und legt den Öffnungsstatus des gesamten Links fest.

<Kopf>
    <base href="http://www.baidu.com" target="_blank">
    <Basisziel="_self">
</Kopf>
<Text>
    <a href="">Test</a> Zu Baidu springen</body>

3. Allgemeine HTML-Tags

1. Layout-Tags : Werden hauptsächlich mit CSS verwendet. Tags, die die Struktur einer Webseite anzeigen. Dies sind die am häufigsten verwendeten Tags für das Webseiten-Layout.

  • Titel-Tag h (h1~h6)
  • Der Absatz-Tag p kann das HTML-Dokument in mehrere Absätze unterteilen
  • Horizontale Linienbeschriftung hr
  • Zeilenumbruch-Tag br
  • Div- und Span-Tags: haben keine Semantik und sind die beiden wichtigsten Felder in unserem Webseiten-Layout.

2. Typografie-Tags

  • b und strong Text wird fett dargestellt
  • i und em machen den Text kursiv
  • s und del` Der Text wird durchgestrichen angezeigt
  • u und ins Text sind unterstrichen

3. Tag-Attribute (inline)

Wenn Sie HTML zum Erstellen von Webseiten verwenden und die HTML-Tags weitere Informationen bereitstellen sollen, können Sie diese mithilfe der Attribute der HTML-Tags festlegen.

<Tagname Attribut 1 = "Attributwert 1" Attribut 2 = "Attributwert 2" ...> Inhalt </Tagname><Mobiltelefon Farbe = "rot" Größe = "5 Zoll"> </Mobiltelefon>

4. Bild-Tag img

Bildbeschreibung hier einfügen

Beachten:

  • Tags können mehrere Attribute haben, die im Start-Tag nach dem Tag-Namen geschrieben werden müssen.
  • Es gibt keine bestimmte Reihenfolge zwischen Attributen. Tag-Namen und Attribute sowie Attribute werden durch Leerzeichen getrennt.
  • Nehmen Sie das Format des Schlüssel-Wert-Paares Schlüssel=“Wert“ an.
<img src="cz.jpg" width="300" height="300" border="3" title="Das ist ein kleiner Löwenzahn" />

5. Link-Tags (wichtig)

<a href="Sprungziel" target="Zielfenster-Popup-Methode">Text oder Bild</a>
target="_self" Standard-Fenster-Popup-Modus target="_blank" neues Fenster-Popup
Eigentum Wirkung
href Wird verwendet, um die URL-Adresse des Linkziels anzugeben. (Erforderliches Attribut) Wenn das href-Attribut auf das Tag angewendet wird, hat es die Funktion eines Hyperlinks.
Ziel Wird verwendet, um anzugeben, wie die verlinkte Seite geöffnet werden soll. Mögliche Werte sind _self und _blank. _self ist der Standardwert und _blank wird verwendet, um die Seite in einem neuen Fenster zu öffnen.

Der Unterschied zwischen src und href

Kurz gesagt: src ist die Quelle der Ressource, href ist die Weiterleitungs-URL

1.src wird verwendet, um das aktuelle Element zu ersetzen, und href wird verwendet, um eine Verbindung zwischen dem aktuellen Dokument und der referenzierten Ressource herzustellen.

2. src ist die Abkürzung für Quelle, die auf den Speicherort externer Ressourcen verweist. Der Inhalt, auf den verwiesen wird, wird an der Position des aktuellen Tags im Dokument eingebettet. Wenn die src-Ressource angefordert wird, wird die Ressource, auf die sie verweist, heruntergeladen und auf das Dokument angewendet, z. B. JS-Skripte, IMG-Bilder, Rahmenelemente usw. Wenn der Browser dieses Element analysiert, wird das Herunterladen und Verarbeiten anderer Ressourcen angehalten, bis die Ressource geladen, kompiliert und ausgeführt wird. Dasselbe gilt für Elemente wie Bilder und Frames, was dem Einbetten der angegebenen Ressource in das aktuelle Tag ähnelt. Aus diesem Grund sollten Sie JS-Skripte auch unten und nicht oben platzieren.

3.href ist die Abkürzung für Hypertext Reference, die auf den Speicherort von Netzwerkressourcen verweist und eine Verknüpfung zwischen dem aktuellen Element (Anker) oder dem aktuellen Dokument (Link) herstellt. Wenn wir es dem Dokument hinzufügen, erkennt der Browser das Dokument als CSS-Datei, lädt die Ressourcen parallel herunter und stoppt die Verarbeitung des aktuellen Dokuments nicht. Aus diesem Grund wird empfohlen, zum Laden von CSS die Link-Methode anstelle der @import-Methode zu verwenden.

Beachten:

1. Externe Links müssen http://www.baidu.com hinzufügen

2. Interne Links können direkt auf den internen Seitennamen verweisen, z. B. <a href="index.html"> Homepage

3. Wenn das Linkziel zu diesem Zeitpunkt nicht bestimmt wird, wird der href-Attributwert des Link-Tags normalerweise als "#" (dh href="#") definiert, was darauf hinweist, dass der Link vorübergehend ein leerer Link ist.

4. Sie können nicht nur Text-Hyperlinks erstellen, sondern auch Hyperlinks zu verschiedenen Webseitenelementen wie Bildern, Tabellen, Audio, Video usw. hinzufügen.

Ankerpositionierung : Durch die Erstellung von Ankerlinks können Benutzer Zielinhalte schnell finden.

1. Markieren Sie den Standort des Sprungziels mit dem entsprechenden ID-Namen. (Finde das Ziel)
  <h3 id="two">Folge 2</h3> 
2. Verwenden Sie <a href="#id name">Linktext</a>, um Linktext zu erstellen (anklickbar) 
  <a href="#zwei">   

6. Anmerkungs-Tags

<!-- Kommentaranweisung-->     
  Die Tastenkombination lautet: Strg + /       
  Oder Strg + Umschalt + / 

Teamvereinbarung: Vor und nach dem Kommentarinhalt ist ein Leerzeichen, und der Kommentar befindet sich über dem zu kommentierenden Code und belegt eine separate Zeile

7. Pfad

Bildbeschreibung hier einfügen

8. Sonstige Kenntnisse

Vorformatierter Text Text innerhalb eines Beschriftungselements behält normalerweise Leerzeichen und Zeilenumbrüche bei. Der Text wird auch in einer Monospace-Schriftart wiedergegeben. Unter Textformatierung versteht man die Anzeige der Seite entsprechend dem von uns vorab geschriebenen Textformat, unter Beibehaltung von Leerzeichen, Zeilenumbrüchen etc.

Sonderzeichen

Bildbeschreibung hier einfügen

Was ist XHTML

  • XHTML steht für „EXtensible HyperText Markup Language“.
  • Das Ziel von XHTML ist es, HTML zu ersetzen.
  • XHTML ist fast identisch mit HTML 4.01.
  • XHTML ist eine strengere und sauberere Version von HTML.
  • XHTML ist eine strenge Version von HTML, die als XML-Anwendung neu definiert wird. Beispielsweise ist es erforderlich, dass Tags klein geschrieben sind, korrekt geschlossen werden, in der richtigen Reihenfolge stehen und Attribute mit Anführungszeichen versehen sind.
  • XHTML ist ein W3C-Standard.

Worauf muss ich beim Schreiben von HTML-Code achten?

  • Verwenden Sie so wenig nicht-semantische Div- und Span-Tags wie möglich.
  • Wenn die Semantik nicht offensichtlich ist und Sie entweder div oder p verwenden können, versuchen Sie, p zu verwenden, da p standardmäßig über einen oberen und unteren Abstand verfügt, was für die Kompatibilität mit speziellen Terminals von Vorteil ist.
  • Verwenden Sie keine reinen Stil-Tags wie „b“, „font“, „u“ usw., sondern stattdessen CSS-Einstellungen.
  • Text, der hervorgehoben werden muss, kann in Strong- oder Em-Tags eingefügt werden (Standardformate des Browsers, verwenden Sie sie nicht, wenn Sie sie mit CSS angeben können). Das Standardformat von Strong ist fett (verwenden Sie nicht b) und von Em ist kursiv (verwenden Sie nicht i).
  • Wenn Sie eine Tabelle verwenden, verwenden Sie „caption“ für den Titel, „thead“ für die Kopfzeile, „tbody“ für den Hauptteil und „tfoot“ für die Fußzeile. Die Tabellenüberschrift und die allgemeinen Zellen sollten unterschieden werden; die Tabellenüberschrift verwendet th und die Zellen verwenden td;
  • Die Formularfelder sollten mit Fieldset-Tags umschlossen werden und der Zweck des Formulars sollte mit Legend-Tags erklärt werden.
  • Der Beschreibungstext, der jedem Eingabe-Tag entspricht, muss das Label-Tag verwenden. Durch Festlegen des ID-Attributs für die Eingabe und Festlegen von „für“ im Label-Tag wird der Beschreibungstext der entsprechenden Eingabe zugeordnet.

4. Tabelle

Es ist immer noch ein häufig verwendetes Tag, wird aber nicht für das Layout verwendet. Es wird häufig verwendet, um tabellarische Daten anzuzeigen und darzustellen. Weil dadurch die Datenanzeige sehr regelmäßig und leicht lesbar wird. Insbesondere bei der Anzeige von Daten im Hintergrund ist es sehr wichtig, mit Tabellen vertraut zu sein. Eine saubere und einfache Tabelle kann komplexe Daten geordnet darstellen.

Erstellen einer Tabelle

<Tabelle>
  <tr>
    <td>Text in der Zelle</td>
    ...
  </tr>
  ...
</Tabelle>

table, tr, td, das sind die grundlegenden Tags zum Erstellen von Tabellen, und keines davon darf fehlen

  • „table“ wird verwendet, um ein Tabellen-Tag zu definieren.
  • Das tr-Tag wird zum Definieren von Zeilen in einer Tabelle verwendet und muss im Table-Tag verschachtelt sein.
  • td wird zum Definieren von Zellen in einer Tabelle verwendet und muss in einem Tag verschachtelt sein.
  • Die Buchstaben td beziehen sich auf Tabellendaten, also den Inhalt einer Datenzelle. Jetzt verstehen wir, dass eine Tabelle am besten zum Speichern von Daten verwendet wird. td ist wie ein Container, der alle Elemente aufnehmen kann.

Bildbeschreibung hier einfügen

Überschriftenzellen-Tag th: Im Allgemeinen befindet sich die Überschriftenzelle in der ersten Zeile oder Spalte der Tabelle und der Text ist fett und zentriert. Sie müssen nur das entsprechende Zellen-Tag durch das Überschriften-Tag ersetzen.

Bildbeschreibung hier einfügen

Überschrift der Tabelle Normalerweise wird diese Überschrift zentriert und über der Tabelle angezeigt. Das Beschriftungs-Tag muss direkt nach dem Tabellen-Tag stehen. Dieses Tag ist nur innerhalb einer Tabelle sinnvoll. Du bist der Wind und ich bin der Sand

<Tabelle>
   <caption>Ich bin der Tabellentitel</caption>
</Tabelle>

Tabelleneigenschaften

Bildbeschreibung hier einfügen

Die drei Parameter sind 0. In unserer normalen Entwicklung sind die drei Parameter border cellpadding cellspacing 0

Zellen zusammenführen. Die Reihenfolge beim Zusammenführen ist先上后下先左rechts. Nach dem Zusammenführen müssen Sie die redundanten Zellen löschen.

  • Zeilenübergreifend zusammenführen: rowspan="Anzahl zusammengeführter Zellen"
  • Über mehrere Spalten hinweg zusammenführen: colspan="Anzahl zusammengeführter Zellen"

Übersichtstabelle

Tag-Name Definition veranschaulichen
<Tabelle></Tabelle> Tabellen-Tags Es ist eine quadratische Box.
<tr></tr> Tabellenzeilenbeschriftungen Zeilenbeschriftungen sind nur innerhalb von Tabellen-Tags sinnvoll
< td ></ td> Zellenbeschriftungen Das Zellen-Tag ist ein Element auf Containerebene, das alles enthalten kann.
< th></ th> Beschriftung der Kopfzelle Es ist immer noch eine Zelle, aber der Text darin wird zentriert und fett dargestellt.
<Beschriftung ></Beschriftung> Tabellentitel-Tag Der Titel der Tabelle folgt der Tabelle und wird mittig zur Tabelle angezeigt.
Clospan und Rowspan Zusammenführen von Attributen So verbinden Sie Zellen

Tabellenpartitionsstruktur

Bei komplexeren Tabellen ist die Tabellenstruktur relativ komplex, daher wird die Tabelle in drei Teile gegliedert: Kopfzeile, Hauptteil und Fußnoten. Diese drei Teile sind mit „thad“, „tbody“ und „tfoot“ gekennzeichnet, wodurch die Tabellenstruktur leichter zu unterscheiden ist.

Beachten:

  • <thead ></thead>: wird verwendet, um die Kopfzeile der Tabelle zu definieren. Wird verwendet, um Titel und dergleichen einzugeben. Etikett muss innen vorhanden sein!
  • <tbody></tbody>: Wird verwendet, um den Hauptteil der Tabelle zu definieren. Geben Sie den Datenkörper ein.
  • <tfoot></tfoot> wird zum Platzieren von Tabellenfußnoten usw. verwendet.
  • Die oben genannten Tags werden alle im Tabellentag platziert.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

<<:  Reines HTML+CSS, um einen Element-Ladeeffekt zu erzielen

>>:  Ausführliche Erläuterung der HTML-Grundlagen (Teil 2)

Artikel empfehlen

So exportieren und importieren Sie SQL-Dateien unter einem Linux-Befehl

Dieser Artikel beschreibt, wie Sie SQL-Dateien mi...

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

Vor einiger Zeit habe ich einen Blogbeitrag mit d...

36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)

Vorwort Diese Prinzipien sind aus tatsächlichen K...

Lösen Sie das Problem, dass Docker Sudo-Operationen verwenden muss

Die Schritte sind wie folgt 1. Erstellen Sie eine...

Methoden zur Verbesserung der Zugriffskontrollsicherheit im Linux-Kernel

Hintergrund Vor einiger Zeit half unser Projektte...

10 HTML-Tabellen-bezogene Tags

Tatsächlich werden viele Leute sagen: „Ich habe ge...

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...

So implementieren Sie eine geplante Sicherung von MySQL unter Linux

In tatsächlichen Projekten muss die Datenbank reg...

So teilen und führen Sie mehrere Werte in einem einzigen Feld in MySQL zusammen

Mehrere Werte kombiniert anzeigen Nun haben wir d...

uniapp implementiert Datums- und Zeitauswahl

In diesem Artikelbeispiel wird der spezifische Co...

MySQL Serie 13 MySQL-Replikation

Inhaltsverzeichnis 1. Mit der MySQL-Replikation v...