Das obige Kapitel spricht über die ersten sieben Fähigkeiten von HTML5 und lernt nun neue Fähigkeiten.
8. Platzhalter
Zuvor mussten wir JavaScript verwenden, um Platzhalter für Textfelder zu erstellen. Sie können zunächst das Wert -Attribut festlegen, um festzustellen, ob es angemessen ist. Solange der Benutzer den Text löscht, wird der Eingabeinhalt jedoch wieder leer. Das Platzhalterattribut kompensiert dies effektiv.
<Eingabe name = E -Mail type = E -Mail [email protected] />
9. Lokaler Speicher
Dank des lokalen Speichers von HTML5 können wir uns erweiterte Browser erinnern lassen, was wir betreten haben, und selbst wenn der Browser später geschlossen oder aktualisiert wird, wird er nicht betroffen. Obwohl nicht alle Browser es unterstützen, ist der kritischste Internet Explorer 8, Safari 4, Firefox 3.5.
10. Semantische Header und Fußzeile
<div id = header>
…
</div>
<div id = footer>
…
</div>
Vorbei sind der Code oben. Divs hat grundsätzlich keine semantische Struktur, auch wenn die ID angewendet wird. In HTML5 können wir die Elemente <Header> und <footer> verwenden, und der obige Code kann ersetzt werden durch:
<Header>
…
</header>
<fouter>
…
</footer>
Achten Sie darauf, diese beiden Elemente nicht mit dem Kopf und den Füßen der Website zu verwechseln. Sie sind nur Behälter, die sie darstellen.
11. dh und html5
Es braucht viel Geld, um die neuen HTML5 -Elemente zu verstehen. Um sicherzustellen, dass die neuen HTML5-Elemente als Elemente auf Blockebene korrekt angezeigt werden können, muss der Stil mit dem folgenden Code definiert werden:
Header, Fußzeile, Artikel, Abschnitt, NAV, Menü, Hgroup {
Anzeige: Block;
}
Trotzdem weiß der IE immer noch nicht, was diese Elemente sind. Daher ignoriert es diese Formate und muss den folgenden Code verwenden, um dieses Problem zu lösen:
Dokument.Createelement (Artikel);
Dokument.Createelement (Fußzeile);
document.createelement (Header);
document.createelement (hgroup);
document.createelement (NAV);
document.createelement (Menü);
12. Gruppentitel (Hgroup)
Angenommen, eine Website enthält einen Namen und Untertitel -Tags, die mit <H1> bzw. <h2> -Tags markiert werden können. In HTML4 gibt es keine Möglichkeit, die Beziehung zwischen beiden mit einer guten semantischen Beziehung zu beschreiben. Bei Verwendung von H2 zur Anzeige anderer Titel auf der Seite gibt es außerdem mehr Probleme in Bezug auf die Hierarchie. Mit dem Gruppentitel HGroup -Element können wir diese Titel zusammenstellen, ohne den gesamten Umriss des Dokuments zu beeinflussen.
<Header>
<hgroup>
<h1> Rückruf -Fanseite </h1>
<h2> Nur für Menschen, die die Erinnerung an ein Leben lang wollen. </h2>
</hgroup>
</header>
13. Erforderliche Attribute
Das Formular ermöglicht neue notwendige Eigenschaften und geben an, ob eine bestimmte Eingabe erforderlich ist. Sie können dieses Attribut auf die folgenden zwei verschiedenen Arten entsprechend Ihren eigenen Vorlieben für das Schreiben von Code deklarieren:
<Eingabe type = textname = etwas erforderlich> erforderlich>
Oder strenger:
<Eingabe type = textname = ein bisschen put erforderlich = Erforderlich>
Beide Codezeilen oben arbeiten. Nachdem diese Codezeile verwendet wird und der Browser das erforderliche Attribut unterstützt, wird das leere Formular nicht eingereicht. Hier ist ein einfaches Beispiel, und wir haben auch das Platzhalterattribut hinzugefügt:
<formmethode = post action =>
<Label für = einigeInput> Ihr Name: </label>
<Eingabe type = text id = seltsinput name = seltsput placeholder = douglas quaid erforderlich>
<Schaltfläche Typ = Senden> Go </button>
</form>
Wenn die Eingabe leer ist, wird das Formular nicht eingereicht, wodurch das Textfeld hervorgehoben wird.
14. Autofokusattribute
In ähnlicher Weise werden bei HTML5 JavaScript -Lösungen nicht mehr benötigt, um das Problem des Autofokus zu lösen. Wenn eine Eingabe ausgewählt oder fokussiert werden sollte, können wir jetzt die Autofocus -Eigenschaft von HTML verwenden.
<Eingabe type = text name = seltsInput placeholder = douglas quaid erfordert Autofokus>
15. Audiounterstützung
Wir müssen uns nicht mehr auf Plugins von Drittanbietern verlassen, um Audio bereitzustellen. HTML5 bietet Audio -Element <Audio>. Derzeit unterstützen nur die neuesten Browser HTML5 -Audio. Zu diesem Zeitpunkt ist es besser, eine Rückwärtskompatibilität zu bieten.
<audio autoplay = autoplay steuerungssteuerungen = controllen>
<Source Src = Datei.ogg />
<Source Src = Datei.mp3 ″ />
<a href = file.mp3 ″> Diese Datei laden Sie herunter. </a>
</audio>
Apropos Audioformate, weder Mozilla noch Webkit haben es vollständig unterstützt. Firefox möchte eine .ogg -Datei sehen, und der Webkit -Browser unterstützt nur die häufigste .mp3 -Erweiterung. Dies bedeutet, dass Sie zumindest bisher zwei Audioversionen erstellen sollten. Wenn Safari die Seite lädt, erkennt sie die .OGG -Formatdatei nicht und wird übersprungen und in die MP3 -Version verschoben. Bitte beachten Sie, dass der IE es nicht unterstützt, und Opera 10 oder niedriger unterstützt nur .wav -Dateien.