HTML5 Conseils 1: La vitesse du développement de la technologie aujourd'hui est incroyable. Si vous ne faites pas attention, vous ne pourrez peut-être pas le suivre. Le développement de la nouvelle génération de HTML-HTML5 continue de nous apporter de nouvelles surprises. Nous vous présenterons des techniques HTML via cet article.
1. Nouveau type de document (doctype)
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Utilisez-vous toujours le type de document XHTML ci-dessus qui est à la fois gênant et difficile à retenir? Si c'est toujours le cas, il est temps de passer au nouveau type de document HTML5.
<! Doctype html>
Maintenant, cela ne prend que 15 caractères aussi simples. (Remarque: votre déclaration Doctype doit apparaître sur la première ligne de votre fichier HTML.)
2. Éléments graphiques (figure)
Envisagez-vous toujours d'utiliser le code suivant pour marquer des images?
<mg src = path / to / image alt = À propos d'image />
<p> Image de Mars. </p>
Le code ci-dessus ne peut pas être associé au titre du graphique de manière simple et sémantique, car il est simplement enveloppé de marques de paragraphe et d'éléments d'image, et HTML5 améliore cela en introduisant des éléments <Figure>. Lorsqu'il est utilisé en conjonction avec l'élément <FigCaption>, nous pouvons coupler le titre graphique avec le graphique. Le code est le suivant:
<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éfinir <small>
Il s'avère que vous pouvez utiliser l'élément <small> pour créer des sous-titres étroitement liés au logo. Cependant, maintenant HTML5 a modifié cette utilisation, et l'élément <small> a été redéfini, ou plus de manière appropriée, il est maintenant utilisé pour représenter de petits mots ou d'autres notes latérales (comme un avis de droit d'auteur au bas du site Web).
4. Aucun plus de scripts ou de types de liens ne sont nécessaires
Très probablement, vous ajoutez toujours des propriétés de type à vos liens et balises de script comme le code ci-dessous.
<link rel = Stylesheet href = path / to / styleheet.css type = text / css />
<script type = text / javascript src = path / to / script.js> </ script>
Dans HTML5, ce n'est plus nécessaire. Cela signifie que ces deux étiquettes représentent respectivement les styles et les scripts. Par conséquent, nous pouvons supprimer tous leurs attributs de type. Le code est le suivant:
<link rel = Stylesheet href = path / to / styleheet.css />
<script src = path / to / script.js> </ script>
5. Utiliser ou ne pas utiliser des devis
N'oubliez pas que HTML5 est différent de XHTML, et vous n'avez pas à envelopper les attributs en citations si vous ne l'aimez pas. Cependant, si vous pensez que l'utilisation de citations vous mettra plus à l'aise, bien sûr, il n'y aura pas de problèmes.
<p class = myClass id = someId> Démarrez le réacteur.
6. Rendez votre contenu modifiable
L'une des fonctionnalités très puissantes de HTML5 est contenant, ce qui, comme son nom l'indique, permettra à l'utilisateur de modifier tout contenu texte contenu dans un élément (y compris ses éléments enfants). Il a une large gamme d'utilisations, telles que des listes de tâches simples ou des sites basés sur le wiki, et l'un de ses avantages est qu'il utilise le stockage local.
<! Doctype html>
<html lang = en>
<adal>
<Meta Charset = UTF-8 ″>
<Title> Untitled </Title>
</ head>
<body>
<h2> liste de tâches </h2>
<ul ContentEdIT = true>
<li> Briser le conducteur de la cabine mécanique. </li>
<li> Conduire à l'usine abandonnée
<li> Regardez la vidéo de soi </li>
</ul>
</docy>
</html>
Ou, comme le dit la cinquième astuce, vous pouvez également écrire le code sur la ligne neuf comme celui-ci (sans devis):
<ul ContentEdIT = true>
7. Email Entrée
Si nous appliquons le type d'e-mail pour spécifier le formulaire de l'entrée, nous pouvons commander le navigateur pour autoriser uniquement les entrées de chaîne qui se conforment à la structure d'adresse e-mail valide. Bien que la vérification du formulaire intégré arrivera bientôt, nous ne pouvons pas compter entièrement à ce sujet. Les navigateurs plus âgés ne comprennent pas ce type de messagerie, ils reviennent simplement à la zone de texte normale.
<! Doctype html>
<html lang = en>
<adal>
<Meta Charset = UTF-8 ″>
<Title> Untitled </Title>
</ head>
<body>
<formulaire d'action = méthode = get>
<étiquette pour = e-mail> e-mail: </abétique>
<entrée id = nom e-mail = Type de messagerie = e-mail />
<Button Type = Soumettre> Soumettre le formulaire </fontificateur>
</ form>
</docy>
</html>
En ce qui concerne les éléments et les attributs que le navigateur prend en charge et ne prend pas en charge, vous devez savoir que tous les navigateurs ne sont pas si fiables à l'heure actuelle. Par exemple, Opera prend en charge la vérification par e-mail uniquement que si vous spécifiez l'attribut de nom. Cependant, il ne prend pas en charge l'attribut d'espace réservé (comme nous sera discuté ci-dessous). Enfin, bien que vous puissiez utiliser cette forme de vérification, ne comptez pas trop dessus.