Maison > Article > interface Web > Normes de codage HTML
Spécifications de codage HTML
L'objectif de ce document est de rendre le style de code HTML cohérent et facile à comprendre et à maintenir si vous le faites. Si vous n'avez pas cette habitude, veuillez choisir votre IDE avec soin et n'utilisez plus d'"éditeur de texte".
1 Style de code
1.1 Indentation et sauts de ligne
[Obligatoire] Utiliser 4 espaces comme retrait Niveau, 2 les espaces ou les tabulations ne sont pas autorisés.
Exemple :
<ul> <li>first</li> <li>second</li> </ul>
[Recommandation] Maximum 120 caractères par ligne.
Explication :
Un code trop long n'est pas facile à lire et à maintenir. Cependant, compte tenu de la particularité du HTML, il n'y a pas d'exigences strictes. Sublime, phpstorm, wenstorm, etc. ont tous des fonctions de règle.
1.2 Dénomination
La classe [Obligatoire] doit contenir uniquement des lettres minuscules et les mots doivent être séparés par -.
La classe [Obligatoire] doit représenter le contenu ou la fonction du module ou du composant correspondant et ne peut pas être nommée avec des informations de style.
Exemple :
<!-- good --> <div></div> <!-- bad --> <div></div>
[Obligatoire] L'identifiant de l'élément doit être unique sur la page.
Explication :
Dans une même page, différents éléments contiennent le même identifiant, ce qui n'est pas conforme à la signification de l'attribut id. Et l'utilisation de document.getElementById peut entraîner des problèmes difficiles à retracer.
[Suggestion] Il est recommandé que tous les mots de id soient en minuscules et que les mots soient séparés par -. Le style doit être cohérent pour un même projet.
[Recommandation] Les noms d'identifiant et de classe doivent être aussi courts que possible tout en évitant les conflits et en décrivant clairement.
Exemple :
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p></p> <!-- bad --> <p></p> <!-- good --> <span></span> <!-- bad --> <span></span>
[Obligatoire] Évitez d'utiliser le même nom et le même identifiant sur la même page.
Explication :
Le navigateur IE confondra les attributs id et name des éléments, et document.getElementById peut obtenir des éléments inattendus. Par conséquent, vous devez être très prudent lorsque vous nommez les attributs id et name des éléments.
Une bonne pratique consiste à utiliser une nomenclature différente pour l'identifiant et le nom.
Exemple :
<input name="foo"> <div id="foo"></div> <script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>
1.3 Balises
[Obligatoire] Les noms de balises doivent utiliser des lettres minuscules.
Exemple :
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P>
[Obligatoire] La fermeture automatique n'est pas autorisée pour les tags qui n'ont pas besoin de se fermer automatiquement.
Explication :
Les balises courantes qui ne nécessitent pas de fermeture automatique incluent input, br, img, hr, etc.
Exemple :
<!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title" />
[Obligatoire] Pour les balises de fermeture dont l'omission est autorisée en HTML5, l'omission de la balise de fermeture n'est pas autorisée.
Exemple :
<ul> <li>first</li> <li>second</li> </ul>
[Obligatoire] L'utilisation des balises doit être conforme aux règles d'imbrication des balises.
Explication :
Par exemple, div ne doit pas être placé dans p, et tbody doit être placé dans table.
Exemple :
<!-- good --> <div><h1><span></span></h1></div> <a href=""><span></span></a> <!-- bad --> <span><div></div></span> <p><div></div></p> <h1><div></div></h1> <h6><div></div></h6> <a href="a.html"><a href="a.html"></a></a>
[Recommandation] L'utilisation des balises HTML doit suivre la sémantique des balises.
Explication :
Ce qui suit sont des sémantiques de balises courantes
p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表
Exemple :
<!-- good --> <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p> <!-- bad --> <div>Esprima serves as an important <span>building block</span> for some JavaScript language tools.</div>
[Recommandation] Les tableaux ne doivent pas être utilisés lorsque CSS peut obtenir le même résultat exigence Faire la mise en page.
Explication :
L'exactitude sémantique doit être maintenue autant que possible lorsque la compatibilité le permet. Des exceptions sont autorisées pour les scénarios comportant des exigences strictes en matière d'alignement et d'extensibilité de la grille, tels que les formulaires complexes comportant plusieurs colonnes.
[Recommandation] L'utilisation des balises doit être aussi concise que possible et réduire les balises inutiles.
Exemple :
<!-- good --> <img src="image.png"> <!-- bad --> <span> <img src="image.png"> </span>
1.4 Attributs
[Obligatoire] Les noms d'attributs doivent utiliser des lettres minuscules.
Exemple :
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
[Obligatoire] Les valeurs d'attribut doivent être entourées de guillemets doubles.
Explication :
Les guillemets simples ne sont pas autorisés, et aucun guillemet n'est autorisé.
Exemple :
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
[Recommandation] Pour les attributs de type booléen, il est recommandé de ne pas ajouter de valeurs d'attribut.
Exemple :
<!-- good --> <input type="text" disabled> <input type="checkbox" value="1" checked> <!-- bad --> <input type="text" disabled="disabled"> <input type="checkbox" value="1" checked="checked">
[Recommandation] Il est recommandé que les attributs personnalisés soient préfixés par xxx- et data- est recommandé.
Explication :
L'utilisation de préfixes permet de distinguer les propriétés personnalisées des propriétés définies par standard.
Exemple :
<ol data-ui-type="Select"></ol>
2 Générique
2.1 DOCTYPE
[Obligatoire] Utiliser le doctype HTML5 pour activer le mode standards, il est recommandé d'utiliser DOCTYPE en majuscule.
Exemple :
<!DOCTYPE html>
[Recommandé] Activez les modes IE Edge et Chrome Frame.
Exemple :
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
[Suggestion] Définissez l'attribut lang correct sur la balise html.
Explication :
permet d'améliorer l'accessibilité de la page, par exemple en laissant l'outil de synthèse vocale déterminer la prononciation qu'il doit utiliser, en laissant l'outil de traduction déterminer la langue de traduction, etc.
Exemple :
<html>
[Recommandation] Activez le noyau webkit du navigateur dual-core pour le rendu.
Explication :
Voir l'article de documentation sur les balises Meta de contrôle du noyau du navigateur.
Exemple :
<meta name="renderer" content="webkit">
[Recommandation] Activez la prélecture DNS dans le navigateur.
Explication :
Réduisez le nombre de requêtes DNS et pré-récupérez le DNS.
Exemple :
<link rel="dns-prefetch" href="//global.zuzuche.com/"> <link rel="dns-prefetch" href="//imgcdn1.zuzuche.com/"> <link rel="dns-prefetch" href="//qiniucdn.com/">
2.2 Encodage
[Obligatoire] Les pages doivent utiliser une forme condensée, spécifiant explicitement l'encodage des caractères. La méta spécifiant l'encodage des caractères doit être le premier enfant direct de head.
Explication :
Voir l'article Le jeu de caractères HTML5 peut-il être utilisé ?
Exemple :
<html> ...... ......