HTML5 Innovation: Die Schönheit der Struktur

Autor：Eve Cole Aktualisierungszeit：2025-03-27 16:00:04

HTML 5 ist wie eine Revolution und ist in der Zeit nach dem Web2.0 in vollem Gange.

Was HTML 5 ist, ich muss hier nicht auf Details eingehen. Meines Verständnis zufolge kann die Innovation von HTML 5 als semantisches Label-System, eine vereinfachte und reiche Medienunterstützung, eine magische lokale Datenspeichertechnologie, eine Rich Animation (Canvas) zusammengefasst werden, für die keine Plug-Ins erforderlich sind, und eine leistungsstarke API-Unterstützung. Kurz gesagt, HTML 5 macht Computerinteraktion und Human-Network-Interaktion bequemer und passt zu Benutzern. Der bisherige Mangel an Unterstützung für reiche Medienanwendungen und diese Lagerung ist für Browser keine Schmerzen mehr. Die ursprüngliche Absicht der HTML 5 -Revolution besteht darin, das Web von einer Inhaltsplattform zu einer standardisierten Anwendungsplattform zu fördern und die Standards jedes Plattformcamps zu vereinen.

Dieser Artikel erklärt eine der Innovationen von HTML 5: eine klarere und prägnantere Struktur.

Beginnen Sie von Anfang an

Ein Standard -XHTML -Header -Code sollte so aussehen:

<! DocType html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<kopf>

</head>

Kannst du dich erinnern? Wirst du es durch Rote auswendig lernen? Natürlich nicht! Wir brauchen nur mechanische Kopien und Einfügen.

Schauen wir uns an, wie ein Standard -HTML 5 -Header ist:

<! docType html>

Ich muss nicht sagen, welches komplizierter ist und welcher einfach ist. Ja, der HTML 5 -Header kann so einfach sein, dass er leicht erinnert werden kann! Außerdem kann der Fall, Zitate und Backslashes vor der letzten Winkelhalterung ignoriert werden.

Warum kann es so locker sein? Wenn XHTML als Text/HTML gesendet wird, kann der Browser ihn auch gut analysieren und der Browser kümmert sich nicht um die Syntax des Codes. HTML 5 ist also metaphysisch, es kann einige der ursprünglichen Standards brechen, aber es kann im Browser immer noch gut abschneiden.

Natürlich sollten wir zum Komfort der Teamhilfe und der anschließenden Wartung den von Ihnen gefallenen Schreibstil vereinen, z. B.:

<! docType html>

<html>

<kopf>

...

</head>

<body>

...

</body>

</html>

Obwohl HTML 5 derzeit nicht von allen Browsern unterstützt wird, kann dieser Header, der mehr als 100 Bytes sparen kann (für Websites mit täglichen PV -Werten oder über eine Million, viel Verkehr sparen). Wenn Sie im Browserauflösungsmodus recherchiert haben, sollten Sie wissen, dass Seiten den seltsamen Modus auslösen, ohne docType zu definieren, und solange der <! DocType html> Browser definiert ist, können Sie Seiten im Standardmodus analysieren, ohne einen bestimmten DTD -Typ anzugeben.

Neues semantisches Etikettierungssystem

Die semantische Codierung ist eine notwendige Fähigkeit für qualifizierte Front-End-Entwickler, aber da Webseiten immer reicher werden, ist es offensichtlich, dass sie dies nicht tun können, indem sie einfach das ursprüngliche XHTML-Tag für DeSemanate verwenden. Gott sagte: Es muss Licht geben! Dann gibt es Licht. Daher bietet HTML 5 eine Reihe neuer Tags und entsprechender Attribute, um die typische Semantik moderner Websites widerzuspiegeln. Üben Sie, die Wahrheit zu produzieren. Schreiben wir ein Beispiel:

<h1> Website -Titel </h1>

<h1> Site -Untertitel </h1>

</div>

<ul>

<li> JavaScript </li>

</ul>

</div>

<!-// Header End->

<p> Dies ist ein Artikel über die neuen HTML 5 -Struktur -Tags. </p>

</div>

<p> Dies ist auch ein Artikel über die neuen HTML 5 -Struktur -Tags. </p>

</div>

<!-// links ende->

<h1> Autorenprofil </h1>

<p> Mr. Think, eine gewöhnliche Person, die sich auf die Web-Front-End-Technologie konzentriert. </p>

</div>

<!-// Seitenende->

Am Ende der Seite

</div>

<!-// Fußzeile End->

