Quinze bonnes pratiques pour la production de pages Web HTML Beginners_HTML/Xhtml_Web

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 l'étiquette fermée

Dans le passé, j'ai souvent vu du code similaire à celui-ci (Annotation : C'était il y a combien de temps...) :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <li>Quelques textes ici.
2. <li>Un nouveau texte ici. <
3. li>Vous voyez l'idée Notez que l'étiquette UL/OL sur l'emballage extérieur est manquante (qui sait si c'est intentionnel ou non), et l'étiquette LI est également oubliée pour être fermée. 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

Code XML/HTML

Copier le contenu dans le presse-papiers

<

ul
1. >  <
2. li>Quelques textes ici li>  <
3. li>Un nouveau texte ici li>  <
4. li>Vous voyez l'idée li> 
5. ul>  2. Déclarez le bon type de document

L'auteur a déjà rejoint de nombreux forums CSS. Chaque fois qu'un utilisateur rencontre un problème, nous lui conseillerons de faire deux choses en premier :

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

2. Confirmez que le type de document correct 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, afin que le navigateur puisse l'analyser correctement.

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

Code XML/HTML

Copier le contenu dans le presse-papiers

1. >  
2.   
3.   
4. >  
5.   
6.   
7. >  
8.   
9.   
10. >  
11.   

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以Il s'agit d'une version HTML4.01.适合你得项目的声明。

3.永远不要使用内联样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样：

Code XML/HTML复制内容到剪贴板

1. <p style="couleur : rouge;" >Je viens de rendre ce texte en rouge pour qu'il se remarque vraiment et que que les gens le remarquent ! p>     

这样看起来即方便又没有问题。然而，这在你的编码实践中是个错误。

在你写代码时，在内容结构完成之前最好不要加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，完成标签部分后，再把这个P的样式定义在外部样式表文件里。

建议

Code XML/HTML复制内容到剪贴板

1. #someElement > p {     
2.   couleur : rouge ;     
3. }  

4.将所有外部css文件放入head标签内

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow团队

Code XML/HTML复制内容到剪贴板

1. <tête>     
2. titre>      <lien 
rel
3. ="feuille de style"  type="texte/css" média ="écran" href="chemin/vers/fichier.css" />      <lien 
rel
4. ="feuille de style"  type="texte/css" média ="écran" href="chemin/vers/un autreFichier.css" />      tête>
    
5. 5.javascript文件放在底部 要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入并执行完成。因此会浪费用户更多的时间。
如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

建议

Code JavaScript

复制内容到剪贴板

Et maintenant vous connaissez mes sortes de maïs préférées. 

     

"text/javascript"
1.  src="chemin/vers/fichier.js"
>     
2. "text/javascript" src="chemin/vers/anotherFile.js"
>     
3.           
4. 6.永远不要使用内联javascript。现在不是1996年了！
5. 许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图Il s'agit d'une application "onclick". Il s'agit d'un JS. Il s'agit d'un système JS qui utilise « addEventListener / attachEvent » et qui contient également des informations sur « addEventListener / attachEvent » jquery等框架，只需要使用« cliquez »方法。

Code JavaScript

复制内容到剪贴板

1. $('a#moreCornInfoLink').click(fonction() { 
2. alert('Vous voulez en savoir plus sur le maïs ?'
);
3. });

7. Vérifier lors du développement

Si vous commencez tout juste à vous lancer dans la production de pages Web, il est fortement recommandé de télécharger la barre d'outils de développement Web (les utilisateurs de Chrome doivent effectuer une recherche vous-même dans l'App Store, c'est-à-dire que les utilisateurs ne pourront peut-être pas l'utiliser), et utilisez la « vérification des normes HTML » à tout moment pendant le processus de codage et la « validation des normes CSS ». Si vous pensez que CSS est un langage très facile à apprendre, cela va vous tuer. Votre code laxiste rendra votre page pleine de failles et causera des problèmes constants. Un bon moyen est de vérifier, vérifier et vérifier à nouveau.

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. Utilisez Firebug

D'après le constat de l'auteur, la plupart des utilisateurs n'utilisent que 20% des fonctions de Firebug, ce qui est vraiment du gaspillage Autant passer quelques heures à apprendre systématiquement cet outil, je crois qu'il vous rapportera deux fois le résultat avec la moitié. l'effort.

10. Gardez les noms de balises en minuscules

Théoriquement, le html n'est pas sensible à la casse, vous pouvez écrire ce que vous voulez, par exemple :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <DIV> 
2. <P>Voici un fait intéressant sur le maïs < /P> 
3. DIV>

Mais il vaut mieux ne pas écrire comme ça. Cela ne sert à rien de saisir des lettres plus grosses et cela rendrait le code moche.

Suggestions

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div> 
2. 　<p>Voici un fait intéressant sur le maïs < /p> 
3. div> 

11. Utilisez les balises H1-H6

Il est recommandé d'utiliser les six balises de votre page 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 mettre vos balises Remplacer toutes les balises P par H6.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <h1>C'est un fait très important sur le maïs h1> 
2. <h6>Un fait petit mais néanmoins important sur le maïs se trouve ici h6>

12.Utilisez une liste non ordonnée (UL) pour envelopper le menu de navigation

Habituellement, les sites Web auront des menus de navigation, vous pouvez les définir de cette manière :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div id="nav" > 
2. <a href="#" >Accueil a> >
3. <a href="#" >À propos de un> >
<
4. a href="#" >Contact un> >
div
5. > Si vous souhaitez écrire du beau code, il est préférable de ne pas utiliser cette méthode. Pourquoi utiliser le menu de navigation de la mise en page UL ? ——Parce que UL est né pour les listes de définitions

Il est préférable de le définir ainsi :

Code XML/HTML

Copier le contenu dans le presse-papiers

<

ul

1. id="nav" >  <
li
2. ><a href="#">Accueil a>li>  <
li
3. ><a href="#">À propos a>li>  <
li
4. ><a href="#">Contact a>li> 
ul
5. > 

   15. Apprenez à gérer IE

   IE a toujours été un cauchemar pour les développeurs front-end !

   Si votre feuille de style CSS est pratiquement finalisée, vous pouvez créer une feuille de style distincte pour IE, et cela ne prendra effet que sur IE :

   Code CSSCopier le contenu dans le presse-papiers

   1.  

   La signification de ces codes est la suivante : ce code ne prendra effet que si le navigateur de l'utilisateur est IE6 et inférieur. Si vous souhaitez inclure IE7, remplacez "[if lt IE 7]" par "[if lte IE 7]".
   Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn