Maison > Article > interface Web > Spécifications HTML que vous devez connaître (organisées et partagées)
Cet article vous apporte des connaissances sur les spécifications HTML. HTML, en tant que langage de balisage hypertexte qui décrit la structure des pages Web, a toujours été largement utilisé. L'objectif de ce document est de rendre le style de code HTML cohérent au sein du développement interne, rendant le projet plus facile à comprendre et à maintenir. J'espère que cela aide tout le monde.
Spécification HTML
1 Avant-propos
HTML a toujours été largement utilisé comme langage de balisage hypertexte qui décrit la structure des pages Web. L'objectif de ce document est de rendre le style de code HTML cohérent au sein du développement interne, rendant le projet plus facile à comprendre et à maintenir.
2 Style de code
2.1 Indentation et sauts de ligne
[Obligatoire] Utilisez 4 espaces comme niveau d'indentation, et 2 espaces ou caractères de tabulation ne sont pas autorisés.
Exemple :
<ul> <li>first</li> <li>second</li> </ul>
[Recommandé] 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.
2.2 Nommage
La classe [Obligatoire] doit être entièrement en lettres minuscules et les mots sont 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 la 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.
[Obligatoire] id Il est recommandé que tous les mots soient en lettres 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] Il est interdit de créer des classes sans informations de style pour les scripts hook.
Explication :
La classe n'est pas autorisée. Elle est uniquement utilisée pour permettre à JavaScript de sélectionner certains éléments. La classe doit avoir une sémantique et un style clairs. Sinon, cela conduirait facilement à la prolifération des classes CSS.
Utiliser la sélection d'identifiant et d'attribut comme hooks est une meilleure façon.
[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. Vous devez donc être très prudent lorsque vous nommez les attributs id et name des éléments.
Une meilleure 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>
2.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 étiquettes qui ne nécessitent pas de fermeture automatique.
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 des balises de fermeture n'est pas autorisée.
Explication :
Des exceptions peuvent être faites dans des scénarios avec des exigences très strictes en matière de taille de code. Par exemple : le système de diffusion utilisé par les pages tierces.
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.
Pour les règles détaillées d'imbrication des balises, veuillez vous référer à la section Définition des éléments dans la DTD HTML.
[Recommandation] L'utilisation des balises HTML doit suivre la sémantique des balises.
Explication :
Voici la sémantique courante des balises
p - paragraphe
h1,h2,h3,h4,h5,h6 - titre hiérarchique
strong,em - emphase
ins - insérer
del - supprimer
abbr - abréviation
code - code d'identification
cite - citer le titre de l'œuvre source
q - citer
citation de bloc - un paragraphe ou une longue citation
ul - Liste non ordonnée
ol - Liste ordonnée
dl,dt,dd - Liste de définitions
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>
[Suggestion] La même exigence peut être réalisé en CSS. Les tableaux ne peuvent pas être utilisés pour 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>
2.4 Propriétés
[Obligatoire] Les noms de propriétés doivent utiliser des lettres minuscules.
Exemple :
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
[Obligatoire] La valeur de l'attribut doit être entourée de guillemets doubles (à l'exclusion des bibliothèques de composants telles que iView et element).
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 :
<input type="text" disabled> <input type="checkbox" value="1" checked>
[Recommandation] Il est recommandé que les attributs personnalisés soient préfixés par xxx- et data-.
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>
3 Universel
3.1 DOCTYPE
[强制] 使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE。
示例:
<!DOCTYPE html>
[建议] 启用 IE Edge 模式。
示例:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
[建议] 在 html 标签上设置正确的 lang 属性。
解释:
有助于提高页面的可访问性,如:让语音合成工具确定其所应该采用的发音,令翻译工具确定其翻译语言等。
示例:
<html>
3.2 编码
[强制] 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
解释:
见 HTML5 Charset能用吗 一文。
示例:
<html> ...... ......