Oben finden Sie ein einfaches Blog -Seite HTML -Teil, das aus dem Header, dem Artikelanzeigebereich, der rechten Spalte und unten bestehen. Die Codierung ist ordentlich und entspricht der Semantik von XHTML, die selbst in HTML 5 gut ausgeführt werden kann. Für den Browser ist dies ein Codestück, das es nicht zwischen Gewichten unterscheidet, und nicht ein Tag, mit dem die Maschine die Semantik versteht, um den entsprechenden Block zu definieren. Beispielsweise haben Standardbrowser (wie Firefox, Chrome und sogar die neue Version von IE) einen Abkürzungschlüssel, mit dem Kunden direkt zur Seitennavigation springen können. Das Problem ist jedoch, dass alle Blöcke durch DIV definiert werden, und der ID -Wert des DIV wird vom Entwickler festgelegt, sodass der Browser nicht weiß, welcher Block der Block, in dem sich der Navigations -Link befindet, befindet. Die Entstehung neuer HTML 5 -Tags macht diesen Mangel nur wieder wett. Wenn der obige Code dann durch HTML 5 ersetzt wird, können Sie ihn so schreiben:

<h1> Website -Titel </h1>

<h1> Site -Untertitel </h1>

</hgroup>

<nav>

<ul>

<li> JavaScript </li>

</ul>

</nav>

</header>

<p> Dies ist ein Artikel über die neuen HTML 5 -Struktur -Tags. </p>

</article>

<p> Dies ist auch ein Artikel über die neuen HTML 5 -Struktur -Tags. </p>

</article>

</div>

<h1> Autorenprofil </h1>

<p> Mr. Think, eine gewöhnliche Person, die sich auf die Web-Front-End-Technologie konzentriert. </p>

</beiseite>

Am Ende der Seite

</footer>

Es stellt sich heraus, dass die HTML -Seitenstruktur so schön sein kann, dass sie auf einen Blick ohne Kommentare gesehen werden kann. Für Browser werden Sie nicht mehr ratlos sein, wenn Sie den entsprechenden Block finden.

So strukturieren Sie Elemente mit HTML 5 neuen Tags:

Im obigen Beispiel verstehen wir die Innovationen neuer HTML 5 -Tags für die Struktur, aber wie können wir sie bei der tatsächlichen Verwendung angemessen verwenden? Ich denke, dies 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 befolgt werden: Jedes Tag hat seine spezifische Bedeutung, und die Semantik bedeutet, dass wir an der richtigen Stelle geeignete Tags verwenden, um Menschen und Maschinen besser zu machen (Maschinen können als Browser verstanden werden als Suchmaschinen). Beispielsweise ist das Header -Tag im Allgemeinen das erste Blockelement der Seite (das Header -Tag kann auch im Header -Type -Typ verwendet werden, wie z. B. den Titel des Artikelblocks), der die Themeninformationen der Seite enthält. Das NAV -Tag wird im Allgemeinen zum Wickeln von Navigationsinformationen verwendet. Fußzeile wird im Allgemeinen verwendet, um die unteren Informationen der Seite zu wickeln. und so weiter.

Im Folgenden finden Sie die semantischen Erläuterungs- und Nutzungsrichtlinien für gemeinsame neue Tags für Strukturklassen, die im HTML 5 -Handbuch aufgeführt sind:

<header> Tag

Manuelle Definition: Definiert den Header des Abschnitts oder des Dokuments.

Verwendungsrichtlinien: Es wird im Allgemeinen zur Einbeziehung von Seitenüberschriften verwendet und kann auch für andere Bereiche wie Artikelüberschriften verwendet werden:

<h1> Website -Titel </h1>

<h1> Site -Untertitel </h1>

</hgroup>

</header>

<HGroup> Tag

Manuelle Definition: Wird verwendet, um die Titel einer Webseite oder eines Abschnitts zu kombinieren.

Richtlinien für die Verwendung: Wird für Kombinationen von Titelklassen wie den Titel und Untertitel eines Artikels verwendet:

<h1> Dies ist ein Artikel, in dem HTML 5 -Struktur -Tags </h1> vorgestellt werden

<h2> HTML 5 Innovation </H2>

</hgroup>

<Av> Tag

Manuelle Definition: Definieren Sie den Teil, der den Navigationslink definiert.

Richtlinien für die Verwendung: Navigationsabschnitt zum Definieren von Seiten:

<nav>

<ul>

<li> JavaScript </li>

</ul>

</nav>

<Verhalten> Tag

Inhalt als Artikel definieren. Der Inhalt von beiseite sollte mit dem Inhalt des Artikels zusammenhängen.

Verwendungsrichtlinien: Im Dokumentstrom wird ein neuer Abschnitt für geschnittene Inhalte eingeleitet, der in den Seitenleisten im Zusammenhang mit Artikelinhalten in der Regel verwendet wird:

<h1> Autorenprofil </h1>

<p> Mr. Think, eine gewöhnliche Person, die sich auf die Web-Front-End-Technologie konzentriert. </p>

</beiseite>

<Abschnitt> Tag

