Convention générale


Convention générale

Tags

  • Balises à fermeture automatique, pas besoin de fermer (par exemple : img input br hr etc.) ; img input br hr 等 )；
  • 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；
  • 尽量减少标签数量；
<img src="//img.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">

Class 与 ID

  • class 应以功能或内容命名，不以表现形式命名；
  • class 与 id 单词字母小写，多个单词组成时，采用中划线-
    • Balise de fermeture facultative, qui doit être fermée (par exemple : </li> ou </body> );
  • Essayez de réduire le nombre de balises autant que possible 
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
🎜🎜Class et ID🎜🎜🎜class doivent être nommés d'après des fonctions ou du contenu, pas dans des expressions 🎜🎜class et id ; doit être nommé en lettres minuscules. Lorsqu'il est composé de plusieurs mots, utilisez des tirets - pour les séparer 🎜🎜Utilisez des identifiants uniques comme hooks Javascript et évitez de créer des classes sans informations de style 🎜🎜🎜🎜
<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">
🎜🎜 ;

Ordre des attributs

Les attributs HTML doivent apparaître dans un ordre spécifique pour garantir la lisibilité.

  • id

  • class

  • name

  • data-xxx

  • src, pour, type, href

  • titre, alt

  • aria-xxx, rôle

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

Guillemets

Utilisez des guillemets doubles uniformément pour la définition des attributs. 

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Nesting

a n'autorise pas l'imbrication de divs Cette contrainte est une contrainte d'imbrication sémantique Différentes contraintes incluent des contraintes d'imbrication strictes, telles que a n'autorise pas l'imbrication de a. . a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

语义嵌套约束

  • <li> 用于 <ul> 或 <ol> 下；
  • <dd>, <dt> 用于 <dl> 下；
  • <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

严格嵌套约束

  • inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
  • <a>里不可以嵌套交互式元素<a>、<button>、<select>等;
  • <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

布尔值属性

HTML5 规范中 disabled、checked、selected

Les contraintes d'imbrication strictes ne sont pas autorisées dans tous les navigateurs ; comme pour les contraintes d'imbrication sémantique, la plupart des navigateurs gèrent la tolérance aux pannes et les arborescences de documents générées peuvent être différentes les unes des autres.
Contraintes sémantiques imbriquées

    <li> est utilisé pour <ul> ou <ol> Suivant ; 🎜🎜<dd>, <dt> est utilisé pour <dl> Suivant ; code ><thead>    , <tbody>, <tfoot>, <tr>, < ;td> Utilisé sous <table> ; 🎜🎜🎜Contraintes d'imbrication strictes🎜
      🎜éléments de niveau en ligne, qui ne peuvent contenir que du texte ou d'autres éléments de niveau en ligne ; 🎜🎜<a> ne peut pas imbriquer les éléments interactifs <a>, <button> >, < code><select>, etc. ; 🎜🎜<p> ne peut pas imbriquer les éléments au niveau du bloc <div>, < h1>~<h6>, <p>, <ul>/<ol>/<li>,< code>< ;dl>/<dt>/<dd>, <form>, etc. 🎜🎜🎜Attributs booléens🎜🎜Dans la spécification HTML5, les attributs tels que disabled, checked et selected n'ont pas besoin de définir de valeurs. 🎜rrreee🎜🎜🎜 🎜