Die Innovation von HTML5 und die Schönheit der Tutorial-Fähigkeiten von structure_html5

Vorwort
HTML 5 ist wie eine Revolution, die in der Post-Web2.0-Ära kräftig voranschreitet.
Was HTML 5 ist, muss ich hier nicht näher erläutern. Die Innovation von HTML 5 kann nach meinem Verständnis als Tag-System mit klarer Semantik, Rich-Media-Unterstützung zur Vereinfachung der Komplexität, magischer lokaler Datenspeichertechnologie und reichhaltiger Animation (Leinwand) zusammengefasst werden, für die keine Plug-Ins erforderlich sind und leistungsstarke API-Unterstützung. Kurz gesagt: HTML 5 macht die Mensch-Computer-Interaktion komfortabler und benutzerfreundlicher. Der frühere Mangel an Unterstützung für Rich-Media-Anwendungen und nativen Speicher stellt für Browser kein Problem mehr dar. Das Web von einer Content-Plattform zu einer standardisierten Anwendungsplattform zu machen und die Standards verschiedener Plattformlager zu vereinheitlichen, ist die ursprüngliche Absicht der HTML-5-Revolution. In diesem Artikel werde ich einige Ideen vorstellen und eine der Neuerungen von HTML 5 erläutern: eine klarere und prägnantere Struktur mit Semantik.

Beginnen Sie mit dem „Kopf“ Ein Standard-XHTML-Header-Code sollte so aussehen:

Code kopierenDer Code lautet wie folgt:

Wirst du es dir auswendig merken? Natürlich nicht! Wir müssen nur mechanisch kopieren und einfügen.
Sehen Sie sich an, wie ein Standard-HTML-5-Header aussieht:

Kopieren Sie den Code

Der Code lautet wie folgt:

Es ist komplizierter als einfach, ich muss es nicht sagen. Ja, der HTML 5-Header kann so einfach und leicht zu merken sein! Außerdem können Groß- und Kleinschreibung, Anführungszeichen und der Backslash vor der letzten spitzen Klammer ignoriert werden.

Warum kann es so locker sein? Wenn Sie XHTML als Text/HTML senden, kann der Browser es tatsächlich gut analysieren, und der Browser kümmert sich nicht um die Syntax des Codes. Daher ist HTML 5 metaphysisch. Es verstößt möglicherweise gegen einige ursprüngliche Standards, kann aber dennoch in Browsern gut funktionieren.
Natürlich sollten wir zur Vereinfachung der Teamunterstützung und der anschließenden Wartung dennoch einen Schreibstil vereinheitlichen, der Ihnen gefällt, wie zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

charset=" gb2312" />... ;

Obwohl HTML 5 derzeit nicht von allen Browsern unterstützt wird, können dadurch mehr als 100 Bytes eingespart werden (bei Websites mit mehr als einer Million PV pro Tag kann es viel Datenverkehr einsparen). ) Kopf ist jetzt perfekt kompatibel. Wenn Sie die Browser-Parsing-Modi recherchiert haben, sollten Sie wissen, dass die Seite den seltsamen Modus auslöst, wenn doctype nicht definiert ist. Solange jedoch definiert ist, kann der Browser die Seite im Standardmodus analysieren, und das ist der Fall Es ist nicht erforderlich, einen bestimmten DTD-Typ anzugeben.

Neues semantisches Tag-System

Semantische Codierung ist eine wesentliche Fähigkeit für einen qualifizierten Front-End-Entwickler. Da Webseiten jedoch immer umfangreicher werden, werden nur die ursprünglichen XHTML-Tags zur Desemantisierung verwendet Sie überstiegen offensichtlich seine Fähigkeiten. Gott sagte: „Es werde Licht!“ Und es gab Licht. Daher stellt HTML 5 eine Reihe neuer Tags und entsprechender Attribute bereit, um die typische Semantik moderner Websites widerzuspiegeln. Übe die Wahrheit. Schreiben wir ein Beispiel:





Kopieren Sie den Code

Der Code lautet wie folgt:

subtitle

HTML 5 ;li>CSS

• JavaScript
--//header end-->

Dies ist ein Artikel über HTML Die neuen Struktur-Tags von 5.


Dies ist ein Artikel über die neuen Struktur-Tags von HTML 5.





Über den Autor




Mr.Think, ein gewöhnlicher Mensch, der sich auf Web-Frontend-Technologie konzentriert.

🎜 >

Das Obige ist eine einfache Blog-Seite, teilweise im HTML-Format, bestehend aus der Kopfzeile und dem Artikelanzeigebereich , rechts Bestehend aus Seitenleiste und Unterseite. Die Codierung ist ordentlich und entspricht der Semantik von XHTML. Sie kann sogar in HTML 5 gut funktionieren. Für den Browser ist dies jedoch ein Code ohne Unterscheidungsgewichte und kein Tag, der es Maschinen ermöglicht, die Semantik zu verstehen, um den entsprechenden Block zu definieren. Beispielsweise verfügen Standardbrowser (wie Firefox, Chrome und sogar die neue Version von IE) über eine Tastenkombination, die Kunden dazu verleiten kann, direkt zur Seitennavigation zu springen. Das Problem besteht jedoch darin, dass alle Blöcke mit DIV und der ID definiert sind Wert des DIV Es wird vom Entwickler bestimmt, sodass der Browser nicht weiß, welcher Block der Navigationslink sein soll. Das Aufkommen neuer HTML 5-Tags gleicht diesen Mangel einfach aus. Dann kann der obige Code wie folgt in HTML 5 geschrieben werden:





Kopieren Sie den Code


Der Code lautet wie folgt:

Website-Titel

< ; /hgroup>

JavaScript
🎜 >

Dies ist ein Artikel über die neuen Struktur-Tags von HTML 5.




Dies ist ein Artikel über die neuen Struktur-Tags von HTML 5.

.Think, ein gewöhnlicher Mann, der sich auf Web-Front-End-Technologie konzentriert.

Unten auf der Webseite
Die Seitenstruktur von HTML kann so aussehen. Die Schönheit ist auf einen Blick ohne Kommentar zu erkennen. Für den Browser ist das Auffinden des entsprechenden Blocks kein Problem mehr.
Wie verwendet man neue HTML 5-Tags, um Elemente zu strukturieren

Anhand des obigen Beispiels verstehen wir die strukturelle Innovation der neuen HTML 5-Tags, aber wenn es um die tatsächliche Verwendung geht, wie verwendet man sie angemessen? Ich denke, das ist auch eine Frage, die viele HTML 5-Lernende stellen möchten. Genau wie die XHTML-Semantik sollte auch die Verwendung von HTML 5-Semantik-Tags folgen: Jedes Tag hat seine spezifische Bedeutung, und die Semantik ermöglicht es uns, geeignete Tags an der entsprechenden Stelle zu verwenden, um Menschen und Maschinen besser zu verstehen (die Maschine kann als eine Maschine verstanden werden). Browser oder eine Suchmaschine) können es auf einen Blick verstehen. Beispielsweise ist das Header-Tag im Allgemeinen das erste Blockelement der Seite (das Header-Tag kann auch in Typ-Header-Elementen wie dem Titel eines Artikelblocks verwendet werden), das die Themeninformationen der Seite enthält wird im Allgemeinen zum Umschließen von Navigationsinformationen verwendet. ;Fußzeile wird im Allgemeinen zum Umschließen von Informationen am Ende der Seite usw. verwendet.

Das Folgende sind die semantischen Erklärungen und Verwendungsrichtlinien der häufig verwendeten neuen Tags von Strukturklassen, die ich unter Bezugnahme auf das HTML 5-Handbuch aufgelistet habe:

Manuelle Erklärung: Definieren Sie den Header von einen Abschnitt oder ein Dokument. Verwendungsrichtlinien: Wird im Allgemeinen zum Einfügen von Seitenkopfzeilen verwendet, kann aber auch für andere Bereichskopfzeilen wie Artikelkopfzeilen verwendet werden:

Code kopieren


Der Code lautet wie folgt:

Website-Titel

h1>

Manuelle Erklärung: Wird verwendet, um den Titel einer Webseite oder Abschnittskombination zu ändern .
Verwendungsrichtlinien: Wird für die Kombination von Titeltypen verwendet, z. B. Titel und Untertitel eines Artikels:

Code kopieren

Code wie folgt:

Dies ist ein Artikel, der HTML 5-Struktur-Tags vorstellt.

Innovation von HTML 5< ;/h2>

Manuelle Erklärung: Definieren Sie den Teil des Navigationslinks.
Nutzungsrichtlinien: Wird zum Definieren des Navigationsteils der Seite verwendet:

Kopieren Sie den Code

Der Code lautet wie folgt folgt:

• HTML 5
• JavaScript< /li>

Der Inhalt der Seite sollte mit dem Inhalt des Artikels in Zusammenhang stehen.
Nutzungsleitfaden: Wird für unterteilte Inhalte verwendet und startet einen neuen Abschnitt im Dokumentfluss, der im Allgemeinen für Seitenleisten im Zusammenhang mit Artikelinhalten verwendet wird:





Kopieren Code

Der Code lautet wie folgt:

Über den Autor

Mr.Think, ein gewöhnlicher Mensch, der sich auf Web-Front-End-Technologie konzentriert.

Manuelle Erklärung: Definieren Sie einen Abschnitt im Dokument. Zum Beispiel Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments. Nutzungsrichtlinien: Wird für unterteilte Inhalte verwendet und beginnt einen neuen Abschnitt im Dokumentenfluss: