Detaillierte Einführung von 28 neuen Funktionen von h5

1. Neuer Doctype

Auch wenn der Browser diesen Satz nicht versteht, wird er gemäß dem Standardmodus gerendert

Sie können auch die Verwendung des seltsamen Boxmusters

2 in Betracht ziehen. figcaption> Bild mit Titel
3. Neu definiert

Layout, z. B. die Copyright-Erklärung am Ende der Website

<figure> 
<img src=”path/to/image” alt=”About image” /> 
<figcaption> 
<p>This is an image of something interesting. </p> 
</figcaption> 
</figure>

4. Entfernen Sie das Typattribut in den Link- und Skript-Tags 5. Fügen Sie Klammern hinzu
HTML5 ist nicht vorhanden Strenge Anforderungen Attribute müssen in Anführungszeichen gesetzt werden, geschlossen oder nicht, es wird jedoch empfohlen, Anführungszeichen und schließende Tags hinzuzufügen
6 Um Ihren Inhalt bearbeitbar zu machen, fügen Sie einfach ein inhaltsbearbeitbares Attribut hinzu
7 Wenn wir den Eingabetyp auf E-Mail setzen, überprüft der Browser, ob es sich bei der Eingabe um einen E-Mail-Typ handelt. Natürlich können wir uns nicht nur auf die Front-End-Verifizierung verlassen, auch das Back-End muss über eine entsprechende Überprüfung verfügen

8. Platzhalter
Die Bedeutung dieses Eingabeattributs besteht darin, dass kein Javascript verwendet werden muss, um den Platzhaltereffekt zu erzielen
Verwendung Lokaler Speicher zum dauerhaften Speichern großer Datenfragmente auf dem Client (sofern nicht aktiv gelöscht), der derzeit von den meisten Browsern unterstützt wird. Sie können überprüfen, ob window.localStorage vorhanden ist, bevor Sie ihn verwenden
Semantische Kopf- und Fußzeile 11. Weitere HTML5-Formularfunktionen
12. IE und HTML5
Standardmäßig werden neue HTML5-Elemente inline gerendert, Sie können sie jedoch mit der folgenden Methode im Blockmodus rendern

Leider ignoriert der IE diese Stile wie folgt:


13. hgroup

wird im Allgemeinen in der Kopfzeile verwendet, um a zu gruppieren Gruppe von Titeln zusammen, wie zum Beispiel

header, footer, article, section, nav, menu, hgroup { 
display: block; 
}

document.createElement(”article”); 
document.createElement(”footer”); 
document.createElement(”header”); 
document.createElement(”hgroup”); 
document.createElement(”nav”); 
document.createElement(”menu”);

14. Erforderliches Attribut

Das erforderliche Attribut definiert, ob eine Eingabe erforderlich ist

Oder

<header> 
<hgroup> 
<h1> Recall Fan Page </h1> 
<h2> Only for people who want the memory of a lifetime. </h2> 
</hgroup> 
</header>

15. Autofokus-Attribut

Genau wie seine Bedeutung besteht es darin, sich auf das Eingabefeld zu konzentrieren

<input type=”text” name=”someInput” required>

<input type=”text” name=”someInput” required=”required”>

16. Audio-Unterstützung

HTML5 bietet das Tag Audio
bereitzustellen Unterstützung für HTML5-Audio, es muss jedoch noch eine gewisse Kompatibilitätsverarbeitung bereitgestellt werden, z. B.

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

17. Die Videounterstützung ist der von < Das Video>-Tag bietet Unterstützung für Video. Da HTML5-Dokumenten keine bestimmte Kodierung zugewiesen ist, entscheidet der Browser, welche Kodierungen unterstützt werden, was zu vielen Inkonsistenzen führt. Safari und IE unterstützen das H.264-Kodierungsformat, Firefox und Opera unterstützen das Theora- und Vorbis-Kodierungsformat. Wenn Sie HTML5-Video verwenden, müssen Sie beides bereitstellen:
18 🎜>

<audio autoplay=”autoplay” controls=”controls”> 
<source src=”file.ogg” /><!–FF–> 
<source src=”file.mp3″ /><!–Webkit–> 
<a href=”file.mp3″>Download this file.</a> 
</audio>

Das Preload-Attribut ist so einfach wie seine wörtliche Bedeutung. Sie müssen entscheiden, ob Sie das Video vorab laden müssen, wenn die Seite geladen wird

19. Video anzeigen Steuerung

<video controls preload> 
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” /> 
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” /> 
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p> 
</video>

20. Regulärer Ausdruck

Aufgrund des Musterattributs können wir es direkt in Ihrem Markup verwenden. Regulärer Ausdruck

<video preload>

21. Attributunterstützung erkennen

<video preload controls>

Zusätzlich zu Modernizr können wir auch einfach erkennen, ob einige Attribute durch Javascript unterstützt werden, wie zum Beispiel:

22. Mark-Element
Stellen Sie sich das -Element als Hervorhebung vor. Der Markup-Effekt von Javascript auf HTML sollte wie folgt aussehen:

<form action=”" method=”post”> 
<label for=”username”>Create a Username: </label> 
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required> 
<button type=”submit”>Go </button> 
</form>

23. Wann sollte

verwendet werden?
HTML5 hat so viele Elemente eingeführt, müssen wir also immer noch p verwenden? Sie können p verwenden, wenn es kein besseres Element gibt.

<script> 
if (!’pattern’ in document.createElement(’input’) ) { 
// do client/server side validation 
} 
</script>

24. Möchten Sie HTML5 sofort nutzen?

Warten Sie nicht bis 2022, Sie können es einfach tun
Was ist kein HTML5? 🎜>

1)SVG

<h3> Search Results </h3> 
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>

2)CSS3

3)Geolocation 4)Client-Speicher 5)Web Sockets

26. Datenattribut

Wird in CSS verwendet:

<style> 
h1:hover:after { 
content: attr(data-hover-response); 
color: black; 
position: absolute; 
left: 0; 
} 
</style> 
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>

27. Output元素

元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"> 
input[type=range]:before { content: attr(min); padding-right: 5px; 
} 
input[type=range]:after { content: attr(max); padding-left: 5px;}

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung von 28 neuen Funktionen von h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!