Commentaire: HTML5 a de nombreuses nouvelles fonctionnalités. Nouveau code. Très bien. Résumons-le maintenant. Pour référence uniquement
1. Nouveau doctypeMême si le navigateur ne comprend pas cette phrase, elle rendra selon le mode standard.
2. Éléments de figure
Utilisez <stigne> et <figcaption> pour représenter sémantiquement des images avec des titres
<Figure>
<img src = path / to / image alt = À propos d'image />
<Figcaption>
<p> C'est une image de quelque chose d'intéressant. </p>
</ figCaption>
</ figure>
3. Redéfini <small>
<small> a été redéfini et est maintenant utilisé pour représenter de petites compositions, comme l'avis de droit d'auteur au bas du site Web
4. Supprimez les attributs de type dans les balises de lien et de script
5. Ajouter / pas de supports
HTML5 ne nécessite pas que les attributs doivent être cités et fermés ou non, mais il est recommandé d'ajouter des citations et des balises fermées.
6. Rendez votre contenu modifiable, ajoutez simplement une propriété satisfait
7. E-mail des entrées
Si nous définissons le type d'entrée par e-mail, le navigateur vérifiera si l'entrée est le type de messagerie. Bien sûr, nous ne pouvons pas compter uniquement sur la vérification frontale, et le back-end doit également avoir une vérification correspondante.
8. Placers
La signification de cet attribut d'entrée est qu'il n'est pas nécessaire d'utiliser JavaScript pour créer l'effet de l'espace réservé
9. Stockage local
Utilisez le stockage local pour stocker en permanence de grands fragments de données sur le client (sauf supprimer activement). Actuellement, la plupart des navigateurs les ont déjà soutenus. Vous pouvez vérifier si Window.Localstorage existe avant de les utiliser.
10. En-tête sémantique et pied de page
11. Plus de fonctions de formulaire HTML5
12. IE et HTML5
Par défaut, les nouveaux éléments HTML5 sont rendus en ligne, mais la méthode suivante peut être utilisée pour faire
Il est rendu en mode bloc
En-tête, pied de page, article, section, navigation, menu, hgroup {
Affichage: bloc;
}
Malheureusement, IE ignore ces styles et peut réparer comme ceci:
Document.CreateElement (article);
document.CreateElement (pied de page);
document.CreateElement (en-tête);
Document.CreateElement (HGroup);
Document.CreateElement (NAV);
document.CreateElement (menu);
13. HGroup
Il est généralement utilisé pour combiner un ensemble de titres dans l'en-tête, comme
<dique>
<hgroup>
<h1> Rappeler la page du ventilateur </h1>
<h2> uniquement pour les personnes qui veulent la mémoire d'une vie. </h2>
</hgroup>
</-header>
14. Attribut requis
La propriété requise définit si une entrée est requise, vous pouvez le déclarer comme ci-dessous
<Type d'entrée = nom de texte = certains obligations requises>
ou
<entrée Type = Nom du texte = SomeInput requis = requis>
15. Propriétés de l'autofocus
Tout comme sa signification, c'est pour se concentrer sur la boîte d'entrée
<Type d'entrée = Nom de texte = SomeInput Planterholder = Douglas Quaid requis Autofocus>
16. Support audio
HTML5 fournit des balises <faudio>, vous n'avez plus besoin de rendre l'audio en fonction des plug-ins tiers. La plupart des navigateurs modernes soutiennent l'audio HTML5, mais il doit encore fournir un traitement de compatibilité, tel que
<Audio AutoPlay = AutoPlay Controls = Controls>
<source src = file.ogg /> <! - ff ->
<source src = file.mp3 ″ /> <! - webkit ->
<a href = file.mp3 ″> Téléchargez ce fichier. </a>
</ audio>
17. Support vidéo
Tout comme l'audio, la balise <video> prend en charge la vidéo. Étant donné que le document HTML5 ne spécifie pas de codage spécifique pour la vidéo, le navigateur décide quels codages à soutenir, ce qui conduit à de nombreuses incohérences. Safari et IE prennent en charge les formats de codage H.264, les formats de codage Firefox et Opera Support Theora et Vorbis. Lorsque vous utilisez la vidéo HTML5, vous devez tous deux fournir:
<Contrôles vidéo Preload>
<source src = cohagenphonecall.ogv type = vidéo / ogg; codecs = 'vorbis, theora' />
<source src = cohagenphonecall.mp4 ″ type = vidéo / mp4; 'codecs =' avc1.42e01e, mp4a.40.2 '/>
<p> Votre navigateur est vieux. <a href = cohagenphonecall.mp4 ″> Téléchargez cette vidéo à la place. </a> </p>
</ vidéo>
18. Video de précharge
La propriété de précharge est aussi simple que cela signifie littéralement, et vous devez décider si vous devez précharger la vidéo lorsque la page se charge
<précharge vidéo>
19. Afficher le contrôle vidéo
<Contrôles de précharge vidéo>
20. Expressions régulières
En raison de l'attribut de modèle, nous pouvons utiliser directement des expressions régulières dans votre balisage
<formulaire d'action = méthode = post>
<étiquette pour = nom d'utilisateur> Créez un nom d'utilisateur: </ label>
<input type = text name = username id = username placeholder = 4 <> 10 ″ motive = [a-za-z] {4,10} Autofocus requis>
<Button Type = Soumider> Go </ Button>
</ form>
21. Prise en charge de l'attribut de détection
En plus de Modernizr, nous pouvons également utiliser JavaScript pour détecter simplement si certaines propriétés sont prises en charge, telles que:
<cript>
if (! 'modèle' dans document.CreateElement ('Input')) {
// Validation côté client / serveur
}
</cript>
22. Mark Elements
Considérez l'élément <mark> comme en surbrillance. Lorsque je sélectionne un paragraphe de texte, l'effet de balisage de JavaScript sur HTML devrait être le suivant:
<h3> Résultats de recherche </h3>
<p> Ils ont été interrompus, juste après que Quato a dit, <Mark> ouvrez votre esprit </cark>. </p>
23. Quand utiliser <v>
HTML5 a introduit tant d'éléments, alors devons-nous encore utiliser Div? Vous pouvez utiliser Div lorsqu'il n'y a pas de meilleurs éléments.
24. Vous voulez utiliser HTML5 maintenant?
N'attendez pas 2022, il est prêt à l'emploi maintenant, faites-le.
25. Que ne sont pas HTML5
1) SVG
2) CSS3
3) Géolocalisation
4) Stockage client
5) Sockets Web
26. Propriétés de données
<div id = mydiv data-custom-attr = ma valeur> bla bla </div>
Utilisé dans CSS:
<style>
H1: Hover: After {
Contenu: ATR (Data-Hover-Response);
Couleur: noir;
Position: absolue;
à gauche: 0;
}
</ style>
<H1 Data-Hover-Response = J'ai dit ne me touche pas!> Ne me touchez pas </h1>
27. Élément de sortie
L'élément <utput> est utilisé pour afficher les résultats du calcul, et il a également un étiquette pour l'attribut.
28. Utilisez l'entrée de la plage pour créer des curseurs
Le type de plage référencé par HTML5 peut créer un curseur, qui accepte les propriétés Min, Max, Step et Value
Vous pouvez utiliser CSS ': avant et: après afficher les valeurs de Min et Max
<Type d'entrée = nom de la plage = plage min = 0 ″ max = 10 ″ étape = 1 ″ Valeur =>
entrée [type = plage]: avant {contenu: attr (min); rembourrage à droite: 5px;
}
entrée [type = plage]: après {contenu: attr (max); padding-gauche: 5px;}