HTML5-HTML-Elementerweiterung (Teil 1) – Überblick über neu hinzugefügte Elemente und Tutorialfähigkeiten zur Verwendung von_html5

Betrachten Sie unseren Prozess der Entwicklung einer Seite :
1. Entwerfen Sie die Struktur der Seite – HTML: Bei diesem Prozess wird die Struktur der Webseite mithilfe verschiedener HTML-Elemente erstellt.
2. Gestalten Sie das Erscheinungsbild der Seite – CSS: Bei diesem Prozess wird CSS verwendet, um das Erscheinungsbild der Webseite zu verbessern.
3. Entwerfen Sie das Verhalten der Seite – Javascript: Dieser Prozess dient dazu, den Elementen der Webseite bestimmte Verhaltensweisen zuzuweisen.
Neben CSS wurde HTML5 auch in den beiden anderen Aspekten unterschiedlich stark erweitert. Diese Serie konzentriert sich auf den ersten Aspekt. Zuvor haben wir etwas über die komplexen Canvas- und SVG-Elemente gelernt. In den folgenden Kapiteln werden weitere von HTML5 hinzugefügte Elemente zusammengefasst.

Strukturelemente
HTML5 fügt neue Strukturelemente wie Kopfzeile, Fußzeile, Navigationsnavigation, Inhaltsartikel, Abschnitt usw. hinzu. Die Bedeutung ist wie folgt:

Zusätzlich zu diesem Strukturelement der gesamten Seite fügt HTML5 auch semantische Elemente auf Blockebene hinzu, z. B. das Hilfselement beiseite, die Bildelementfigur, die detaillierten Beschreibungselementdetails usw. Diese Elemente zeigen nicht nur die Layoutbedeutung der Seite besser an, sondern unterscheiden sich auch nicht von gewöhnlichen Divs. Sie müssen sich weiterhin auf CSS verlassen, um diese Elemente anzuzeigen. Hier ist ein einfaches Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

< ;html>

< ;h1>dxy1982 Blog

Artikel 1

< ;p>Einführung

Einleitung

Blog

Informationen

• Richtlinie< ;/a>


• List< /li>
  

Artikel

• Januar


• Februar

Copyright 2012 dxy1982< /p>

Diese Elemente sind zwar relativ einfach zu verwenden, aber vorhanden Es sind noch ein paar Punkte zu beachten :
1. Verwenden Sie section nicht als Ersatz für div
Section ist kein Stilcontainer. Das Abschnittselement stellt einen semantischen Teil des Inhalts dar, der beim Erstellen einer Dokumentzusammenfassung hilft. Es sollte einen Header enthalten. Es existiert normalerweise als Teil eines Artikels (natürlich kann auch ein Artikel ein Teil davon sein). Wenn Sie nach einem Element suchen, das als Seitencontainer verwendet werden kann, oder zusätzliche Stilcontainer benötigen, bleiben Sie bei divs.
2. Header und hgroup nur bei Bedarf verwenden
Es ist sinnlos, Tags zu schreiben, die nicht geschrieben werden müssen. Die Verwendungsszenarien von Header und Hgroup sind normalerweise wie folgt:
• Das Header-Element stellt eine Reihe von einleitenden oder Navigationshilfstexten dar, die häufig als Kopf eines Abschnitts verwendet werden.
• Wenn die Kopfzeile über mehrere Strukturebenen verfügt, z. B. Unterüberschriften, Untertitel, verschiedene Logos usw., verwenden Sie hgroup, um h1-h6-Elemente als Kopfzeile des Abschnitts zu kombinieren.
Wenn es hier nur wenige Header-Elemente im Header oder in der hgroup gibt, warum nicht diese beiden nutzlosen Tags entfernen, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

　

　

Mein bester Blogbeitrag

　

-->

Direkt ändern zu:

Code kopieren

Der Code ist wie folgt:

　

Mein bester Blogbeitrag

　
< /article>

Das Gleiche:

Code kopieren

Code wie folgt:

　

　

Mein bester Blogbeitrag

　

p>von Rich Clark< ;/p>

Direkt ändern zu:

Code kopieren

Der Code lautet wie folgt:

Mein bester Blog-Beitrag

von Rich Clark< ;/ p>

3. Missbrauchen Sie das Navigationselement nicht, um Blöcke auf der Seite darzustellen, die auf andere Seiten oder andere Teile dieser Seite verweisen Navigationslinks-Block.
Aber nicht alle Links auf der Seite müssen im Navigationselement platziert werden – dieses Element soll als Hauptnavigationsblock verwendet werden. Um ein konkretes Beispiel zu nennen: In der Fußzeile befinden sich häufig viele Links, z. B. zu Nutzungsbedingungen, Homepage, Seite mit Urheberrechtserklärung usw. Das Fußzeilenelement selbst reicht aus, um diese Situationen zu bewältigen. Obwohl das Navigationselement hier auch verwendet werden kann, halten wir es normalerweise für unnötig.
4. Missbrauchen Sie keine Abbildung
Abbildung sollte „ein fließender Inhalt sein, manchmal mit einer eigenen Titelbeschreibung. Sie wird im Allgemeinen als unabhängige Einheit im Dokumentenfluss referenziert.“ . Bestes anwendbares Szenario – es kann von der Hauptinhaltsseite in die Seitenleiste verschoben werden, ohne den Dokumentenfluss zu beeinträchtigen. Abbildungen sollten nur innerhalb des Dokuments referenziert oder von Abschnittselementen umgeben werden.
Wenn die Abbildung lediglich der Präsentation dient (z. B. ein Logo), an keiner anderen Stelle im Dokument darauf verwiesen wird und keine Notwendigkeit besteht, die Position zu verschieben, verwenden Sie die Abbildung auf keinen Fall.
5. Verwenden Sie keine unnötigen Typattribute.
In HTML5 erfordern Skript- und Stilelemente keine Typattribute mehr. Natürlich ist es nichts Falsches daran, es zu schreiben, aber aus Best-Practice-Sicht besteht keine Notwendigkeit, es zu schreiben.


Audioelement
Das Audioelement wird verwendet, um Soundinhalte wie Musik oder andere Audiostreams zu identifizieren. Die von diesem Element unterstützten Formate sind in der folgenden Tabelle aufgeführt: Das

audio-Tag verfügt über einige Attribute, mit denen der Inhalt gesteuert wird, wann und wie das Audio abgespielt wird. Diese Attribute sind: src (Dateiname), preload (geladen, wenn die Seite geladen wird), Kontrollen (Anzeigesteuerung), Schleife (Schleife) und Autoplay (automatische Wiedergabe). Im folgenden Beispiel wird die Audiowiedergabe fortgesetzt, sobald die Seite geladen wird, und die bereitgestellten Steuerelemente ermöglichen es dem Benutzer, die Audiowiedergabe zu stoppen oder neu zu starten:

Code kopieren

Der Code lautet wie folgt:

Wenn der Browser das Element nicht unterstützt, werden die Textinformationen des Elements angezeigt.
Wenn das Autoplay-Element festgelegt ist, wird das Preload-Attribut automatisch ignoriert. Wenn preload="auto" eingestellt ist, wird das Audio geladen, nachdem die Seite geladen wurde. Das
audio-Element ermöglicht die Angabe mehrerer Quellelemente, um mit Browserproblemen kompatibel zu sein. Das Quellelement kann verschiedene Audiodateien verknüpfen. Der Browser verwendet das erste erkannte Format:

Kopieren Sie den Code

Der Code lautet wie folgt:

Videoelement Mit dem Videoelement können Sie Videoclips abspielen oder visuelle Medien streamen. Die von diesem Element unterstützten Formate sind in der folgenden Tabelle aufgeführt:

Es verfügt über alle Attribute des Audioelements, plus: stummgeschaltet (stumm), Poster (warten auf Bilder), Breite und Höhe. Unnötig, die letzten beiden Bedeutungen zu erwähnen. Mit dem Poster-Attribut (Angabe einer absoluten oder relativen URL) können Sie ein Bild finden, das Sie verwenden möchten, wenn das Video geladen wird oder wenn das Video überhaupt nicht geladen wird.

