Die HTML -Elementerweiterung von HTML5 (Teil 1) - Neu hinzugefügte Elemente und Nutzungsübersicht

Autor：Eve Cole Aktualisierungszeit：2025-04-17 23:32:03

Betrachten Sie unseren Prozess der Entwicklung einer Seite :

1. Entwerfen Sie die Struktur der Seite - HTML: Dieser Prozess besteht darin, verschiedene HTML -Elemente zu verwenden, um die Struktur der Webseite zu erstellen.

2. Entwerfen Sie das Erscheinungsbild der Seite - CSS: Dieser Prozess besteht darin, CSS zu verwenden, um das Erscheinungsbild der Webseite zu verbessern.

3.. Entwurfsseitenverhalten - JavaScript: Dieser Prozess soll den Elementen der Webseite bestimmtes Verhalten geben.

Zusätzlich zu CSS wurde HTML5 in zwei weiteren Aspekten auf unterschiedliche Grad erweitert. Diese Serie konzentriert sich auf den ersten Aspekt. Im vorherigen Abschnitt haben wir die komplexen Elemente von Leinwand und SVG gelernt, und die folgenden Kapitel fassen andere hinzugefügte HTML5 -Elemente zusammen.

Strukturelemente

HTML5 hat neue strukturelle Elemente wie Header, Fußzeile, Navigations -NAV, Inhaltsartikel, Kapitelabschnitt usw. hinzugefügt. Die Bedeutung ist in der folgenden Abbildung dargestellt:

Zusätzlich zu den strukturellen Elementen der gesamten Seite fügt HTML5 auch semantische Elemente auf Blockebene hinzu, wie z. B. Hilfselemente, die Bildelemente, detaillierte Beschreibungselemente Details usw. Zusätzlich zur besseren Anzeige der Layout-Bedeutung der Seite müssen diese Elemente diese Elemente nicht unterscheiden. Hier ist ein kurzes Beispiel:

<html>

<kopf>

</head>

<body>

</header>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Artikel 1 </a> </h2>

<p> Einführung </p>

</article>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Artikel 2 </a> </h2>

<p> Einführung </p>

</article>

<nav>

</nav>

</Abschnitt>

<nav>

<ul>

<li> <h2> Informationen </h2>

<ul>

<li> <a href = "http://www.vevb.com/dxy1982/"> Richtlinie </a> </li>

<li> <a href = "http://www.vevb.com/dxy1982/"> Liste </a> </li>

</ul> </li>

<li> <h2> Artikel </H2>

<ul>

<li> <a href = '/blog/2007/04/'> Januar </a> </li>

<li> <a href = '/blog/2007/03/'> Februar </a> </li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

Obwohl diese Elemente relativ einfach zu verwenden sind, müssen noch einige Punkte bezeichnet werden :

1. Verwenden Sie keinen Abschnitt als Ersatz für Div

Abschnitt ist kein Stilbehälter. Das Abschnittselement repräsentiert den semantischen Teil des Inhalts, mit dem eine Dokumentzusammenfassung erstellt wird. Es sollte einen Kopfball enthalten. Es existiert normalerweise als der meiste Artikel (natürlich ist es auch für den Artikel als seinen Teil möglich). Wenn Sie ein Element finden möchten, das als Seitenbehälter verwendet wird oder einen zusätzlichen Stilbehälter benötigt, verwenden Sie weiterhin Div.

2. Verwenden Sie bei Bedarf nur Header und Hgroup

Es ist bedeutungslos, Etiketten zu schreiben, die nicht geschrieben werden müssen. Die Nutzungsszenarien von Header und Hgroup sind normalerweise wie folgt:

• Das Header -Element repräsentiert eine Reihe von Einführungs- oder Navigationshilfentext, die häufig als Header des Abschnitts verwendet werden.

• Wenn der Kopf über eine mehrschichtige Struktur wie Untertitel, Untertitel, verschiedene Logo-Texte usw. verfügt, verwenden Sie die Hggroup, um H1-H6-Elemente als Kopf des Abschnitts zu kombinieren.

Wenn der Header oder die Hgroup nur ein paar Kopfelemente haben, ist es besser, diese beiden nutzlosen Tags zu entfernen, zum Beispiel:

<h1> Mein bester Blog -Beitrag </h1>

</header>

<!-Artikelinhalte->

</article>

Ändern Sie direkt an:

<h1> Mein bester Blog -Beitrag </h1>

<!-Artikelinhalte->

</article>

Das gleiche gilt für:

<h1> Mein bester Blog -Beitrag </h1>

</hgroup>

<p> von Rich Clark </p>

</header>

Ändern Sie es direkt in:

<h1> Mein bester Blog -Beitrag </h1>

<p> von Rich Clark </p>

</header>

3. Missbrauche NAV nicht

Das NAV -Element stellt einen Block auf der Seite dar, der zu anderen Seiten oder anderen Teilen dieser Seite verlinkt. Ein Block mit Navigationsverbindungen.

Aber nicht alle Links auf der Seite müssen im Navigationselement platziert werden - dieses Element soll als Hauptnavigationsblock verwendet werden. Um ein bestimmtes Beispiel zu geben, gibt es oft viele Links in den Fußzeile, wie z. B. Service, Homepage, Copyright -Hinweise usw. Das Fußzellelement selbst reicht aus, um mit diesen Situationen fertig zu werden. Obwohl das NAV -Element auch hier verwendet werden kann, wird es normalerweise als unnötig angesehen.

4. Missbrauche Figur nicht

Die Abbildung sollte ein Flüssigkeitsinhalt sein, und manchmal wird eine Titelbeschreibung enthalten. Im Allgemeinen wird es als unabhängige Einheit im Dokumentstrom bezeichnet. Dies ist das beste Szenario für die Abbildung - es kann von der Hauptinhaltsseite in die Seitenleiste verschoben werden, ohne den Dokumentfluss zu beeinflussen. Die Abbildung sollte nur im Dokument verwiesen werden oder von Abschnittselementen umgeben sein.

Wenn Sie sich nur für die Darstellung des Bildes (z. B. das Logo), nicht an anderer Stelle im Dokument einsetzen, müssen Sie den Ort nicht verschieben, dann verwenden Sie keine Abbildung.

5. Verwenden Sie keine unnötigen Typattribute

In HTML5 erfordern Skript- und Stilelemente keine Typattribute mehr. Natürlich gibt es kein Problem mit dem Schreiben, aber aus der Perspektive der bewährten Praxis besteht kein Schreiben nicht.

Audioelemente

Audioelemente werden verwendet, um solide Inhalte wie Musik oder andere Audio -Stream zu identifizieren. Die von diesem Element unterstützten Formate sind in der folgenden Tabelle angezeigt:

	Dh 9	Firefox 3.5	Opera 10.5	Chrom 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wave		√	√		√

Das Audio -Tag verfügt über einige Attribute, mit denen der Inhalt gesteuert wird, wann und wie das Audio gespielt wird usw. Diese Attribute sind: SRC (Dateiname), Vorspannung (Laden, wenn die Seite geladen wird), Steuerelemente (Steuerelement), Schleife (Schleife) und Autoplay (Autoplay). Im folgenden Beispiel wird die Seite abgespielt, sobald das Audio geladen ist, und sie wird weiter spielen. Die bereitgestellten Steuerelemente können es dem Benutzer ermöglichen, die Wiedergabe des Audio -Audios zu stoppen oder neu zu starten:

<audio src = "myfirstmusic.ogg" steuert

Ihr Browser unterstützt keine Audioelemente.

</audio>

Wenn der Browser das Element nicht unterstützt, werden die Textinformationen des Elements angezeigt.

Wenn das Autoplay -Element festgelegt ist, wird die Vorladungseigenschaft automatisch ignoriert. Wenn vorlad = automatisch eingestellt ist, wird das Audio nach dem Laden der Seite geladen.

Das Audioelement ermöglicht das Angeben mehrerer Quellelemente, die mit dem Browser kompatibel sind. Das Quellelement kann verschiedene Audio -Dateien verknüpfen. Der Browser verwendet das erste erkennbare Format:

<Audio>

Ihr Browser unterstützt keine Audioelemente.

</audio>

Videoelemente

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

Format	Dh	Firefox	Oper	Chrom	Safari
Ogg	NEIN	3.5+	10.5+	5.0+	NEIN
MPEG 4	9.0+	NEIN	NEIN	5.0+	3.0+
Webm	NEIN	4.0+	10.6+	6.0+	NEIN

Es hat alle Attribute des Audioelements plus: gedämpft, Poster (Warten auf Bild), Breite und Höhe. Unnötig zu erwähnen, die letzten beiden Bedeutungen. Wenn das Video geladen wird oder sich das Video in einem Zustand ohne Laden befindet, können Sie das Poster -Attribut (Angabe einer absoluten oder relativen URL) ermöglicht, ein Bild zuerst zu finden. gedämpfte Mittelstummel.

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

Ihr Browser unterstützt keine Videoelemente.

</Video>

