前端学习技能需求

第一篇：前端学习技能需求

web前端学习路线

一、首先需要学会的是html和css

推荐编码工具：notepad，记事本，dreamwere，sublime。

推荐学习方法：先参考有关书籍，跟着案例走一遍。然后去w3school上学习。然后进行基础的巩固，模仿一些网页，尽最大能力去编写。

注意：前期学习时就要养成代码的规范性，最简单的就是标签的对齐,和简单的注解。

代码演示：

第二篇：最新web前端学习路线

最新web前端的学习路线

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 很多前端初学者总会问以下两个问题： 第一种一直在问：如何学习前端？

第二种总说：前端很简单，就那么一点东西。

我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。详细了解成为一个优秀的前端工程师，都需要具备哪些特质？ 何为前端工程师

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript!

HTML 甚至不是一门语言，他仅仅是简单的标记语言!

CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。

Javascript 的基础部分相对来说不难，入手还算快。

此篇文章中就HTML、CSS、JS都有哪些区别？进行了全面的解读！

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

现在市场很需要优秀的、高级的前端工程师。

一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。如何学习前端知识

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。

而学习Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!

如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。

如果你想当深入了解Javascript，你需要了解 Javascript 的原理、机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。

还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。

初学者全面了解JavaScript，用心读这篇文章 掌握六大JavaScript框架，薪水就是比同级别高！

作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

优秀的前端工程师应具备什么条件

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。

在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。成为一个优秀的前端工程师，都需要具备哪些特质？

现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，它的主要职能就是把网站的界面更好地呈现给用户。

优秀的Web前端开发工程师应该具备快速学习能力

Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上 Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。

对于一个高手来说，新技术不过是就技术的延伸。优秀的前端工程师需要具备良好的沟通能力

因为前端工程师至少都要满足四类客户的需求：

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。总结

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3” 这些都要深入研究!

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。

人们常说：不想当裁缝的司机，不是个好厨师。

在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳，如果你对前端开发有更多的见解以及不同的意见，欢迎留言将您的见解分享给所有web前端开发爱好者。

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 现在互联网的大环境的发展如日中天，网络已经深入到每个人生活的的各个方面，各种项目层出不穷，以及各种定制化的ui风格神马的，PC端、手机端、mobile端，各种兼容问题真的很浪费时间，大家在不断的摸索中发现，把html+css+js这部分工作独立出来一个新的岗位来处理。发展前景我是看好的，对于一个技术行业，我认为首先如何提升自己的个人能力是保持行业发展的源动力。没有真是过硬的技术，前景发展都是免谈。

那么很多情况又是这样： 第一种一直在问：如何学习前端？

第二种总说：前端很简单，就那么一点东西。

我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。详细了解成为一个优秀的前端工程师，都需要具备哪些特质？ 何为前端工程师

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript!

HTML 甚至不是一门语言，他仅仅是简单的标记语言!

CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。

Javascript 的基础部分相对来说不难，入手还算快。此篇文章中就HTML、CSS、JS都有哪些区别？进行了全面的解读！

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

现在市场很需要优秀的、高级的前端工程师。

一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。

如何学习前端知识

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。

而学习Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!

如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。

如果你想当深入了解Javascript，你需要了解 Javascript 的原理、机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。

还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。初学者全面了解JavaScript，用心读这篇文章 掌握六大JavaScript框架，薪水就是比同级别高！

作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

优秀的前端工程师应具备什么条件

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。

在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。成为一个优秀的前端工程师，都需要具备哪些特质？

现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，它的主要职能就是把网站的界面更好地呈现给用户。

优秀的Web前端开发工程师应该具备快速学习能力

Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上 Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。

对于一个高手来说，新技术不过是就技术的延伸。优秀的前端工程师需要具备良好的沟通能力 因为前端工程师至少都要满足四类客户的需求：

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

总结

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3” 这些都要深入研究!

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。

人们常说：不想当裁缝的司机，不是个好厨师。

在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。

第三篇：Web前端开发学习笔记分享

www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障

Web前端开发学习笔记

对于Web前端初学者而言，前人的学习经验及总结，能让自己的学习事半功倍；我在泛艺学苑学习Web前端开发已经有一段日子了，课程内容个人觉得很全面、专业；下面是我通过这段时间学习，总结的一些Web前端开发学习笔记【前端开发需要学哪些？>>】，一是为了给自己加深印象，二是希望能帮助其他Web前端学习者们；以后内容会持续更新，也欢迎大家进行补充。【获取全套学习资料>>】

HTML篇总结

非可视化标签：head meta style scrpit...可视化标签：img div span a ul li… 只有可视化标签，才能用css改变它 单标签：meta link base img input br hr 双标签：html head body div a p span..ul li ol dl ….常用可视化标签 div：一般用它来布局 a 超链接标签

href*属性：设置跳转的网页地址 target属性：设置跳转的目标

结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签 img：src*属性用来设置图片的url数据、alt提供给搜索引擎搜索的 ul li：列表；结论：只要将来设计页面中有固定样式的列表，就用ul和li table caption tr td(th)：慢慢已经被淘汰了 被ul li代替 如果是合并竖排的就是合并行（rowspan）www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障

