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 d015d241ae6d34c34210679b5204fe85

d015d241ae6d34c34210679b5204fe85 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 b97864c2e0ef2353a16c4d64c7734e92 Sie müssen nicht mehr auf Plug-ins von Drittanbietern zurückgreifen, um 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 e38861ae5062299d9e7329a953239830-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 f920514e6447cf1d171079d1371f007f-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 e388a4556c0f65e1904146cc1a846bee 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元素 
be6d67dae90cc1ad6469079e163d0939元素用来显示计算结果，也有一个和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!