Wenn Sie den Video -Sound nicht abspielen möchten, setzen Sie STURDED = Stummel.

Darüber hinaus bietet das Videoelement auch einige Methoden, Eigenschaften und Ereignisse, um den Prozess der Steuerung der Wiedergabe in DOM -Operationen zu unterstützen. Zum Beispiel Elemente zum Spielen, Pause, Laden und anderen Methoden aufrufen. Es gibt auch Eigenschaften wie Lautstärke und Wiedergabezeit, die direkt gelesen oder festgelegt werden können. Darüber hinaus gibt es Ereignisse, die Wiedergabe, Pause, Ende usw. beginnen, die verwendet werden können. Siehe das folgende Beispiel:

<! DocType html>

<html>

<body>

<button onclick = "Playpause ()"> Play/Pause </button>

<button onclick = "makeMall ()"> klein </button>

<button onclick = "makenormal ()"> normal </button>

Ihr Browser unterstützt keine Videoelemente.

</Video>

</div>

var myvideo = document.getElementById ("Video1");

Funktionsplaypause ()

{

if (myvideo.pause)

myvideo.play ();

anders

myvideo.pause ();

}

Funktion Makebig ()

{

myvideo.width = 560;

}

Funktion makemall ()

{

myvideo.width = 320;

}

Funktion Makenormal ()

{

myvideo.width = 420;

}

</script>

</body>

</html>

Tatsächlich müssen wir auf eine neue Art des Schreibens achten: Im obigen Beispiel schreiben wir solche Audioelemente wie folgt:

<audio src = "myfirstmusic.ogg" steuert

Ihr Browser unterstützt keine Audioelemente.

</audio>

Tatsächlich werden in HTML5 viele Artikelsteuerungen, Autoplay und Schleife eingeführt. Diese Eigenschaften sind in Ordnung für Sie, sie wie die oben genannten zu schreiben, aber die empfohlene Möglichkeit besteht darin, sie wie folgt zu schreiben:

Ihr Browser unterstützt keine Audioelemente.

</audio>

Da der Browser auf diese Eigenschaften trifft, bedeutet dies, dass diese Eigenschaften aktiviert sind. Das heißt, wenn Sie diese Eigenschaften schreiben und auf false fest gesetzt sind, ist der Effekt immer noch gleichwertig. Daher wird im Allgemeinen empfohlen, den Attributnamen nur zu schreiben.

Dieses Schreibproblem existiert auch in Form. Viele neue Eigenschaften von Form und Input sind die Booleschen Eigenschaften, und die empfohlene Schreibmethode sollte verwendet werden.

Elemente, die die Metrik anzeigen

Nicht jeder Browser unterstützt die folgenden Elemente, aber Sie können die Auswirkungen auf Chrom im Grunde genommen erkennen.

Fortschrittsbalkenelement

Verwenden Sie dieses Element, um die heruntergeladene Fortschrittsleiste mit nur zwei Attributen anzuzeigen: Wert und Max, was sehr einfach ist. Chrome und Firefox werden unterstützt.

<P> Fortschritt herunterladen:

</p>

Metrische Elemente

Verwenden Sie dieses Element, um den angegebenen Wert in der Standardbereichsklasse anzuzeigen, die das Indikationsdiagramm angibt, und die Werte in verschiedenen Bereichen zeigen unterschiedliche Farben. Einige Websites verwenden dieses Ding, um den aktuellen Erfahrungswert des Benutzers anzuzeigen. Wenn der Browser dieses Element nicht unterstützt, wird der Text in der Mitte des Elements direkt angezeigt. Chrome wird derzeit unterstützt.

<p> Ihre Punktzahl ist:

<Meter Wert = "88,7" min = "0" max = "100" low = "65" High = "96" optimum = "100"> B+</meter>.

</p>

Führen Sie es aus und Sie werden ein gelbes Scrollbar-ähnliches Ding sehen. Wenn Sie den Wert auf 50 ändern, werden Sie feststellen, dass die Farbe der Indikatorleiste rot programmiert ist.

Es gibt so viele neue Elementeinführungen. Weitere Elementbeschreibungen finden Sie in der vollständigen Tag -Liste in W3C.

Praktische Referenz:

W3C Tutorial: http://www.w3schools.com/html5/default.asp

Offizielle HTML5-Leitlinien: http://dev.w3.org/html5/html-author/

Eine ziemlich gute Führungswebsite: http://html5doctor.com/

HTML5 Chinesisches Tutorial: http://www.html5china.com/

Ein guter Front-End-Blog: http://www.pjhome.net/default.asp?cateId=1