1. 1定要闭合HTML标识
在过去的网页页面源码里，常常看到这样的句子：
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
或许以往大家能够容忍这样的非闭合HTML标识，但在今日的规范看来，这是是非非常不能取的，是务必百分百防止的。1定要留意闭合你的HTML标识，不然将没法根据认证，而且非常容易出現1些无法预料的难题。
最好是应用这样的方式：
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>2. 申明正确的文本文档种类( DocType )
笔者以前曾添加过很多CSS论坛，在那里，假如有效户遇到难题，大家会提议他最先做两件事：
1. 认证CSS文档，处理全部可见的不正确
2. 再加文本文档种类 Doctype
DOCTYPE 界定在HTML标识出現以前，它告知访问器这个网页页面包括的是HTML，XHTML，還是二者混和出現，这样访问器才可以正确的分析标识。
一般有4种文本文档种类可供挑选：
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">有关该应用甚么样的文本文档种类申明，1直有不一样的说法。一般觉得应用最严苛的申明是最好挑选，但科学研究说明，绝大多数访问器会应用一般的方法分析这类申明，因此许多人挑选应用HTML4.01规范。挑选申明的底线是，它是否真的合适你，因此你要综合性考虑到来挑选合适你得新项目的申明。
3. 不必应用嵌入式CSS款式
当你在低头写编码时，将会会常常随手或偷懒的再加1点嵌入式css编码，就象这样：
<p style="color: red;">站长之家</p>这样看起来即便捷又沒有难题，可是它会在你得编码中造成难题。
在你刚开始写编码时，最好是是在內容构造进行以后再刚开始添加款式编码。
这样的编号方法就像打游击，是1种很山寨的做法。——Chris Coyier
更好的做法是，把这个P的款式界定在款式表文档里：
someElement > p {
color: red;
}4. 在网页页面head标识中引进全部的款式表文档
基础理论上讲，你能够在任何部位引进CSS款式表，但HTML标准提议在网页页面的head标识中引进，这样能够加速网页页面的3D渲染速率。
在yahoo的开发设计全过程中，大家发现，在head标识中引进款式表，会加速网页页面载入速率，由于这样可使网页页面逐渐3D渲染。 —— 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. 在网页页面底部引进javascript文档
要记牢1个标准，便是让网页页面以最快的速率展现在客户眼前。当载入1个脚本制作时，网页页面会中止载入，直至脚本制作彻底加载。因此会消耗客户更多的時间。
假如你的JS文档只是要完成一些作用，（例如点一下按钮恶性事件），那就安心的在body底部引进它，这肯定是最好的方式。
举例：
<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. 不必应用嵌入式JavaScript，这都21新世纪了！
很多年之前，还存在1种这样的方法，便是立即将JS编码添加到HTML标识中。特别是在简易的照片相册中十分普遍。实质上讲，1个“onclick”恶性事件是额外在 标识上的，其实际效果等同于于1些JS编码。不必须探讨太多，十分不可该应用这样的方法，应当把编码迁移到1个外界JS文档中，随后应用“ addEventListener / attachEvent ”添加時间侦听器。或应用jquery等架构，之必须应用其“clock”方式。
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. 开发设计中随时开展规范认证
许多人其实不真实了解规范认证的实际意义和使用价值，笔者在1篇blog中详尽剖析了这个难题。1句话，规范认证是为你服务的，并不是给你惹麻烦的。
假如你一开始从业网页页面制做，那明显提议你免费下载这个网页页面开发设计专用工具条 ，并在编号全过程中随时应用”HTML规范认证”和“CSS规范认证”。假如你觉得CSS是1种十分难学的語言，那末它会把你整的欲死欲仙。你的不认真细致的编码会让你的网页页面系统漏洞百出，难题持续，1个好的方式便是—— 认证，认证，再认证。
8. 免费下载Firebug
Firebug是实至名归的网页页面开发设计最好软件，它不仅能够调节JavaScript，还能够直观的让你掌握网页页面标识的特性和部位。无需多说， 免费下载它！
9. 应用Firebug！
据笔者观查，绝大多数的应用者仅仅应用了Firebug 20%的作用，那简直太消耗了，你何不花几个小时的時间来系统软件学习培训这个专用工具，坚信会让你事倍功半。
Firebug实例教程：
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标识
笔者提议你在网页页面中应用在其中所有6种标识，尽管绝大多数人只会用到前4个，但应用数最多的H会有许多益处，例如机器设备友善、检索模块友善等，何不把你的P标识都更换成H6。
12. 假如是blog，那把H1留给文章内容题目
今日笔者在Twitter上进行1次探讨：是该把H1界定到LOGO上還是界定到文章内容题目上，有80%的人挑选了后者。
自然实际怎样应用要看你的要求，但我提议你在创建blog的情况下，将文章内容题型定为H1，这对检索模块提升(seo)是是非非常有益处的。
13. 免费下载ySlow
在以往几年里，yahoo的精英团队在前端开发开发设计行业做了很多杰出的工作中。前没多久，它们公布了1个叫ySlow的Firebug拓展，它会剖析你的<网页页面，并回到 1个“考试成绩单”，上面细腻剖析了这个网页页面的各个方面，提出必须改善的地区，尽管它有点刻薄，但它肯定会对你有一定的协助，明显强烈推荐—— 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
IE1直以来全是前端开发开发设计人员的恶梦！
假如你的CSS款式表基础定型了，那末能够为IE独立创建1个款式表，随后这样仅对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. 应用1个好的编码编写器
无论你是Windows還是Mac客户，这里都有许多出色的编写器供你挑选：
17. 缩小前端开发编码！
18. 缩减，缩减，缩减
回顾大家大多数数人写的第1个网页页面，1定会发现比较严重的 “DIV癖”( divitis )，一般初学者的本能反应便是把1个段落用DIV包起来，随后以便操纵精准定位而套上更多的DIV。—— 实际上这是1种低效而有害的做法。
网页页面写完后，1定要数次回过头查验，尽可能的降低元素的数量。
能用UL合理布局的目录就不必用1个个的DIV去合理布局。
正如写文章内容的重要是“缩减，缩减，缩减”1样，写网页页面也要遵照这个规范。
19. 为全部的照片再加Alt特性
为照片再加alt特性的益处是显而易见的 —— 这样可让禁用照片或应用独特机器设备的客户无阻碍得掌握你的王爷信息内容，而且对图象检索模块友善。
firefox不适用显示信息图象Alt特性，能够添加title特性：
<img src="cornImage.jpg" alt="站长之家" title="站长之家" />20. 学会熬夜
我常常不知道不觉的学习培训工作中到零晨，我觉得这是个很好的情况。
我的“啊～哈！”時间（ “AH-HA” moments，指峰回路转或豁然开朗乐观的時刻）一般都产生在深更半夜，例如我完全了解JavaScript的“闭包”定义，便是在这样1种状况下。假如你都还没体会过这类奇特的時刻，那就立刻试试吧！
21. 查询源码
沒有甚么比效仿你的偶像能让你更快的学习培训HTML。最初，大家都要甘做打印机，随后渐渐地得发展趋势自身的设计风格。科学研究你喜爱的网站网页页面编码，看看她们是如何完成的。这是大神的必由之路，你1定要试1下。留意：只是学习培训和效仿她们的编号设计风格，而并不是抄袭和照搬！
注意互联网上各种各样酷炫的JavaScript实际效果，假如看上去是应用了软件，那依据它源代码中head标识内的文档名，便可以寻找这个软件名字，随后便可以学习培训它据为己用。
22. 为全部的元素界定款式
这1条在你制做别的企业公司网站时尤其必要。你自身不应用blockquote标识？那客户将会会用，你自身不应用OL？客户也将会会。花時间做1个网页页面，显示信息出ul, ol, p, h1-h6, blockquotes, 这些元素的款式，查验1下是不是有忽略。
23. 应用第3方服务
译者注：英文原文题目为“应用twitter ”
如今互联网技术上时兴着很多能够完全免费加在网页页面中的API，这些专用工具十分强劲。它能够帮你完成很多恰当的作用，更关键的是能够帮你宣传策划网站。
24. 学习培训photoshop
Photoshop是前端开发工程项目师的1个关键专用工具，假如你早已娴熟把握HTML和CSS，那何不多学习培训1下Photshop。
25. 学习培训每个HTML标识
尽管一些HTML标识非常少用到，但你仍然应当掌握她们。例如“abbr”、“cite”等，你务必学习培训它们以备时常之需。
26. 参加小区探讨
互联网上有许很多多出色的資源，而小区中也掩藏着很多大神，这里你既能够自学，也能求教工作经验丰富多彩的开发设计者。
27. 应用CSS Reset
Css Reset也就Reset Css ,便是重设1些HTML标识款式，或说默认设置的款式。
有关是不是应当应用CSS Reset，在网上也是有猛烈的争执，笔者是提议应用的。你能够先采用1些完善的CSS Reset，随后渐渐地演化成合适自身的。
28. 对齐元素
简易来讲，你应当尽量的对齐你的网页页面元素。能够观查1下你喜爱的网站，它们的LOGO、题目、图表、段落毫无疑问是对得十分齐整的。不然就会显得错乱和不技术专业。
29. 有关PSD切成片
如今你早已把握了HTML、CSS、Photoshop专业知识，那末你还必须学习培训怎样把PSD变换为网页页面上的照片和情况，下面有两个非常好的实例教程：
30. 不必随便应用架构
Javascript和CSS都有很多出色的架构，但假如你是初学者，不必急于应用它们。假如你还没能娴熟的掌控CSS，应用架构会搞混你的专业知识管理体系。
CSS架构是为娴熟开发设计者设计方案的，这样会节约它们很多的時间。