communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Un guide pour écrire du code HTML

Un guide pour écrire du code HTML

高洛峰
Libérer： 2017-02-24 10:12:31
original
1117 Les gens l'ont consulté

Conventions générales

Balises

Balises à fermeture automatique, aucune fermeture requise (par exemple : img input br hr, etc.);
Balise de fermeture facultative, qui doit être fermée (par exemple : ou
Essayez de réduire le nombre de balises

) ; 
<img src="images/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="...">
Copier après la connexion

Classe et ID

la classe doit être nommée d'après une fonction ou un contenu, et non une expression
la classe et l'identifiant doivent être nommés en minuscules ; lettres, Lorsqu'il est composé de plusieurs mots, utilisez la séparation par tirets
Utilisez des identifiants uniques comme hooks Javascript et évitez de créer des classes sans informations de style 

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>
Copier après la connexion

<🎜 ; >Ordre des attributs

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

id

class
nom
data-xxx
src, pour, type, href
titre, alt
aria-xxx, rôle

<a id="..." class="..." data-modal="toggle" href="###"></a>

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

<img src="..." alt="...">
Copier après la connexion

Guillemets

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

<!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
Copier après la connexion

b Nesting

a Nesting p n'est pas autorisé Cette contrainte est une contrainte d'imbrication sémantique et est différente des autres contraintes. Il existe également des contraintes d'imbrication strictes, par exemple, a n'est pas autorisé à imbriquer a.

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 d'imbrication sémantique

  • ,
    sont utilisés sous
     ;



    Contraintes d'imbrication strictes


    les éléments de niveau en ligne ne peuvent contenir que du texte ou d'autres éléments de niveau en ligne. ne peut pas être utilisé. Les éléments interactifs ,