如果是合并横排的就是合并列（colspan）HTML部分导图总结 标签集合

www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障

www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障

以上即为我在泛艺学苑这一阶段学习关于Web前端开发的总结以及笔记，接下来将要学习CSS；后续我会将Web前端开发学习总结陆续进行更新。

泛艺学苑采用的在线教育，对于身处三线城市的我而言提供了很大的便利，平时有经验丰富的老师直播授课，课后有专业的老师进行一对一辅导，还给我提供了大量的学习资料，虽然现在才刚开始学习，但是我有信心学完后，能够找到一份满意的工作。情>>】

【了解课程详

第四篇：web前端学习总结2

1.WEB标准以及W3C标准是什么？

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。

1.xhtml和html有什么区别

XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。

3.行内元素有哪些？块级元素有哪些？

行内元素: a b img em br i span input select strong textarea

块级元素：div p h1-h6 form ul dl ol table 4.行内元素和块级元素有什么区别？

行内元素不可以设置宽高，不独占一行;

块级元素可以设置宽高，独占一行。

5.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？

margin-top,padding-top无效

6.CSS的盒模型由什么组成？

内容，border ,margin，padding

7.说说display属性有哪些？可以做什么？

display:block行内元素转换为块级元素

display:inline块级元素转换为行内元素

display:inline-block转为内联元素

8.CSS 选择符有哪些？

1.id选择器（# myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel = “external”]）

9.伪类选择器（a: hover, li: nth-child）

9.哪些css属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height;

10.css优先级算法如何计算？

!important > id > class > 标签

!important 比 内联优先级高

*

优先级就近原则，样式定义最近者为准;

*

以最后载入的样式为准;

11.text-align:center和line-height有什么区别？

text-align是水平对齐，line-height是行间。

12.前端页面由哪三层构成，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js

13.标签上title与alt属性的区别是什么？

Alt是图片属性，让搜索引擎认识你的图片。当图片不显示的时候显示。

title是网站标题，是seo中最重要的属性。(seo:做关键词给百度搜索用的)

14.使用css 精灵有什么好处？

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻HTTP的请求数量。

15.什么是语义化的HTML？

标签使用的合理性，对于搜索引擎的抓取有好处。

16.b标签和strong标签,i标签和em标签的区别？

后者有语义，前者则无。

17.tite与h1的区别。

title侧重于网站信息标题

从文章而言，h1侧重于文章主题

站在seo的角度看，好网站少不了title，好文章少不了h1标题，title权重高于h1。

18.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动clear:both（缺点，增加无意义的标签）

2.使用overflow:auto（使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

19.display:none和visibility:hidden的区别是什么？

visibility: hidden----将元素隐藏，但是还占着位置。

display: none----将元素的显示设为无，不占任何的位置。

20.说出几种IE6 BUG的解决方法

1.双边距BUG float引起的 解决：使用display：inline , 取消元素的块级属性。

2.3像素问题 使用float引起的 解决：使用dislpay:inline;margin：-3px

3.超链接hover 点击后失效 解决：使用正确的书写顺序 link visited hover active

4.Ie z-index问题 解决：给父级添加position:relative

5.Png 透明 解决：使用js代码

6.Min-height 最小高度！Important 解决

7.img出现边框

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的overflow:hidden,zoom:0.08 line-height:1px可以解决）

21.域名和服务器相关知识？

22.HTTP状态码都有那些。

200 OK

//客户端请求成功

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

23.如何优化网页加载速度？

1.减少css，js文件数量及大小(减少重复性代码，代码重复利用)，压缩CSS和Js代码

2.图片的大小

3.把css样式表放置顶部，把js放置页面底部

4.减少http请求数

5.使用外部 Js 和 CSS

24.position属性absolute与relative的区别？

absolute绝对定位 //相对于浏览器定位

relative相对定位 //相对于前面的容器定位

25.HTML5 的有那些新标签？

26.CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

27.全局变量和局部变量有什么区别？

28.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

29.documen.write和 innerHTML有什么区别？

DOM的innerHTML是DOM元素对象的一个属性

而write是document对象的一个方法

第五篇：前端面试题

1.自我评价一下HTML/CSS/JS的掌握情况

2.简述HTML经常使用的标签和作用。

Div/a/p/span/li/ul/ol/table/tr/td

3.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?

IE6 PNG

IE6 Fixed

4.块级元素和行内元素都有哪些? 行内元素有哪些特点?

5.介绍所知道的CSS hack技巧(如：_，*，+，9，!important 之类)

6.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

 static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

 absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

 fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

7.函数的几种定义方法

function a(){},var a = function(){}

8.对象的定义方法

a = new Object(), a = {}

9.类的定义方法（prototype）（继承）

Var a = function(){}

a.prototype = {}

new a();

10.this 关键字的指向

obj.foo()== obj

foo()== window;

new obj.foo()== obj //方法调用模式,this指向obj //函数调用模式,this指向window //构造器调用模式, this指向新建立对象

foo.call(obj)== obj;//APPLY调用模式,this指向obj

11.DOM操作

在

将Body的innerHTML重写和将