IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已，HTML5现在可以说是前端所有技术的代名词。需要学习的语言和工具不仅多，对于刚接触他们的新人会感觉很乱。另外，前端开发也会细分很多个开发岗位，不同的岗位所涉及的技术也会有差别，所以先要确定自己的发展定位，收集要学习的内容，整理好学习的顺序。很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑，再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。HTML5学习线路图，如图1.13所示：

图1

如图所示，如果需要掌握全部前端技术，可以分为三个阶段学习，循序渐进的逐步储备自己的知识量。当然也并不需要全部内容学习完成才能参加工作，每个阶段都有自己的定位，有对应的工作岗位，只是学习的内容越全面，发展空间也就越广泛。本书覆盖第一阶段全部内容，第二阶段和第三阶段可以参考本书的配套书籍。

1.5.1  第一阶段学习网页制作

第一阶段的学习也是Web前端技术的开始，虽然对于成手来说这部分是最简单的技术，但对于新手来讲开头是最难的。技术种类繁多，不知到从任处下手，所以必须有一个良好的学习路径。对于本书学习路径的规划可以参考以下几个步骤：

1．学习前端技术一定是从HTML开始，同时也要了解一些UI方面的知识。HTML是为了将内容放到网页上，像文字、图片和表单等，是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。也可以通过HTML中一些标签和属性做一些简单的页面布局和样式处理，但这是CSS强项，所以这方面的内容仅作为了解即可。目前学习HTML可直接从HTML5入手，重点掌握最新一代HTML语言的语义化标签。HTML的学习是一个记忆和理解的过程，需要通过代码和效果进行对照学习的方法，去弥补单纯识记HTML标签和属性的枯燥乏味。

2．在学习了HTML之后，只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化，就需要开始学习CSS技术。CSS即层叠样式表，是专门为页面中的HTMl标记添加样式的语言，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。当然也是像学习HTML一样，从基本的使用语法学起。然后掌握CSS和HTML配合使用的几种方式、CSS的样式选择器和常用的CSS样式属性。也是可以从CSS3直接开始学习，重点掌握CSS3中新增加的样式选择器和新的样式属性。由于样式属性比较多，所以划分成和外观相关的、与布局相关的，以及做盒子模型有关的几部分属性去学习。

3．其实学完HTML和CSS两门技术就可以编写页面了，但只能说你对HTML和CSS技术了解，对其中一些常用的知识没有完全掌握，也不能熟练在项目中去应用。要想达到技术使用成熟，下一步就必须学会HTML和CSS的结合使用，完成各种需求下的页面布局。像CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。当然和语言发展及应用场景不同，有很多种页面布局方法，像表格布局、浮动布局、定位布局、网格布局，以及响应式页面布局等。

4．虽然能布局页面就已经算一名合格的页面制作人员了，但由于CSS3有好多样式属性为了能兼容各种浏览器，同一个属性要不同的前缀写多次才能做到，特别是大型项目中CSS属性非常多。而SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。所以建议读者学完CSS以后，掌握SASS语言的用法。

5．如果你掌握了SASS的一些基本入门知识点后，可以趁热打铁，工欲善其事，必先利其器，你最好再去学习一下SASS工具compass，compass是SASS团队成员开发的，compass是对SASS的一个封装，目的是为开发者提供一些丰富的组件以及一些实用的工具模块。由于浏览器对CSS3支持的差异性，我们很多时候需要写一堆针对不同浏览器前缀样式，着实很烦人，compass帮我们解决了这个问题，我们只需include相应样式定义即可，compass会自动为我们生成针对不同浏览器的样式定义。

6．如果上面的提到的内容全部掌握了，就已经可以实现自己想要的效果了。可开发页面就像盖大楼一样，每天这样日复一日，年复一年的盖楼，非常繁琐。能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起。这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里笔者给你推荐给大家的是Bootstrap。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它是目前最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目，为所有开发者、所有应用场景而设计。Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。在项目开发过程中可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。所以能掌握一款好的前端框架对你是非常有帮助的。

7．基础知识掌握了，下一步就是能熟练使用这些技术。要想做到这一点那只有多看、多写、多练。通过不断开发项目积累经验，从实战中提升自己解决问题的能力、积累开发素材、摸索创新方法。“君子生非异也，善假于物也”，在开发和学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。同时还要善于使用Firebug这样的利器，一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能。几个项目跟下来一定可以成为页面制作专家。