基础知识：
1. html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《head first html 与 css 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2. javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
进阶：
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1. css。必看《精通css》，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《css艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：
a) 框架。推荐jQuery，简单易用，我的第一web项目就是在w3school简单学习后，直接上手jQuery完成的，真的很难简单，很好用。jQuery适用环境有限，对于那些对性能要求很高的页面无法胜任。推荐了解一下 YUI 或百度的 tangram ，都很好用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与web开发学习的精髓部分。补充： 可以使用 codecademy 学习 javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。
c) javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外，你必须理解json。
d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。
e) ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。
f) 了解浏览器差异性。这部分包括css和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
再进一阶：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但写出可以运行的代码，只是编程的最初级阶段。更高要求大概还有三方面：1易维护，2可测试，3高性能，如果页面流量有要求，那第四个就是，4低流量。
1. 易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2. 可测性。js代码可测性的主题，我正在研究，欢迎感兴趣的同学联系我，共同学习
3. 高性能。必读《高性能javascript》
4. 低流量。技巧性太强，非一朝一夕之功，不多说
HTML5定义：能向后兼容目前UA处理内容的方式。为了让语言更简单，一些老的元素和Attribute会被舍弃。比如一些纯粹用于展现的元素（如big）或Attribute被舍弃，因为他们更适合用CSS来处理。
但UA依然可以支持老旧的属性和元素。这就是为什么HTML5标准清楚地划分了给开发的要求和给UA的要求。比如，开发者不应当使用plaintext元素，但UA需要兼容plaintext元素。
既然HTML5已区分对UA和对开发者的要求，再也不需将一些特性标记为deprecated了。
举个例子：
div+css一定会学习块状元素和行内元素，但这两个HTML元素概念从字面上却和CSS样式有着很深的联系，这种联系有悖于Web规范中一直倡导的表现和样式分离这种核心理念。
HTML5新规范中，已经淡化了元素的这两种分类，取而代之的方案是更具有语义的HTML元素分类方式，如下：
- 元数据式内容（Metadata content）：<base>、<command>、<link>、<meta>...
- 流式内容（Flow content）：<span>、<div>...[注：1]
- 章节式内容：<article>、<aside>、<nav>以及<section>
- 标题式内容：<h1>~<h6>、<hgroup>
- 段落式内容：<span>、<img>...[注：2]
- 嵌入式内容：<img>、<iframe>、<svg>、<audio>、<video>、<canvas>...
- 交互式内容：<a>、<button>、<select>、<input>...结论：
前端开发者在HTML5的开发中还继续使用css进行布局，但是更应该结合实际的页面的设计有意识的使用HTML5规范中的内容模型，并通过这些更具有语义的内容模型进行页面的normal flow设计。
详细的内容请看这里HTML5 Differences from HTML4
另外w3c上这篇文章也很好《HTML5 Differences from HTML4》 连接-->HTML5 Differences from HTML4
inline-block和float的区别
虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:
- 文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
- 水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
- 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
- 空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
- IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。