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:

Code kopieren


Der Code lautet wie folgt:

Was ist Abschnitt?

Ein neuer Abschnitt

p>
...

Typischerweise enthält es den Namen des Autors, das Erstellungsdatum des Dokuments und/oder Kontaktinformationen.

Verwendungsrichtlinien: Wird im Allgemeinen zum Umschließen des gemeinsamen unteren Endes der gesamten Seite verwendet und kann auch am Ende anderer Bereiche verwendet werden, beispielsweise am Ende eines Artikels:

Code kopieren

Der Code lautet wie folgt:

COPYRIGHT@Mr.Think

Manuelle Definition: Definieren Sie externen Inhalt. Zum Beispiel ein neuer Artikel von einem externen Nachrichtenanbieter oder ein Text aus einem Blog oder ein Text aus einem Forum

. Oder Inhalte aus anderen externen Quellen.
Anleitung zur Verwendung: Wie der Name schon sagt, wird es im Allgemeinen in Artikelblöcken verwendet:

Code kopieren Der Code lautet wie folgt:

;

Innovation in HTML 5

>< /header>

Details zum Artikelinhalt

tag
Manuelle Erklärung: Wird zum Kombinieren von Elementen verwendet.
Nutzungsanleitung: Wird hauptsächlich zum Kombinieren von Bildern und Bildbeschreibungen verwendet:

Kopieren Sie den Code

Der Code lautet wie folgt :

ist die Beschreibung des Bildes

Manuelle Erklärung: Menüliste definieren. Verwenden Sie diese Bezeichnung, wenn Sie Formularsteuerelemente auflisten möchten.

Bedienungsanleitung: Wird in Menüblöcken verwendet, um Menülisten oder Menüoptionen zu definieren:

Code kopieren

Der Code ist wie folgt:

HTML 5

/li>

Die anderen neuen Tags von HTML 5 werden nicht einzeln erklärt.
Tatsächlich sind diese Dinge, wie XHTMLs div, h1, inpu und andere Tags, einfach zu verwenden, solange Sie mehr üben.
Informationen zur Kompatibilität
Wenn Sie eine Person sind, die gerne studiert und auf das Frontend achtet, sollten Sie wissen, dass in der Seitenstruktur von Taobao eine große Anzahl neuer HTML 5-Tags verwendet wurde. Ich möchte also sagen, dass die Kompatibilität kein Problem darstellt, solange Sie es wagen. Im Internet gibt es viele kompatible Methoden (in diesem Artikel geht es um die Struktur, ha~).

Nachwort
Jede neue Technologie erfordert einen Anpassungsprozess. Wenn Sie bereit sind, ein hervorragender Web-Frontend-Entwickler zu werden, müssen Sie ständig versuchen, die neueste Frontend-Technologie zu akzeptieren.
Sun Wen sagte einmal: Wer das Glück der Zivilisation erleben will, muss den Schmerz der Zivilisation erleben. Das ist die Revolution der Menschheit, und so ist auch die Revolution von HTML 5. Der allmähliche Niedergang des IE hat es großen Browserherstellern erstmals ermöglicht, in die Zeit der Streitenden Reiche einzutreten, und die Helden wetteifern um den Thron. Von den Entwicklern erwarten wir von den großen Browserherstellern nur, dass sie so weit wie möglich denselben Standards folgen, anstatt auseinanderzufallen, nachdem eine Gruppe von Helden um einen gekämpft hat. Denn unser oberstes Ziel ist es, die gleiche Anwendung allen Arten von Benutzern effizient und perfekt zu präsentieren.

Auf diese Weise beginnt dieser Artikel mit dem Dokumenttyp der Seite, geht über die Verwendung neuer HTML 5-Tags zum Aufbau einer semantischeren Seitenstruktur über und erklärt dann einige neue Tags im Zusammenhang mit der Seitenstruktur. Ich glaube, jeder hat ein neues Verständnis für die strukturellen neuen Tags von HTML 5. Wenn Sie interessiert sind, öffnen Sie Ihre IDE, schreiben Sie einen Code, der mit den neuen HTML 5-Tags erstellt wurde, und verwenden Sie dann CSS, um Ihren großartigen Blueprint darzustellen! (Quelle:

Mr.Think

)