Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Die Innovation von HTML5 und die Schönheit der Tutorial-Fähigkeiten von structure_html5

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

WBOY
Freigeben： 2016-05-16 15:51:04
Original
1221 Leute haben es durchsucht
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:

.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>







Kopieren Sie den Code
Der Code lautet wie folgt folgt:
  • HTML 5
  • JavaScript< /li>



Der Code lautet wie folgt:


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 :

figure label
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

    )
    Verwandte Etiketten：
    html5
    Quelle：php.cn
    Vorheriger Artikel：HTML 5-Tags, Attribute, Ereignisse und Browserkompatibilitäts-Spickzettel mit Tutorial-Kenntnissen zum Paket download_html5 Nächster Artikel：28 neue Funktionen, neue Techniken und neue Technologien, die Sie über HTML5_HTML5-Tutorial-Fähigkeiten kennen müssen
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
    Aus 2024-04-06 15:33:12
    0
    1
    433
    Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
    Aus 2024-04-05 12:57:00
    0
    1
    456
    Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
    Aus 2024-04-02 11:47:56
    0
    1
    275
    Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
    Aus 2024-04-01 20:42:38
    0
    1
    259
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage