在 head 标签中引入所有 CSS 样式文件
理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。
在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。—— ySlow团队
<head>
<title>窗外赏雪</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/admin.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/begin.css" />
</head>
在页面底部引入 JavaScript 文件
要记住一个原则，就是让页面以最快的速度呈现在用户面前。
当加载一个脚本时，页面会暂停加载，直到脚本完全载入。因此看到页面会花更多的时间，用户体验不好。
如果你的JS文件只是实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。
把 JavaScript 文件放在 </body> 标签前：
<script type="text/javascript" src="assets/js/file.js"></script>
<script type="text/javascript" src="assets/js/config.js"></script>
</body>
</html>
使用 h1 – h6 标签
建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。
<h1>在整个页面中 h1 标签最重要</h1>
<h6>在 h1 - h6 中权重最小，但仍然重要。</h6>
如果是博客，那把H1留给文章标题
今天作者在Twitter上发起一次讨论：是该把H1定义到LOGO 上还是定义到文章标题上，有80%的人选择了后者。
当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。
学会如何对付IE
IE一直以来都是前端开发人员的噩梦！如果你的 CSS 样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ie.css" />
<![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
缩减，缩减，缩减
大多数人写的第一个页面，一定会发现严重的 “ DIV 癖”，通常初学者的本能就是把一个段落用 DIV 包起来，然后为了控制定位而套上更多的 DIV 。—— 其实这是一种低效而有害的做法。
网页写完后，一定要多次回头检查，尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。
压缩前端代码
通过压缩 CSS 和 JavaScript 代码，通常可以减小 25% 以上的文件体积，在某种情况下，这会大大减轻你的带宽压力，提高加载速度。
使用 CSS Reset 重设
Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。
对齐元素
尽可能的对齐你的网页元素。比较优美的网站，它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。
尽量使用HTML标签
有些效果能用css实现，但是优先考虑用html标签实现。
了解每个HTML标签，虽然有些HTML标签很少用到，但你依然应该了解他们。比如“abbr”、“cite”等
img图片标签alt和title区别
alt是给搜索引擎识别，在图像无法显示时的替代文本，
alt属性是一个必需的属性，主要用于img标签，它规定在图像无法显示时的替代文本，如网速太慢、浏览器禁用图像等情况下。
title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。
在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。
title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。如果图片旁边已经有文字说明，就没必要多此一举的添加title。
title属性常与form以及a元素一同使用，以提供关于输入格式和链接目标的信息。
如：<a href="#" title="这是注释">窗外赏雪</a>，在鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<img src="assets/images/apple.fig" width="32" height="32" alt="image" />
如果你在HTML中提供了宽度和高度，浏览器会在显示网页之前先安排好布局。
如果没有提供，浏览器通常会在它知道图像大小后重新调整网页布局。
注意：浏览器是在下载完HTML文件并显示页面后才下载图像。
除非你告诉它，否则浏览器在下载之前，是不知道图像大小的。
你可以提供宽度和高度，浏览器会按比例缩放图像来适应这些尺寸，这种做法是不提倡的。
不要使用width和height属性，因为浏览器在缩小图像来配合网页之前，先要下载大图像，浪费带宽和性能。
应该通过调整图像本身大小，以符合浏览器规格（通过图像软件修改图像本身尺寸）。
同一个div中，即设置高宽，又设置padding，会把DIV撑大。
.mid{width:100px; height:100px; background:yellow; padding:10px}
<div class="mid"></div>
解决方法：再添加一个div，分开设置，外面的设置高宽，里面的设置padding。