15 meilleures pratiques pour les débutants en HTML

Voici trente bonnes pratiques pour les débutants en HTML, partagées avec tout le monde pour votre référence, le contenu spécifique est le suivant

1 Gardez les balises fermées

Dans le passé, je l'ai souvent vu. similaire Le code suivant (Annotation : Cela faisait combien de temps...) :

Some text here.     

Some new text here.     

You get the idea.

Notez que l'étiquette UL/OL sur l'emballage extérieur est manquante (qui sait si c'est intentionnel ou non), et on oublie aussi de fermer la balise LI. Selon les normes actuelles, il s'agit clairement d'une mauvaise pratique qui devrait être évitée à 100 %. Quoi qu'il en soit, gardez la balise fermée. Sinon, vous risquez de rencontrer des problèmes lors de la validation des balises html.

Une meilleure façon

        
• Some text here. 
        
• Some new text here. 
        
• You get the idea. 
     

2. Déclarez le type de document correct

L'auteur a rejoint de nombreux forums CSS plus tôt. Chaque fois que les utilisateurs rencontrent des problèmes, nous le ferons. qu'il fasse d'abord deux choses :

1. Vérifiez le fichier CSS pour vous assurer qu'il n'y a pas d'erreurs.

2. Confirmez que le bon doctype est ajouté.

DOCTYPE apparaît avant la balise HTML. Il indique au navigateur si la page contient du HTML, du XHTML ou un mélange des deux, de sorte que le le navigateur peut analyser correctement.

Il existe généralement quatre types de documents parmi lesquels choisir :

nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>  
  
  
nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>  
  
  
nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  
  
nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Il y a eu différentes opinions sur le type de déclaration de document à utiliser. Il est généralement considéré que l'utilisation de la déclaration la plus stricte est le meilleur choix, mais les recherches montrent que la plupart des navigateurs utiliseront la méthode ordinaire pour analyser cette déclaration, c'est pourquoi de nombreuses personnes choisissent d'utiliser la norme HTML4.01. L'essentiel lors du choix d'une déclaration est de savoir si elle vous convient vraiment. Vous devez donc la considérer de manière globale pour choisir une déclaration adaptée à votre projet.

3. N'utilisez jamais de styles en ligne

Lorsque vous êtes plongé dans l'écriture de code, vous pouvez souvent ajouter un peu de code CSS en ligne avec désinvolture ou paresseusement, comme ceci

<p>I'm going to make this text red so that it really stands out and makes people take notice! </p>

Cela semble pratique et ne pose aucun problème. Cependant, il s’agit d’une erreur dans votre pratique de codage.

Lorsque vous écrivez du code, il est préférable de ne pas ajouter de code de style tant que la structure du contenu n'est pas terminée.

Cette méthode de codage s'apparente à une guérilla, une approche très copiée. ——Chris Coyier

Une meilleure approche consiste à définir le style P dans un fichier de feuille de style externe après avoir terminé la partie balise.

Recommandation

#someElement > p {     
  color: red;     
}

4. Mettez tous les fichiers CSS externes dans la balise head

Théoriquement, vous pouvez introduire des feuilles de style CSS n'importe où, mais la spécification HTML recommande de l'introduire. dans la balise head de la page web, ce qui peut accélérer le rendu de la page.

Au cours du processus de développement de Yahoo, nous avons constaté que l'introduction d'une feuille de style dans la balise head accélérerait le chargement des pages Web, car cela permettait à la page d'être rendue progressivement. —— ySlow Team

     
<title>My Favorites Kinds of Corn</title>     
<link>     
<link>     

5. Placer le fichier javascript en bas

Un principe à retenir est de faire apparaître la page devant l'utilisateur le plus rapidement possible. Lorsqu'un script est chargé, la page suspend le chargement jusqu'à ce que le script soit complètement chargé et exécuté. Par conséquent, l’utilisateur perdra davantage de temps.

Si votre fichier JS n'a besoin que d'implémenter certaines fonctions (telles que les événements de clic sur un bouton), n'hésitez pas à l'introduire en bas du corps. C'est certainement la meilleure façon.

Recommandation

<p>And now you know my favorite kinds of corn. </p>     
<script></script>     
<script></script>