解释要关闭哪个 div
大多数时候，当我查看网站源时，我看到，在页面的最底部，几乎无休止的结束标签列表。 事实上，许多初学者认为他们只需要使用 div 而不是表来生成高质量的代码。 Div 比表更简洁，但如果没有适当的代码组织，它可能会像基于表的代码一样凌乱（有时甚至更混乱）。
使用缩进是一个良好的开端。 但一个提示，绝对可以节省大量的时间是评论每一个div标签，你关闭，如下例所示：
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
使用 CSS 重置
除非你是初学者，或者你过去6年一我在荒岛上度假，否则你可能已经知道CSS重置它是多么有用。 因为默认情况下，浏览器不会对 HTML 元素应用相同的默认样式，因此 CSS 重置将确保所有元素没有特定样式，因此您可以定义自己的样式，而不会面临许多跨浏览器呈现问题的风险。
html， 身体， div， 跨度， 小子， 对象， iframe， h1， h2， h3， h4， h5， h6， p， 块报价， 前， a， abbr， 首字母缩略词， 地址， 大， 引用， 代码， del， dfn， em， 字体， img， ins， kbd， q， s， 桑普， 小， 罢工， 强， 子， sup， tt， var， b， u， i， 中心， dl， dt， dd， ol， ul， li， 字段集、窗体、标签、图例、 表， 标题， tbody， 脚， thead， tr， th， td _ 边距： 0; 填充： 0; 边框： 0; 轮廓： 0; 字体尺寸： 100%; 垂直对齐：基线; 背景：透明; } 身体 线高： 1; } ol， ul 列表样式：无; } 块报价， q | 报价： 无; } 块报价：之前，块报价：之后， q： 之前， q： 后 | 内容： ''; 内容：无; } /* 记得定义焦点样式！ */ ：焦点 | 轮廓： 0; } /* 记得以某种方式突出显示插入！ */ ins 文本修饰：无; } 德尔 文字装饰：通线; } /* 表仍然需要标记中的"单元格间距="0"*/ 表 | 边界崩溃：崩溃; 边框间距： 0; }
资料来源：http：//meyerweb.com/埃里克/工具/css/重置/索引.html
不要使用@import
可以使用"安全"指令包含 CSS 文件@import文件。 例如，当您想要将样式表包含到另一个样式表时，这非常有用。 另一种常见做法是使用以下方法在 html 文档中包含 CSS 文件：
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
虽然它有效，@import指令比将样式表包括在 html 文档中的其他方法要慢得多：
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
它并有很大的不同低流量的网站，但如果你有机会拥有一个受欢迎的网站，不要浪费你的访问者的时间使用@import。
资料来源：http：//www.stevesouders.com/blog/2009/04/09/不使用进口/
"平滑"您的图像
作为一名开发人员，我总是发现，为 Web 优化图像并不容易。 我尝试了良好的旧"保存为网络"Photoshop命令，但大多数时候，我结束了图像太大或没有足够的质量。
因此，我有一个坏习惯，在我的网站上使用未优化的图像。 当你不必关心你的站点的带宽时，这不是问题，但在我最近打开我的vps.net虚拟专用服务器后，我必须小心图像大小。
此时，我找到了一个非常酷的工具，名为Smush It：你输入你的未优化的图像网址，和Smush它会为你创建一个完全优化的图像。 您可以保存高达 70% 的文件大小，同时保持原始质量。 例如，我的在线代码编辑器列表中的所有图像都已被"删除"。
不要将 Css 与 HTML 混合
作为一种标记语言，HTML 的右用是通过定义页眉、页脚、列表、块报价等来组织文档。前一段时间，前端 Web 开发人员经常使用弃用 HTML 属性来设置特定元素的样式。
现在，样式属性允许开发人员将 CSS 直接插入 html 文档中。 这对于测试或您匆忙时非常有用。 但风格属性是不好的实践，这完全违背CSS哲学。
下面的示例演示了使用 样式属性的简单代码行可以变得多么脏和难读：
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">猫谁编码</a>
不要将 Javascript 与 HTML 混合使用
就像将 html 代码与 css 混合是一种不好的做法一样，您不应在 html 文档中使用任何 Javascript。 以下不良做法说明了 onclick 事件：
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">猫谁编码</a>
使用无遮由多的 Javascript 可以实现相同的结果。 在此示例中，我使用流行的 jQuery 框架：
$（文档）.就绪（功能（）]
$（#cwc'） 单击（函数）|
警报（'我喜欢这个网站'）;
});
});
这一开始似乎有点困难，尤其是对初学者来说;但它绝对不是， 它会保持你的 html 文档干净。
使用条件注释
你知道， IE 吸吮， 一些客户端吸更多， 通过要求你创建网页， 这是兼容这个过时的浏览器。 要针对 IE 的特定版本，您可以使用众所周知的 IE 黑客，如下所示：
高度：200px;/* 普通浏览器*/ _height： 300px;/* IE6 */ .高度：250px;/* IE7 */ *高度：350px;/* 所有 IES */
这些黑客有时非常有用，但它们不是定位特定版本的 IE 的最佳方法，它将导致您的 CSS 验证失败。
相反，您应该使用下面显示的条件注释来定位 IE6。
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
将 Javascript 文件放在底部
90 年代末/2000 年早期的流行做法是将 Javascript 文件放在<head>和</head>标签。 问题是，您的 javascript 文件将首先加载，因此您的内容将加载之后。
通过将 Javascript 文件放在文档底部，可确保仅在正确显示内容时才加载 JS 文件。
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
在语义上使用 HTML
HTML 不是编程语言。 它是一种标记语言，用于通过表示文本（如标题、段落、列表等）的结构语义来创建结构化文档。
如果你开始创建网站在良好的老90年代或世纪初，你知道在当时是多么脏的标记。 但有趣的是，它进化了。
除其他事项外，在语义上使用 html 元素也很重要。 例如，导航菜单应始终为无序列表：
<ul> <li><a href="#">家</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> <li><a href="#">博客</a></li> </ul>
生成时进行测试以避免跨浏览器问题
在开发 html、CSS 和 javascript 时，我犯的最大错误之一是在编写页面时，不要在多个浏览器上测试页面。 相反，我用来编写我所有的代码，只是查看火狐，看看它是如何呈现的。