前端开步骤

需要说明一下，这里所说的前端不包括设计，只有HTML和Javascript部分

编写语具有意性文档

• 根据内容编写HTML文档
• HTML进行W3C认证

根据内容编写语意性强的HTML文档

编写HTML文档是前端的第一步，可以使用记事本或者其他任何文本编辑器来编写。这里一再强调 语意性 是指什么意思呢？有两个层面，其一是我们文档组织结构要遵循内容旨意，就拿一个博客页面举例：一般博客页面不外乎标题、作者、内容和评论等等内容，因为有CSS排版组织HTML文档的时候你可以随意将内容放在标题前面，但是最好是按照文章的语意顺序标题、作者、内容的顺序来排列，这样一来万一CSS文件不能加载文章还可以作为普通文档来阅读，保证了它原有的可读性。其次是使用 语意标签 , 具体来说是不要通篇使用<div>,或者<p>, 标题用h1..h6, 内容段落可以用<div>和<section>,文章可以用<article>， 类名更是要用具有语意性的命名，<section class="art1">， <section class="left"> 这些都是很糟糕的命名。

HTML进行W3C验证

这是一个必不可少但是容易被人忽略的地方。W3C HTML验证的方式是根据HTML的DOCTYPE来验证文档中每个标签的使用是否正确合理。例如，当你在一个inline元素中放置一个block元素，浏览器是不会告诉你错误的，只是不会按照你的意图渲染而已，如果进行HTML验证就会立即发现这些隐藏的问题。

需要指出的是，很多人省略第一行的DOCTYPE，这不是个好习惯。

编写合格CSS

• 切割设计图，转换为CSS
• CSS进行W3C认证

切割设计图，转换为CSS

切图，写CSS这个没什么好说的，注意几点：

1. 转换效果的图片尽量放在一只图片上，通过CSS位置来选取。因为图片一般都是压缩过的，唯一能节省加载时间的方式是减少请求次数
2. 路径多用绝对路径
3. 根据css用途，多多写注释
4. CSS也有性能消耗问题，使用前多多注意。例如：＊通配符，@import，过滤选择器，图片滤镜等等

CSS进行W3C认证

如果HTML验证一样，CSS验证也是有必要的。验证地址

验证完毕之后，基本不会有什么问题，页面就可以放心使用了。

添加Javascript动态效果

• 编写Javascript动态效果
• 用JSlint对Javascript检查验证

给页面加的js最好放在文档的最后。每次写完js之后我都习惯将源文件放在JSlint检查一遍，然后按照他的错误和警告提示一步步改为通过即可。第一次使用jslint你会有一种崩溃的感觉，多改进几次你的代码会很稳健。

浏览器兼容性检查

这个是上线前必须的步骤，现在大家都忽略IE6是一件很幸福的事情。你至少要检查IE7以上、Chrome、Safari、Firefox和Opera。IE上一般的兼容性检查，可以使用IE Collection, 它与原生IE有时会有些不一样， 要求更专业的话还是用原生IE来测试吧。

发布

这些个过程之后，你写的网页就可以在各个环境下保持结果一致了。