1 Pastikan anda menutup teg HTML
Dalam kod sumber halaman sebelumnya, kami sering melihat kenyataan sedemikian:
<li>Some text here. <li>Some new text here. <li>You get the idea.
Mungkin kita boleh bertolak ansur dengan teg HTML yang tidak ditutup pada masa lalu, tetapi mengikut piawaian hari ini, ini sangat tidak diingini dan mesti dielakkan 100%. Pastikan anda menutup teg HTML anda, jika tidak pengesahan akan gagal dan masalah yang tidak dijangka mungkin berlaku.
Sebaik-baiknya menggunakan borang ini:
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2 Isytiharkan jenis dokumen yang betul (DocType)
Pengarang telah menambah banyak. Forum CSS, di mana jika mana-mana pengguna menghadapi masalah, kami akan menasihatinya untuk melakukan dua perkara dahulu:
DOCTYPE ditakrifkan sebelum teg HTML muncul. Ia memberitahu pelayar sama ada halaman itu mengandungi HTML, XHTML atau campuran kedua-duanya, supaya penyemak imbas boleh menghuraikan dengan betul. tag.
Biasanya terdapat empat jenis dokumen untuk dipilih :
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">
Terdapat pendapat berbeza tentang pengisytiharan jenis dokumen yang hendak digunakan. Secara umumnya dianggap bahawa menggunakan pengisytiharan yang paling ketat adalah pilihan terbaik, tetapi penyelidikan menunjukkan bahawa kebanyakan penyemak imbas akan menggunakan cara biasa untuk menghuraikan pengisytiharan ini, jadi ramai orang memilih untuk menggunakan standard HTML4.01. Kesimpulannya apabila memilih pernyataan adalah sama ada ia benar-benar sesuai untuk anda, jadi anda perlu mempertimbangkannya secara menyeluruh untuk memilih pernyataan yang sesuai untuk projek anda.
3. Jangan gunakan gaya CSS terbenam
Apabila anda tenggelam dalam menulis kod, anda mungkin sering menambah sedikit kod css terbenam dengan mudah atau malas :
<p style="color: red;">脚本之家</p>
Ini mungkin kelihatan mudah dan bebas masalah, tetapi ia boleh menyebabkan masalah dalam kod anda.
Apabila anda mula menulis kod, sebaiknya mula menambah kod gaya selepas struktur kandungan selesai.
Kaedah pengekodan ini seperti peperangan gerila, pendekatan yang sangat meniru. ——Chris Coyier
Pendekatan yang lebih baik ialah mentakrifkan gaya P ini dalam fail helaian gaya:
someElement > p {
color: red;
}4 Dalam teg kepala halaman Perkenalkan semua fail helaian gaya
Secara teorinya, anda boleh memperkenalkan helaian gaya CSS di mana-mana sahaja, tetapi spesifikasi HTML mengesyorkan untuk memperkenalkannya dalam teg kepala halaman web, yang boleh mempercepatkan pemaparan halaman.
Semasa proses pembangunan Yahoo, kami mendapati bahawa memperkenalkan helaian gaya dalam teg kepala akan mempercepatkan pemuatan halaman web,
kerana ini membolehkan halaman dipaparkan secara beransur-ansur. —— Pasukan ySlow
<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 Perkenalkan fail JavaScript di bahagian bawah halaman
Satu prinsip yang perlu diingat ialah menjadikan halaman berjalan sebagai secepat mungkin disampaikan kepada pengguna. Apabila memuatkan skrip, halaman akan menjeda pemuatan sehingga skrip dimuatkan sepenuhnya. Jadi ia akan membuang lebih banyak masa pengguna.
Jika fail JS anda hanya perlu melaksanakan fungsi tertentu (seperti acara klik butang), maka jangan ragu untuk memperkenalkannya di bahagian bawah badan Ini pastinya cara terbaik.
Contoh:
<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 Jangan gunakan JavaScript terbenam, ini adalah abad ke-21!
Bertahun-tahun yang lalu, terdapat cara untuk terus menambah kod JS pada teg HTML. Ini adalah perkara biasa dalam album gambar ringkas. Pada asasnya, " Pada label, kesannya bersamaan dengan beberapa kod JS. Tidak perlu membincangkan terlalu banyak Anda tidak seharusnya menggunakan kaedah ini Anda harus memindahkan kod ke fail JS luaran dan kemudian menggunakan ". addEventListener / attachEvent" untuk menambah pendengar masa. Atau gunakan rangka kerja seperti jQuery, yang perlu menggunakan kaedah "jam"nya.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. Seragamkan di pada bila-bila masa semasa Pengesahan pembangunan
Ramai orang tidak benar-benar memahami maksud dan nilai pengesahan standard Pengarang menganalisis isu ini secara terperinci dalam blog Secara ringkasnya, pengesahan standard adalah untuk anda, bukan Menyusahkan anda.
Jika anda baru mula membuat halaman web, amat disyorkan anda memuat turun Bar Alat Pembangunan Web ini dan menggunakan "standard HTML " pada bila-bila masa semasa proses pengekodan. Pengesahihan" dan "Pengesahan Standard CSS". Kaedah yang baik ialah - sahkan, sahkan, sahkan lagi
8 Muat turun Firebug
Firebug sudah pasti pemalam terbaik untuk pembangunan web hanya nyahpepijat JavaScript, tetapi juga Ia membolehkan anda memahami sifat dan kedudukan tag halaman secara intuitif
Tapak web rasmi Firebug: https://getfirebug.com/
Nota: Laman web rasmi Firebug mengumumkan bahawa ia telah berhenti meneruskan pembangunan, mengemas kini dan menyelenggara Firebug dan menjemput semua orang untuk menggunakan alat terbina dalam 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. 查看源代码
Tiada apa-apa yang akan membantu anda mempelajari HTML lebih cepat daripada meniru idola anda. Pada mulanya, kami semua perlu bersedia untuk menjadi mesin fotostat, dan kemudian perlahan-lahan kami perlu mengembangkan gaya kami sendiri. Kaji kod halaman tapak web kegemaran anda dan lihat cara ia dilaksanakan. Ini adalah satu-satunya cara untuk tuan, anda mesti mencubanya. Nota: Hanya belajar dan tiru gaya pengekodan mereka, bukan menciplak dan menyalin!
Beri perhatian kepada pelbagai kesan JavaScript yang menarik di Internet Jika kelihatan seperti pemalam digunakan, anda boleh mencari nama pemalam berdasarkan nama fail dalam teg kepala dalam pemalamnya. kod sumber, dan kemudian anda boleh belajar cara menggunakannya untuk kegunaan anda sendiri.
22. Tentukan gaya untuk semua elemen
Ini amat diperlukan apabila anda membuat tapak web syarikat lain. Bukankah anda sendiri menggunakan tag blockquote? Kemudian pengguna boleh menggunakannya, tetapi anda sendiri tidak menggunakan OL? Pengguna juga boleh. Luangkan masa untuk membuat halaman yang memaparkan gaya elemen ul, ol, p, h1-h6, petikan sekat, dsb. dan semak untuk melihat jika ada yang hilang.
23 Gunakan perkhidmatan pihak ketiga
Nota Penterjemah: Tajuk asal bahasa Inggeris ialah “Menggunakan Twitter”
Terdapat banyak perkhidmatan popular di Internet yang boleh digunakan untuk API percuma yang ditambahkan pada halaman web, alat ini sangat berkuasa. Ia boleh membantu anda melaksanakan banyak fungsi pintar, dan yang lebih penting, ia boleh membantu anda mempromosikan tapak web anda.
24 Pelajari Photoshop
Photoshop ialah alat penting untuk jurutera hadapan Jika anda sudah mahir dalam HTML dan CSS, anda juga boleh mengetahui lebih lanjut Kedai Foto.
Terdapat banyak tutorial perhiasan bahasa Inggeris di Psdtuts: bahagian Video
Lynda.com juga mempunyai banyak tutorial, tetapi anda perlu membayar $25 USD
Anda Suck at Photoshop siri tutorial
Luangkan beberapa jam belajar operasi kekunci pintasan Photoshop
25 Pelajari setiap teg HTML
Walaupun sesetengah teg HTML jarang digunakan, anda masih harus mengetahuinya. Contohnya, "abbr", "cite", dsb., anda mesti mempelajarinya sekiranya anda memerlukannya.
26 Mengambil bahagian dalam perbincangan komuniti
Terdapat banyak sumber yang sangat baik di Internet, dan terdapat juga banyak pakar yang tersembunyi dalam komuniti di sini. belajar atau Minta nasihat pembangun berpengalaman.
27. Gunakan CSS Reset
Css Reset juga Reset Css, iaitu untuk menetapkan semula beberapa gaya teg HTML atau gaya lalai.
Terdapat juga perdebatan sengit di Internet tentang sama ada CSS Reset harus digunakan, tetapi penulis mengesyorkan penggunaannya. Anda boleh memilih beberapa Tetapan Semula CSS matang dahulu, dan kemudian perlahan-lahan mengubahnya menjadi satu yang sesuai dengan anda.
28. Selaraskan elemen
Ringkasnya, anda harus menyelaraskan elemen web anda sebanyak mungkin. Anda boleh memerhati tapak web kegemaran anda Logo, tajuk, carta dan perenggannya mestilah sangat kemas. Jika tidak, ia akan kelihatan mengelirukan dan tidak profesional.
29. Mengenai penghirisan JPA
Sekarang anda telah menguasai pengetahuan HTML, CSS dan Photoshop, anda masih perlu belajar cara menukar JPA kepada gambar dan imej pada halaman web. Untuk latar belakang, terdapat dua tutorial yang bagus di bawah:
30. Jangan gunakan rangka kerja secara rawak
Terdapat banyak rangka kerja yang sangat baik untuk kedua-dua Javascript dan CSS, tetapi jika anda seorang pemula, jangan tergesa-gesa untuk menggunakannya. Jika anda belum mahir dalam CSS, menggunakan rangka kerja akan mengelirukan sistem pengetahuan anda.
Rangka kerja CSS direka untuk pembangun mahir, yang akan menjimatkan banyak masa mereka.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
