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...) :
<li>Some text here. <li>Some new text here. <li>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
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
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 :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE 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 style="color: red;">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
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
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 type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6. N'utilisez jamais de javascript en ligne. Nous ne sommes plus en 1996 !
Il y a de nombreuses années, il existait encore un moyen d'ajouter du code JS directement aux balises HTML. C'est particulièrement courant dans les albums d'images simples. Essentiellement, un événement « onclick » est attaché à la balise et son effet est équivalent à du code JS. Il n'est pas nécessaire d'en discuter trop. Vous ne devez pas utiliser cette méthode. Vous devez transférer le code vers un fichier JS externe, puis utiliser "addEventListener / attachEvent" pour ajouter l'écouteur d'événement. Ou en utilisant un framework tel que jquery, utilisez simplement la méthode "clic".
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. Vérifiez lors du développement
Si vous venez de commencer à vous lancer dans la production de pages Web, il est fortement recommandé de télécharger la barre d'outils du développeur Web (utilisateurs de Chrome, veuillez rechercher dans le app store par vous-même, c'est-à-dire que les utilisateurs peuvent être du gaspillage), et utilisez la « Validation des normes HTML » et la « Validation des normes CSS » à tout moment pendant le processus de codage. Si vous pensez que CSS est un langage très simple à apprendre, cela va vous tuer. Votre code laxiste rendra votre page pleine de failles et de problèmes constants. Un bon moyen est de vérifier, vérifier et vérifier encore.
8. Téléchargez Firebug
Firebug est sans aucun doute le meilleur plug-in pour le développement Web. Il peut non seulement déboguer JavaScript, mais également vous permettre de comprendre intuitivement les attributs et les positions des balises de page. Sans plus attendre, téléchargez-le !
9. Utiliser Firebug
Selon l'observation de l'auteur, la plupart des utilisateurs n'utilisent que 20 % des fonctions de Firebug, ce qui est un tel gaspillage. Autant passer quelques heures à apprendre cela au système. Cet outil vous aidera certainement à obtenir deux fois le résultat avec la moitié de l'effort.
10. Gardez les noms de balises en minuscules
Théoriquement, le HTML n'est pas sensible à la casse, vous pouvez l'écrire comme vous le souhaitez, par exemple :
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
Mais c'est Il est préférable de ne pas l'écrire comme ça, cela ne sert à rien de saisir des lettres plus grosses, et cela rendra le code moche.
Recommandations
<div> <p>Here's an interesting fact about corn. </p> </div>
Utilisez les balises H1-H6
Il est recommandé d'utiliser ces six balises dans les pages Web. Bien que la plupart des gens n'utilisent que les quatre premières, le H le plus utilisé présentera de nombreux avantages, tels que la convivialité des appareils, la convivialité des moteurs de recherche, etc. Vous pourriez aussi bien remplacer vos balises P par H6 .<h1>This is a really important corn fact! </h1> <h6>Small, but still significant corn fact goes here. </h6>
<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
如果你想书写优美的代码，那最好不要用这种方式。
为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的
最好这样定义：
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15.学习如何应对IE
IE一直以来都是前端开发人员的噩梦！
如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
以上就是本文的全部内容，希望对大家学习有所帮助。
更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网！
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
