HTML是什么？

HTML： 指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。 另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入更多惊喜，尽管 HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，更多的效果和应用也能更方便的实现。 前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。

第一阶段——HTML的学习。　

超文本标记语言（HyperText Mark-up Language 简称HTML）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。

HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的！

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

于是进入第二个阶段——CSS的学习。

培训是针对那些有条件的人来说，很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的，为了让想学习的人可以更好的学习，给大家推荐一个裙，前面是6 1 1，中间是肆 二 8，最后面就是壹 四  二，这里有很多想学习的人和你一起交流，也有大牛每天晚上免费教学，想要学习的人都可以加入我们，但是我们只欢迎想学习的人，不是来学习，随便看看的就不要进了。

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。

为了完成这个任务，我们进入第三个阶段——JavaScript的学习。

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM *** 作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅！有么有？

此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道:

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容？”瞬间石化了有木有？

“我擦，坑爹啊！那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。

接下来我们进入第四个阶段——jQUery的学习。

jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器（jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持），同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其write less,do more的核心宗旨。这个Feel倍儿爽！有么有？

“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？可以实现吗？答案是肯定的。

这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！

Web前端的学习建议

最后给大家聊聊在学习Web前端中的一些建议和方法。

在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。

“君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。

同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能！

随着移动互联网热潮的到来，移动开发越来越受到大家的追捧，响应式布局、微网站等需求量不断增加，也是我们Web前端未来的发展方向之一，学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地！

1. Twitter BootStrap （Apache v2.0；响应式）

时髦、直观并且强大的前端框架，让Web开发变得更加容易。

2. Foundation （MIT；响应式）

最先进的响应式前端框架。

3. 960gs（GPL&MIT；响应式）

960gs提供了一个简单的网格系统，适合快速开发。

4. Skeleton（MIT；响应式）

非常漂亮的Web模板，适合响应式、移动友好的开发。

5. 99lime HTML KickStart（Free）

适合网站快速开发的极简HTML构建模块。

6. Kube（Free；响应式）

面向专业人员的CSS框架。

7. Less Framework（MIT；响应式）

自适应的CSS网格系统。

8. Flameinwork（Free）

适合懒人开发者的前端微框架。

9. G5 Framework（Free）

(x)HTML5、CSS、PHP前端开发框架。

10. Easy Framework（Free）

Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。

11. Blueprint（Free）

一个旨在减少开发时间的前端框架。

12. YAML（Creative Commons）

(x)HTML+CSS框架，适合开发现代化浮动布局。

13. BlueTrip（Free）

一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。

14. YUI3:Grids CSS（BSD）

YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。

15. 52framework（Creative Commons）

对HTML5支持非常好，简单易用。

16. elastiCSS（MIT）

一个基于Web接口和印刷布局的简单CSS框架。

17. Emastic（Free）

一个与众不同的CSS框架。

18. Fluid 960 Gride System（GPL/MIT）

Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。

19. xCSS（MIT）

一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。

20. EM CSS Framework（MIT/GPL）

EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。

---