1. Assurez-vous de fermer la balise HTML
Dans le code source des pages précédentes, nous avons souvent vu de telles déclarations :
<li>Some text here. <li>Some new text here. <li>You get the idea.
Peut-être pourrions-nous tolérer de telles balises HTML non fermantes dans le passé, mais selon les normes actuelles, cela est hautement indésirable et doit être évité à 100 %. Assurez-vous de fermer vos balises HTML, sinon la validation échouera et des problèmes imprévus pourraient survenir.
Il est préférable d'utiliser ce formulaire :
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2 Déclarez le bon type de document (DocType)
L'auteur en a ajouté plusieurs. Forum CSS, où si un utilisateur rencontre un problème, nous lui conseillerons de faire deux choses en premier :
DOCTYPE est défini avant l'apparition de 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 analyser correctement. étiqueter.
Il existe généralement quatre types de documents parmi lesquels choisir :
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!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 pas de styles CSS intégrés
Lorsque vous êtes plongé dans l'écriture de code, vous pouvez souvent ajouter un peu de code CSS intégré de manière pratique ou paresseusement. :
<p style="color: red;">脚本之家</p>
Cela peut sembler pratique et sans problème, mais cela peut causer des problèmes dans votre code.
Lorsque vous commencez à écrire du code, il est préférable de commencer à ajouter du code de style une fois la structure du contenu 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 de ce P dans le fichier de feuille de style :
someElement > p {
color: red;
}4 Dans la balise d'en-tête de page Introduire. tous les fichiers de feuilles de style
Théoriquement, vous pouvez introduire des feuilles de style CSS n'importe où, mais la spécification HTML recommande de les 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 de feuilles de style dans la balise head accélérerait le chargement des pages Web,
car cela permet à 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. Introduisez les fichiers JavaScript en bas de la page
Un principe à retenir est de faire en sorte que la page s'exécute comme présenté le plus rapidement possible à l'utilisateur. Lors du chargement d'un script, la page suspendra le chargement jusqu'à ce que le script soit complètement chargé. Cela fera donc perdre plus de temps aux utilisateurs.
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.
Exemple :
<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 pas de JavaScript intégré, nous sommes au 21ème siècle !
Il y a de nombreuses années, il existait un moyen d'ajouter directement du code JS aux balises HTML. Ceci est particulièrement courant dans les albums d’images simples. Essentiellement, un " Sur l'étiquette, son effet est équivalent à du code JS. Il n'est pas nécessaire de trop discuter. 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 un écouteur de temps. Ou utilisez un framework tel que jQuery, qui doit utiliser sa méthode "clock".
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. Standardiser à à tout moment pendant le développement Vérification
Beaucoup de gens ne comprennent pas vraiment le sens et la valeur de la vérification standard. L'auteur a analysé ce problème en détail dans un blog. En un mot, la vérification standard est pour vous, pas pour vous. pour vous. Gênant
Si vous commencez tout juste à créer des pages Web, il est fortement recommandé de télécharger cette Barre d'outils de développement Web et d'utiliser le "standard HTML". " à tout moment pendant le processus de codage. Validation " et " Validation standard CSS ". Si vous pensez que CSS est un langage très facile à apprendre, alors votre code laxiste rendra votre page pleine de failles et de problèmes constants. Une bonne méthode est la suivante : vérifier, vérifier, vérifier à nouveau
8. Téléchargez Firebug
Firebug est sans aucun doute le meilleur plug-in pour le développement Web. seulement déboguer JavaScript, mais aussi Il vous permet de comprendre intuitivement les attributs et les positions des balises de page
Site officiel de Firebug : https://getfirebug.com/
Remarque : Le site officiel de Firebug a annoncé qu'il avait arrêté de continuer à développer, mettre à jour et maintenir Firebug, et invite tout le monde à utiliser l'outil intégré de Firefox, DevTools.
相关推荐：<Firebug Alternatives: 10 Best JavaScript Debugging Tools>(Firebug替代品:10个最好的JavaScript调试工具)
9. 使用 Firefox 内置工具 DevTools！
DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools
10. 使用小写的标记
理论上讲，你可以像这样随性的书写标记：
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：
<div> <p>Here's an interesting fact about corn. </p> </div>
11.使用H1-H6标签
笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。
12. 如果是博客，那把H1留给文章标题
今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。
当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。
13. 下载ySlow
在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的<网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐 ySlow！
14. 使用UL列表布局导航菜单
通常网站都会有导航菜单，你可以用这样的方式定义：
<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]”。
16. 使用一个好的代码编辑器
不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：
17. 压缩前端代码！
18. 缩减，缩减，缩减
回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。
网页写完后，一定要多次回头检查，尽量的减少元素的数量。
能用UL布局的列表就不要用一个个的DIV去布局。
正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。
19. 为所有的图片加上Alt属性
为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。
Firefox不支持显示图像Alt属性，可以加入title属性：
<img src="cornImage.jpg" alt="脚本之家" title="脚本之家" />
20. 学会熬夜
我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。
我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！
21. 查看源代码
Rien ne vous aidera à apprendre le HTML plus rapidement que d'imiter vos idoles. Au début, nous devions tous être prêts à devenir photocopieurs, puis petit à petit, nous avons dû développer notre propre style. Étudiez le code des pages de votre site Web préférées et voyez comment elles sont mises en œuvre. C'est la seule façon pour les maîtres, vous devez l'essayer. Remarque : apprenez et imitez simplement leur style de codage, sans plagier ni copier !
Faites attention aux différents effets JavaScript intéressants sur Internet. S'il semble qu'un plug-in soit utilisé, vous pouvez trouver le nom du plug-in en fonction du nom du fichier dans la balise head dans son contenu. code source, puis vous pourrez apprendre à l'utiliser pour votre propre usage.
22. Définir des styles pour tous les éléments
Cela est particulièrement nécessaire lorsque vous créez des sites Web d'autres entreprises. N'utilisez-vous pas vous-même les balises blockquote ? Alors les utilisateurs peuvent l’utiliser, mais vous n’utilisez pas OL vous-même ? Les utilisateurs le peuvent aussi. Prenez le temps de créer une page qui affiche les styles des éléments ul, ol, p, h1-h6, blockquotes, etc. et vérifiez s'il manque quelque chose.
23. Utiliser des services tiers
Note du traducteur : le titre anglais original est « Utiliser Twitter »
Il existe de nombreux services populaires sur le Internet pouvant être utilisé gratuitement grâce aux API ajoutées aux pages Web, ces outils sont très puissants. Il peut vous aider à mettre en œuvre de nombreuses fonctions intelligentes et, plus important encore, il peut vous aider à promouvoir votre site Web.
24. Apprenez Photoshop
Photoshop est un outil important pour les ingénieurs front-end Si vous maîtrisez déjà HTML et CSS, vous pourriez aussi bien en apprendre davantage. Photoshop.
Il existe de nombreux tutoriels de bijoux en anglais sur Psdtuts : section Vidéos
Lynda.com propose également de nombreux tutoriels, mais il faut payer 25 $ USD
Série de didacticiels You Suck at Photoshop
Passez quelques heures à apprendre le fonctionnement des touches de raccourci Photoshop
25. Apprenez chaque balise HTML
Bien que certaines balises HTML soient rarement utilisées, vous devez quand même les connaître. Par exemple, « abbr », « citer », etc., vous devez les apprendre au cas où vous en auriez besoin.
26. Participez aux discussions de la communauté
Il existe de nombreuses excellentes ressources sur Internet, et il y a aussi de nombreux maîtres cachés dans la communauté. étudier ou demander conseil à un développeur expérimenté.
27. Utiliser CSS Reset
Css Reset est également Reset Css, qui consiste à réinitialiser certains styles de balises HTML ou styles par défaut.
Il y a également un débat féroce sur Internet quant à savoir si CSS Reset doit être utilisé, mais l'auteur recommande son utilisation. Vous pouvez d’abord choisir une réinitialisation CSS mature, puis la faire évoluer lentement vers celle qui vous convient.
28. Alignez les éléments
En termes simples, vous devez aligner vos éléments Web autant que possible. Vous pouvez observer vos sites Web préférés. Leurs logos, titres, graphiques et paragraphes doivent être très soignés. Sinon, cela semblera déroutant et peu professionnel.
29. À propos du découpage PSD
Maintenant que vous maîtrisez les connaissances de HTML, CSS et Photoshop, vous devez encore apprendre à convertir des PSD en images et images sur la page Web. Pour le fond, il y a deux bons tutoriels ci-dessous :
30. N'utilisez pas les frameworks au hasard
Il existe de nombreux excellents frameworks pour Javascript et CSS, mais si vous êtes débutant, ne vous précipitez pas pour les utiliser. Si vous ne maîtrisez pas encore CSS, l’utilisation de frameworks perturbera votre système de connaissances.
Le framework CSS est conçu pour les développeurs expérimentés, ce qui leur fera gagner beaucoup de temps.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
