Latest web development tutorials

HTML Bootstrap conventions de codage

grammaire

  • Avec deux places au lieu des onglets (onglet) - Ceci est le seul moyen d'assurer une approche cohérente pour montrer dans tous les environnements.
  • éléments imbriqués doivent être en retrait une fois (soit deux espaces).
  • Pour la définition de la propriété, assurez-vous que tous utilisent des guillemets, ne jamais utiliser des guillemets simples.
  • Ne pas auto-fermeture (fermeture automatique) élément queue ajouter une barre oblique - la spécification HTML5 a clairement indiqué que cela est facultatif.
  • Ne pas omettre en option (balise de fermeture) balise de fin (par exemple, </li> ou </body> ).

exemple: 

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

Pour chacun de la première ligne de pages HTML Ajouter un mode standard (mode standard) déclaration, cela peut vous assurer que vous avez un affichage cohérent dans chaque navigateur.

exemple: 

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

propriété Langue

Selon la spécification HTML5:

Il est fortement recommandé de spécifier l'attribut lang élément racine html, de manière à définir la langue correcte pour le document. Cela aidera à outils de synthèse de la parole doit être utilisé pour déterminer leur prononciation, des outils de traduction vous aidera à déterminer sa traduction doit respecter les règles et ainsi de suite.

Plus d' informations sur lang attribut connaissance de cette spécification comprendre.

Voici le tableau des codes de langue . 

<html lang="zh-CN">
  <!-- ... -->
</html>

mode de compatibilité IE

soutien IE par le biais spécifique <meta> tag pour déterminer la version actuelle de rendu des pages IE doit être utilisé. À moins d' une forte besoins particuliers, sinon il est préférable de régler le mode de bord, notifiant ainsi l'IE en utilisant les derniers modèles qu'elle soutient. 

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Codage des caractères

En déclarer explicitement le codage de caractères, le navigateur peut être fixé rapidement et facilement déterminer le contenu des pages rendu. L'avantage est d'éviter l'utilisation d'entités de caractères marque (entité de caractère) en HTML, ce qui est cohérent avec le document entier codage (utilisent généralement encodage UTF-8). 

<head>
  <meta charset="UTF-8">
</head>

L'introduction de fichiers CSS et JavaScript

Selon la spécification HTML5, au moment de l'introduction de fichiers CSS et JavaScript ne sont généralement pas besoin de spécifier le type de attribut comme text/css et text/javascript sont leurs valeurs par défaut.

HTML5 liens spec 

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

Pratique est roi

Essayez de suivre les normes et la sémantique HTML, mais pas au détriment de l'aspect pratique pour le prix. Chaque fois que possible, avec une étiquette minimale et de maintenir un minimum de complexité.

Attribut Ordre

attribut HTML doit être en ordre de priorité dans l'ordre indiqué ci-dessous, afin d'assurer la lisibilité du code.

  • class
  • id - name id , name
  • data-*
  • src , for , type , href
  • title , alt
  • aria-* , role

classe est utilisée pour identifier les composants hautement réutilisables, et devrait donc être au sommet. id est utilisé pour identifier les composants spécifiques, doit être utilisé avec précaution (par exemple sous forme de signets dans la page), il est venu à la deuxième place. 

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

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

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

Boolean (booléen) attribut type

attribut booléen ne peut être cédé au moment de la déclaration. spécifications XHTML pour sa mission, mais la spécification HTML5 ne sont pas nécessaires.

Pour plus d' informations, s'il vous plaît se référer à la WhatWG sectionTop ON Boolean Attributs :

Boolean attribut élément si la valeur est vrai, si aucune valeur est fausse.

Si vous devez attribuer une valeur, s'il vous plaît consulter la spécification WhatWG:

Si l'attribut existe, sa valeur doit être la chaîne vide ou [...] nom d'attribut canonique, et ne pas ajouter des espaces au début et à la fin.

Simplement, il est pas affecté. 

<input type="text" disabled>

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

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

Réduire le nombre d'étiquettes

Lors de l'écriture du code HTML pour éviter élément parent inutile. Dans de nombreux cas, cela nécessite un processus itératif et de reconstruction à réaliser. Prenons le cas suivant: 

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

JavaScript étiquette générée

Mots générés par JavaScript afin que le contenu devient difficile de trouver, de modifier et de réduire les performances. Essayez d'éviter d'éviter.