communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Guide standard d'écriture de code HTML_HTML/Xhtml_Production de pages Web

Guide standard d'écriture de code HTML_HTML/Xhtml_Production de pages Web

WBOY
Libérer： 2016-05-16 16:36:07
original
1793 Les gens l'ont consulté

Conventions générales
Tag

Balise à fermeture automatique, pas besoin de fermer (par exemple : img input br hr, etc.) ;
Balise de fermeture facultative (balise de fermeture), nécessité de fermer (par exemple : ou < ; /body>);
Réduire au maximum le nombre de balises;

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <img src="images/google.png " alt="Google">
  2. <entrée type="texte" nom="titre">
  4. <ul>
  5. <li>Styleli> 
  6. <li>Guideli> 
  7. ul>
  10. <span classe="avatar" >
  11. <img src=".. ."> 
  12. span>
  15. <img class="avatar" src="...">

Classe et pièce d'identité

la classe doit être nommée d'après une fonction ou un contenu, pas une expression ;
la classe et l'identifiant doivent être en lettres minuscules, et lorsqu'ils sont composés de plusieurs mots, utilisez une séparation par tiret
utilisez un identifiant unique comme hook Javascript ; , et évitez de créer des classes sans informations de style

Code XML/HTMLCopier le contenu dans le presse-papiers
  2. <div class="j- crochet gauche contentWrapper">div>
  5. <div id="j- hook" class="sidebar content-wrapper">< /div>

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

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <a id="..." class="..." data-modal="basculer" href="###"> a>
  3. <input class="formulaire- contrôle" type="texte">
  5. <img src=".. ." alt="...">

Guillemets

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

Code XML/HTMLCopier le contenu dans le presse-papiers
  2. <span id='j- crochet' classe=texte>Google span>
  5. <span id="j- crochet" classe="texte">Googlespan>

b Imbriqué

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. Par exemple, a n'autorise pas l'imbrication de 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

  • utilisé sous