Video unterstützt auch die Verwendung von Quellelementen zur Lösung von Kompatibilitätsproblemen. Schauen Sie sich ein kleines Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Wenn Sie den Ton des Videos nicht abspielen möchten, stellen Sie einfach „muted“ ein.
Darüber hinaus stellt das Videoelement auch einige Methoden, Eigenschaften und Ereignisse bereit, um die Steuerung des Wiedergabevorgangs während DOM-Vorgängen zu unterstützen. Rufen Sie beispielsweise die Methoden „Wiedergabe“, „Pause“, „Laden“ und andere Elemente des Elements auf. Darüber hinaus gibt es Attribute wie Lautstärke und Wiedergabezeit, die direkt abgelesen bzw. eingestellt werden können. Darüber hinaus gibt es Start-Play-, Pause-, End-Events usw., die genutzt werden können. Schauen Sie sich das Beispiel unten an:

Kopieren Sie den Code

Der Code lautet wie folgt:

">Play/Pause
Big
Small
< button onclick="makeNormal()">Normal

Achten Sie auf eine neue Schreibweise: Im obigen Beispiel schreiben wir das Audioelement so:





Kopieren Sie den Code


Der Code lautet wie folgt:

Tatsächlich wurden in HTML5 viele boolesche Attribute wie Steuerelemente, automatische Wiedergabe und Schleife eingeführt. Sie können diese Attribute wie oben beschrieben schreiben Die Methode lautet wie folgt:

Kopieren Sie den Code


Der Code lautet wie folgt:

< ;audio src="MyFirstMusic.ogg" steuert die Autoplay-Schleife>
Ihr Browser unterstützt das Audioelement nicht.

Denn wenn der Browser auf diese Attribute stößt, bedeutet dies, dass diese Attribute aktiviert sind. Mit anderen Worten, wenn Sie diese Attribute schreiben und sie zwangsweise auf false setzen, Der Effekt ist immer noch derselbe, daher wird im Allgemeinen empfohlen, nur den Attributnamen zu schreiben. Dieses Schreibproblem besteht auch in Formularen. Viele neue Formular- und Eingabeattribute sind boolesche Attribute und es sollte die empfohlene Schreibmethode verwendet werden.

Elemente, die Messungen anzeigen

Nicht jeder Browser unterstützt die folgenden Elemente, aber grundsätzlich ist der Effekt in Chrome zu sehen.

Fortschrittsbalkenelement

Verwenden Sie dieses Element, um den Download-Fortschrittsbalken anzuzeigen. Es hat nur zwei Attribute: Wert und max. Es ist sehr einfach. Sowohl Chrome als auch Firefox unterstützen es.

Code kopieren

Der Code lautet wie folgt:

Download-Fortschritt:
33%

🎜>

Messelement
Verwenden Sie dieses Element, um ein Anzeigesymbol für einen bestimmten Wert in der Standardbereichsklasse anzuzeigen. Werte in verschiedenen Bereichen werden in unterschiedlichen Farben angezeigt. Einige Websites verwenden dieses Tool, um den aktuellen Erlebniswert des Benutzers anzuzeigen. Wenn der Browser dieses Element nicht unterstützt, wird der Text in der Mitte des Elements direkt angezeigt. Derzeit unterstützt Chrome es bereits.

Code kopierenDer Code lautet wie folgt:

ist:

B .
< /p>


Führen Sie es aus und Sie werden eine gelbe Bildlaufleiste sehen. Wenn Sie den Wert auf 50 ändern, werden Sie feststellen, dass die Farbe der Anzeigeleiste rot ist.

Das war's mit der Einführung der neu hinzugefügten Elemente. Weitere Elementbeschreibungen finden Sie in der vollständigen Tag-Liste im W3C.

Praktische Referenz:

W3C-Tutorial:
http://www.w3schools.com/html5/default.aspHTML5 Official Anleitung: http://dev.w3.org/html5/html-author/
Eine ziemlich gute Anleitungs-Website: http://html5doctor.com/
HTML5-Chinesisch-Tutorial: http://www.html5china.com/
Ein gutes Frontend-Blog: http://www.pjhome.net/default.asp?cateID= 1