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方便地查看、分析别人网站的源代码,“偷”也是一种技能。几个项目跟下来一定可以成为页面制作专家。
IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作的更多相关文章
- IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段
第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...
- IT兄弟连 HTML5教程 HTML5的曲折发展过程 浏览器之间的大战
播放电影和音乐要使用播放器,浏览网页就需要使用浏览器.浏览器虽然只是一个设备,并不是开发语言,但在Web开发中必不可少,因为浏览器要去解析HTML5.CSS3和JavaScript等语言用于显示网页, ...
- PHP四个阶段目标以及第一阶段学习内容
PHP课程体系主要分为四个阶段,第一阶段讲的是网页HTML和数据库MySQL,第一阶段要学会网页制作的基础知识,熟用各种基本标签,对数据库进行操作,各项考核都能够达标,拿出出众的项目展示. 在第二个阶 ...
- Java学习开发第一阶段总结
前言: 按照学院的安排我专业应该在下学期学习Java课程,因为对技术的热爱,我选择了在本学期学习Java.俗话说得好“笨鸟先飞”,那我就先学习这门课程了. 第一阶段的学习总结: 在此次阶段任务相对比较 ...
- HTML学习案例-仿慕课网网页制作(二)
制作部分:网页footer部分 制作效果: 涉及知识:link部分要复习: dl- definition list dt- definition title dd - definition descr ...
- IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作
现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...
- IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具
如何选择开发工具 有许多可以编辑网页的软件,事实上你不需要用任何专门的软件来建立HTML页面,你所需要的只是一个文本编辑器(或字处理器),如Office Word.记事本.写字板等.制作页面初学者通常 ...
- IT兄弟连 HTML5教程 HTML5的基本语法 了解Web
HTML也是计算机编程语言,但由于功能简单易用,不涉及业务逻辑,算是编程语言中最简单的了.其实学习HTML这门语言,就是在学习一个个HTML标记的使用,标记的名称和使用不是自定义的,它的功能及用法是已 ...
- IT兄弟连 HTML5教程 HTML5和HTML的关系
HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...
随机推荐
- Keepalived集群软件高级使用(工作原理和状态通知)
1.介绍 Keeaplived主要有两种应用场景,一个是通过配置keepalived结合ipvs做到负载均衡(LVS+Keepalived),有此需求者可参考以往博文:http://lizhenlia ...
- ubuntu18.04因java路径原因启动jenkins失败
我的云服务器ubuntu18.04上本来装了jenkins,今天安装完tomcat后,将原有的openjdk卸载了,安装了jdk8u192, 此时浏览器访问8080端口显示的就是tomcat安装成功的 ...
- core-js@3带来的惊喜
core-js 这个名词肯定很多人没听过,今天也是在配置babelpolyfill方法发现的 起因 在使用useBuiltIns:usage按需加载polyfill时,npm run build,就出 ...
- css流星 效果
style: .loding { width: 100%; height: 100%; } .bg{ width: 100%; height: 100%; ...
- FLV提取AAC音频单独播放并实现可视化的频谱
如上图,要实现对FLV直播流中音频的识别,并展示成一个音频相关的动态频谱. 一. 首先了解下什么是声音? 能量波,有频率有振幅,频率高低就是音调,振幅大小就是音量:采样率是对频率采样,采样精度是对幅度 ...
- go语言面向对象之方法
1.实现方法 package main import "fmt" //在面向对象编程中,一个对象其实就是一个简单的值或者一个变量,在这个 //对象中包含一些函数 //这种带有接受者 ...
- [Spring cloud 一步步实现广告系统] 5. 投放系统配置+启动+实体类
广告投放系统启动主类说明 /** * SponsorApplication for 广告赞助商/投递服务启动类 * 添加注解{@link EnableFeignClients}之后,当前微服务就可以调 ...
- 原生js获得八种方式,事件操作
08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...
- Cesium专栏-样条插值(平滑路径、飞行动画,源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- Java日期处理组件joda-time
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/175 Java日期处理组件joda-time 平常在开发过 ...