Introduction détaillée de 28 nouvelles fonctionnalités de h5

1. Nouveau Doctype

Bien qu'il utilise 8b05045a5be5764f313ed5b9168a17e6, même si le navigateur ne comprend pas cette phrase, il sera rendu selon le mode standard

Vous pouvez également envisager d'utiliser le motif de boîte étrange

2. L'élément Figure
est représenté sémantiquement en utilisant 24203f2f45e6606542ba09fd2181843a figcaption> Image avec titre

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

3. Redéfinie d015d241ae6d34c34210679b5204fe85
d015d241ae6d34c34210679b5204fe85 mise en page, comme la déclaration de droit d'auteur au bas du site Web
4. Supprimez l'attribut type dans les balises de lien et de script
5 Ajouter/sans crochets
HTML5 n'a pas. exigences strictes Les attributs doivent être cités, fermés ou non, mais il est recommandé d'ajouter des guillemets et des balises de fermeture
6 Pour rendre votre contenu modifiable, ajoutez simplement un attribut contenteditable
7. Si nous définissons le type d'entrée sur email, le navigateur vérifiera si l'entrée est de type email. Bien sûr, nous ne pouvons pas nous fier uniquement à la vérification frontale, le back-end doit également avoir une vérification correspondante
.
8. Espaces réservés La signification de cet attribut d'entrée est qu'il n'est pas nécessaire d'utiliser javascript pour obtenir l'effet d'espace réservé

9. Stockage local pour stocker de manière permanente de gros fragments de données sur le client. (Sauf suppression active), actuellement pris en charge par la plupart des navigateurs, vous pouvez vérifier si window.localStorage existe avant de l'utiliser En-tête et pied de page sémantiques
. 11. Plus de fonctionnalités de formulaire HTML5
12. IE et HTML5
Par défaut, les nouveaux éléments HTML5 sont rendus en ligne, mais vous pouvez utiliser la méthode suivante pour que
les rende en mode bloc

Malheureusement, IE ignore ces styles. Vous pouvez les corriger comme suit :

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

13 hgroup

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

est généralement utilisé dans l'en-tête pour regrouper un. groupe de titres ensemble. Ensemble, tel que

14. Attribut obligatoire

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

L'attribut obligatoire définit si une entrée est requise comme suit Ou

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

15. Attribut Autofocus

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

Tout comme sa signification, il s'agit de se concentrer sur la zone de saisie

16. Prise en charge audio

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

HTML5 fournit la balise b97864c2e0ef2353a16c4d64c7734e92 Vous n'avez plus besoin de suivre les plug-ins tiers pour restituer

audio. prise en charge de l'audio HTML5, mais c'est toujours Certains traitements de compatibilité doivent être fournis, tels que
17 La prise en charge de la vidéo

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

est très similaire à l'audio. La balise video> prend en charge la vidéo. Étant donné que les documents HTML5 ne reçoivent pas d'encodage spécifique, le navigateur décide quels encodages prendre en charge, ce qui entraîne de nombreuses incohérences. Safari et IE prennent en charge le format d'encodage H.264, Firefox et Opera prennent en charge le format d'encodage Theora et Vorbis. Lorsque vous utilisez une vidéo HTML5, vous devez fournir les deux :

Préchargement

Vidéo <.>

<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>

L'attribut de préchargement est aussi simple que sa signification littérale Vous devez décider si vous devez précharger la vidéo lors du chargement de la page 19. Afficher la vidéo. control

<video preload>

20. Expression régulière

<video preload controls>

En raison de l'attribut pattern, nous pouvons l'utiliser directement dans votre balisage Expression régulière 21. Détection de la prise en charge des attributs

En plus de Modernizr, nous pouvons également simplement détecter si certains attributs sont pris en charge via javascript, tels que :

<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>

22. Élément Mark

Considérez l'élément f920514e6447cf1d171079d1371f007f 🎜>

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

23. Quand utiliser e388a4556c0f65e1904146cc1a846bee HTML5 a introduit tellement d'éléments, devons-nous donc toujours utiliser p ? Vous pouvez utiliser p lorsqu'il n'y a pas de meilleur élément.

24. Vous voulez utiliser HTML5 immédiatement ?

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

N'attendez pas 2022, vous pouvez l'utiliser maintenant, faites-le 25. 🎜>
1)SVG
2)CSS3 3)Géolocalisation 4)Stockage client
5)Sockets Web
26.
Utilisé en 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. 免费h5在线视频教程

2. HTML5 完整版手册

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!