Ausführliche Erläuterung von 28 sehr wichtigen neuen Funktionen, neuen Techniken und neuen Technologien von H5

HTML5 hat viele neue Funktionen. Sehr gut. Neuer Doctype
Obwohl 8b05045a5be5764f313ed5b9168a17e6 Browser nicht Wenn Sie diesen Satz verstehen, rendern Sie ihn gemäß dem Standardmodus
2. Das Figure-Element
verwendet 24203f2f45e6606542ba09fd2181843a, um Bilder semantisch darzustellen captions
< ;figure> 411a04e04084aac4dc3c2b23cee33246
614eb9dc63b3fb809437a716aa228d24 von etwas Interessantem. < ;/p>
44cb5dd5d12e801e7386125f9c811d57 , wird jetzt verwendet, um kleine Layouts darzustellen, wie z. B. die Copyright-Erklärung am Ende der Website

4. Entfernen Sie das Typattribut in den Link- und Skript-Tags
5
HTML5 Es gibt keine strenge Anforderung, dass Attribute in Anführungszeichen gesetzt oder geschlossen werden müssen, 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 hinzu7 . E-Mail-Eingaben
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-Überprüfung verlassen, sondern auch auf das Back-End haben eine entsprechende Überprüfung

8. Platzhalter
Die Bedeutung dieses Eingabeattributs besteht darin, dass kein Javascript verwendet werden muss, um den Platzhaltereffekt zu erzielen
9 >
Lokalen Speicher verwenden, um große Datenmengen dauerhaft zu speichern. Fragmente befinden sich auf der Clientseite (sofern sie nicht aktiv gelöscht werden), was derzeit von den meisten Browsern unterstützt wird. Sie können überprüfen, ob window.localStorage vorhanden ist, bevor Sie es verwenden
10 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 rendern Block Kopfzeile, Fußzeile, Artikel, Abschnitt, Navigation, Menü, Hgroup {
Anzeige: Block
} Leider ignoriert IE diese Stile, Sie können das Problem wie folgt beheben:
Dokument. createElement( "article");
document.createElement("footer");
document.createElement("hgroup"); "nav "); document.createElement("menu");

13 wird im Allgemeinen in der Kopfzeile verwendet, um eine Gruppe von Titeln zusammenzufassen, z >


14. Erforderliches Attribut

Das erforderliche Attribut definiert, ob eine Eingabe erforderlich ist. Sie können es wie folgt deklarieren
e085a0514398d728129336228122a3d4 oder
5d158ed37359eea35559f4792d98b6d6 Einfach so. Die Bedeutung des Wortes ist, sich auf das Eingabefeld zu konzentrieren
1a79a139b18aa2fa2e2938f91d40e93c

HTML5 bietet das Tag b97864c2e0ef2353a16c4d64c7734e92. Sie müssen nicht mehr auf Plug-ins von Drittanbietern zurückgreifen, um Audio zu rendern. Allerdings muss eine gewisse Kompatibilitätsverarbeitung bereitgestellt werden , wie zum Beispiel

17. Ähnlich wie bei Audio bietet das 39000f942b2545a5315c57fa3276f220 keine Unterstützung für Video B. eine bestimmte Kodierung für Videos. Es liegt am Browser, zu entscheiden, welche Kodierungen unterstützt werden sollen, was zu vielen Inkonsistenzen führt. Safari und IE unterstützen das Kodierungsformat H.264, Firefox und Opera unterstützen das Kodierungsformat Theora und Vorbis. Bei Verwendung von HTML5-Video müssen Sie beides bereitstellen:

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

18 🎜>
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.
d3a8c4e5df0e7175f6b4fdc16c0d2597

29c3a6473f5fa0d8d4a5d0f8c1d43e0b 20. Reguläre Ausdrücke

Aufgrund des Musterattributs können wir reguläre Ausdrücke direkt in Ihrem Markup verwenden


21. Attributunterstützung erkennen

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

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

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

22. Mark元素
把f920514e6447cf1d171079d1371f007f元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
684271ed9684bde649abda8831d4d355 Search Results 39528cedfa926ea0c01e69ef5b2ea9b0
e388a4556c0f65e1904146cc1a846bee They were interrupted, just after Quato said, f920514e6447cf1d171079d1371f007f”Open your Mind”ee15d5864733761b2441a93ca4c07fdb. 94b3e26ee717c64999d7867364b1b4a3
23. 什么时候用e388a4556c0f65e1904146cc1a846bee
HTML5已经引入了这么多元素，那么p我们还要用吗？p你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性

<p id=”myp” data-custom-attr=”My Value”> Bla Bla </p> 
CSS中使用： 
<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. HTML5免费视频教程

2. H5制作一个注册页面的代码实例

3. 教你用H5绘图的基础方法

4. 详解H5和HTML4的区别

5. H5制作一个计时器的代码演示

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von 28 sehr wichtigen neuen Funktionen, neuen Techniken und neuen Technologien von H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!