Manuelle Definition: Definieren Sie Abschnitte im Dokument. Zum Beispiel Kapitel, Header, Fußzeilen oder andere Teile des Dokuments.

Verwendungsrichtlinien: Der für Abschnitte verwendete Inhalt startet einen neuen Abschnitt im Dokumentstream:

Was ist <h1> Abschnitt? </h1>

<h2> Ein neues Kapitel </h2>

<h2> Über Abschnitt </h1>

<p> Abschnitt Einführung </p>

...

</article>

</Abschnitt>

<Footer> Tag

Manuelle Definition: Definiert die Fußzeile des Abschnitts oder des Dokuments. Normalerweise enthält es den Namen des Erstellers, das Datum der Erstellung des Dokuments und/oder Kontaktinformationen.

Verwendungsrichtlinien: Es wird im Allgemeinen verwendet, um die gesamte Seite mit einem allgemeinen Boden zu wickeln, und kann auch am Ende anderer Bereiche verwendet werden, z. B. am Ende des Artikels:

[email protected]

</footer>

<Aktion> Tag

Manuelle Definition: Definieren Sie externer Inhalt. Zum Beispiel ein neuer Artikel eines externen Nachrichtenanbieters, entweder aus einem Blog oder aus einem Forum. Oder es kommt aus anderen externen Quellen.

Richtlinien für die Verwendung: Wie der Name schon sagt, wird er im Allgemeinen in Artikelblöcken verwendet:

<h1> Dies ist ein Artikel, in dem HTML 5 -Struktur -Tags </h1> vorgestellt werden

<h2> HTML 5 Innovation </H2>

</hgroup>

</header>

<p> Artikelinhaltsdetails </p>

</article>

<Figure> Tag

Manuelle Definition: Wird zum Kombinieren von Elementen verwendet.

Verwendungsrichtlinien: Hauptsächlich zum Kombinieren von Bildern und Bildbeschreibungen:

<Abus>

<Figcaption> Dies sind die Beschreibungsinformationen des Bildes </figcaption>

</figur>

<Meens> Tag

Manuelle Definition: Menüliste definieren. Verwenden Sie dieses Tag, wenn Sie Formularsteuerungen auflisten möchten.

Verwendungshandbuch: Wird in Menüklassenblöcken verwendet, um Menülisten oder Menüoptionen zu definieren:

<Meens>

<li> JavaScript </li>

</Menü>

Andere neue Tags in HTML 5 werden nacheinander nicht erklärt. Bitte überprüfen Sie das Handbuch selbst.

Tatsächlich sind diese Dinge wie die DIV, H1, INPU und andere Tags in XHTML. Solange Sie im täglichen Leben mehr üben, ist es einfach, sie frei zu verwenden.

Über Kompatibilität

Wenn Sie eine Person sind, die gerne studiert und auf das Front-End achtet, sollten Sie wissen, dass die neuen HTML 5-Tags in der Seitenstruktur von Taobao verwendet wurden. Ich möchte also sagen, dass die Kompatibilität kein Problem ist, solange Sie es wagen, es zu versuchen, zu versuchen. Es gibt viele Kompatibilitätsmethoden online (in diesem Artikel geht es um Struktur, ha ~).

Spätere Geschichten

Jede neue Technologie erfordert einen Anpassungsprozess. Wenn Sie bereit sind, ein hervorragender Web-Front-End-Entwickler zu sein, müssen Sie die neueste Front-End-Technologie weiter versuchen und akzeptieren.

Sun Wen hat einmal gesagt, wenn Sie das Glück der Zivilisation machen möchten, müssen Sie den Schmerz der Zivilisation vornehmen. Dies gilt für die Revolution der Menschheit, ebenso wie die Revolution von HTML 5. Der allmähliche Rückgang des IE hat es den großen Browserherstellern ermöglicht, in die Zeit der Kriegerstaaten einzutreten und miteinander zu konkurrieren. Was Entwickler betrifft, hoffen wir nur, dass große Browserhersteller so weit wie möglich den gleichen Standard folgen sollten, anstatt die Spieler nach dem Wettbewerb aufzuteilen. Denn effiziente und perfekte Präsentation der gleichen Anwendung für alle Arten von Benutzern ist unser ultimatives Ziel.

Auf diese Weise beginnt dieser Artikel vom DocType der Seite bis zur Verwendung der neuen HTML 5 -Tags, um eine semantisierte Seitenstruktur zu erstellen, und erläutert dann die neuen Tags, die sich auf die Seitenstruktur beziehen. Ich glaube, jeder hat ein neues Verständnis der strukturellen neuen Tags von HTML 5. Wenn Sie interessiert sind, dann öffnen Sie Ihre IDE, schreiben Sie ein Stück Code, das von den neuen Tags von HTML 5 erstellt wurde, und verwenden Sie dann CSS, um Ihren großen Blauprint zu beschreiben!