随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。
对于零基础的人而言，要怎么学习web前端呢
1、 前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。
2、 前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建项目及开发项目。
3、 Nodejs + 前端框架。主要内容为Nodejs 全面进阶、Koa2+MongoDB搭建服务、Vuejs 框架、Reactjs 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功
这个可以看看HTML5课程大纲了解啊，分阶段学习的，不同阶段学习的内容可以了解下。
第一阶段：PCterminal
★ PC端页面重构
1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；
2、HTML5核心元素及布局应用；
3、CSS3核心属性及布局应用；
4、图形、图像软件的使用（PS,FW,AI）；
5、浏览器兼容及解决方案；
6、整合、滑动门及宽高自适应等高级应用技术；
7、初步接触JS。
★ PC端交互开发（原生JS）
1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；
2、DOM *** 作和BOM *** 作；
3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；
4、Ajax动态读取数据、异步 *** 作、与DOM、JSON的结合使用；
5、各种主流浏览器兼容性处理；
6、单例、工厂、代理、观察者等设计模式；
7、ECMA60新特性介绍。
★ PC端交互开发 （JQuery）
1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念
2、jQuery各种选择器的使用，及选择器的应用优化；
3、Dom节点 *** 作、插入、删除、复制、移动节点等 *** 作；
4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；
5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；
6、表单开发，设计可用性表单、表单验证、增强型表单；
7、Ajax、XML>
下面是示例代码，带注释，请仔细阅读：
1、 父窗口 A
<head><!-- 引入 artDialog 文件 -->
<link href="/skins/defaultcss" rel="stylesheet" />
<script src="/artDialogminjs"></script>
<script>
// 全局变量，保存d窗窗口句柄
var dialog;
// 定义 d出窗口 *** 作 函数
windowmyDialog = function(){
// 如果之前有已经打开的d窗，则先将其关闭。
if (dialog) dialogclose();
// d出窗口
dialog = artdialog({
title: '登录',
content: '密码：<input id="login-pw" type="text" value="" />'
+ '<iframe src="C"><\/iframe>',
lock: true,
fixed: true,
ok: topcloseMyDialog, // 处理窗口关闭 *** 作
okValue: '登录',
cancel: function () {}
});
}
// 定义 关闭窗口 *** 作 函数
windowcloseMyDialog = function(){
// 处理d出窗口的内容
alert(documentgetElementById('login-pw')value);
// 关闭窗口
dialogclose();
// 改变 iframe 框架指向
frames[0]locationhref = 'anywhere_u_wanthtm';
}
</script>
</head>
<body>
<!-- iframe 框架结构 -->
<iframe src="B"></iframe>
2、 Iframe 窗口 B （在 A 中）
<input type="button" onclick="topmyDialog();" value="d出窗口" />3、 其实上面两个的结构应该足够使用了。但如果你非要在 C 窗口中 *** 作，那么 C 中的按钮可以这样：
<input type="button" onclick="topcloseMyDialog();" value="关闭" />=====
总结：
其实说穿了，就是通过 top 对象来获取顶层窗口，进行对应的 *** 作。通过 frames 来对子框架进行 *** 作。
以上，请采纳，请给分。
看得出来你不太懂 JS，先把代码给你，做了很多注释，先仔细看看，然后后面讲解为什么：
// 检查表单的函数
function checkForm() {
/ @type {string} 数据容器 /
var merArr="";
/ @type {number} 局部循环指针 /
var p=0;
/ @type {Array<Element>} 获取待提交的表单元素 /
var items = documentgetElementsByName("add_mer");
// 遮罩
ExtgetBody()mask("数据保存中，请稍等"); //这里没有起作用
// 开始检查
doCheck();
function doCheck(){
/
循环构造字符串
为了避免长时间阻塞，每一段仅允许循环 100 次
如果一次不能完成，则分组完成
/
for(var i=0; i<100 && p<itemslength; i++, p++) {
if (items[x]checked) {
merArr =merArr+Trim(items[x]value)+",";
}
}
// 如果循环结束
if (p === itemslength) complete();
// 如果循环没有完成，则用 setTimeout 交出控制权，延迟循环
else setTimeout(doCheck, 1);
}
// 检查结束，真正的处理表单
function complete(){
documentgetElementById("merArray")value = merArr;
if(merArr==""){
alert("请勾选!");
ExtgetBody()unmask();
return false;
}
documentforms['listForm']action = 'addGroupMeraction';
documentforms['listForm']submit();
}
return false;
}
下面是讲解：
1、 JS 是阻塞式的。在一个 JS 函数正在执行的时候，对 DOM 的渲染其实对于用户来说是不可见的。也就是说，你在一个 JS 循环中不论对 DOM 做了什么，用户都是看不到中间过程，只能看到一个最终的结果。
2、 所以，上面代码的核心是，把耗时特别长的 *** 作部分，使用 setTimeout 延迟。 setTimeout 可以把控制权还给浏览器，留出足够的页面渲染时间。
3、 setTimeout 的过程中，要注意变量的处理。对于闭包的应用是一个需要注意的地方。
以上，请采纳，请给分。
问题一：页面重构怎么 *** 作页面重构怎么 *** 作 您好，基本的HTML+CSS+Javascript是需要掌握的，基本的photoshop *** 作是需要会的。然后掌握一些常用的框架，比如jquery,bootstrap等。掌握的技术当然是越多越好，但是还需要一定的深度。加油！！
问题二：网页重构和web开发前端有什么区别吗？？ 个人理解：
网页重构注重用户体验的设计，什么地方应该放什么东西，什么地方点击以后是什么效果。等这些的设计工作；
而web开发前端更多在与开发和代码编写，在前面设计的基础上实现这些功能。
so，一个是用户体验设计师，一叮是前端开发师。
问题三：网页重构师或页面重构师要掌握什么技能 10分 您好，基本的HTML+CSS+Javascript是需要掌握的，基本的photoshop *** 作是需要会的。然后掌握一些常用的框架，比如jquery,bootstrap等。掌握的技术当然是越多越好，但是还需要一定的深度。加油！！
问题四：请问用HTML5怎么重构一个已有的网站 对于一个已有的网站，而且在界面上不进行改动，那么主要就是在HTML标签上进行改动一下，把HTML5的标签用上去即可。
比如你原来头部可能是这样写的
那么现在你可以用上HTML5的标签
然后有些原来用js实现的东西可以通过html5来实现，当然不支持html5的浏览器最好还是用js来弥补一下。
比如原先你可能验证email是通过js的
现在你可以利用html5
让浏览器自动验证email，但是js部分最好不要舍弃，还是要保留的，这样的话一些不支持HTML5的浏览器还是能够正常使用的。
问题五：JS一般般的网页重构可以使用Nodejs做些什么 百度一下 js获取 *** 作系统。当你知道了 *** 作系统是什么的时候。就做一个js跳转 到其他网页，他在看不了了
问题六：在做网站页面的时候,主页切片及使用XHTML+CSS设计主页面的详细步骤有哪些 1 P罚设计页面。
2 切图：把页面切成符合要求的小图。
3 组合：在DW（使用范围较广，也可以是你用着顺手的其它软件）中，用xhtml+css构建符合要求的页面。
4 测试浏览器的兼容情况。
问题七：一名合格的前端工程师的知识结构是怎样的 做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。
单纯的页面重构，所涉及到的工作内容一般是“分析设计稿= > 切图= > 写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。
跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：
1 结构完整，可通过标准验证
2 标签语义化，结构合理
3 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化
很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿= > 切图= > 写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：
一，设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
1 能分清设计稿中的公共与私有的部分
2 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
3 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
4 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
5 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）
上面这些都是在还没开始动手制作之前所要做的。
二，切图
切图是指将设计稿切成便于制作成页面的。都有个误区，觉得切图就是把切出来，其实并不完全是这样，还包括把切出来的合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：
1 切成所需要的（如何将需要的部分切出来）
2 在1的基础上，对切出来的进行一些优化（包括压缩文件大小、选择类型）
3 在2的基础上，规划切出来的（包括文件分布）
4 在3的基础上，考虑整体的性能（包括合并、压缩文件大小）
HTML和CSS的编写
HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：
1 还原设计稿视觉效果，并通过标准验证（HTML）
2 在1的基础上，实现多浏览器的兼容（HTML）
3 在2的基础上，标签语义化（HTML）
4 在3的基础上>>
问题八：JS一般般的网页重构可以使用Nodejs做些什么 00 张鑫旭 工作内容以静态页面呈现为主的前端，可能并未把玩过Nodejs，且很有可能对Nodejs都没有一个比较立体的认识――知道这玩意可以跑服务，构建很多前端工具，看上去很厉害的样子，但是，可能就仅限于此了。
问题九：现在做网页前端的学习路线是什么 20分 学习HTML5，可以了解HTML5课程大纲，分阶段学习，详细的阶段学习课程如下：
第一阶段：PCterminal
PC端页面重构
1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；
2、HTML5核心元素及布局应用；
3、CSS3核心属性及布局应用；
4、图形、图像软件的使用（PS,FW,AI）；
5、浏览器兼容及解决方案；
6、整合、滑动门及宽高自适应等高级应用技术；
7、初步接触JS。
PC端交互开发（原生JS）
1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；
2、DOM *** 作和BOM *** 作；
3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；
4、Ajax动态读取数据、异步 *** 作、与DOM、JSON的结合使用；
5、各种主流浏览器兼容性处理；
6、单例、工厂、代理、观察者等设计模式；
7、ECMA60新特性介绍。
PC端交互开发 （JQuery）1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念。2、jQuery各种选择器的使用，及选择器的应用优化；3、Dom节点 *** 作、插入、删除、复制、移动节点等 *** 作；4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；6、表单开发，设计可用性表单、表单验证、增强型表单；7、Ajax、XML>
可以看看HTML5混合式开发课程体系了解各个课程阶段学习的内容，大致分三个课程阶段学习：
第一阶段：PCterminal
★ PC端页面重构
1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；
2、HTML5核心元素及布局应用；
3、CSS3核心属性及布局应用；
4、图形、图像软件的使用（PS,FW,AI）；
5、浏览器兼容及解决方案；
6、整合、滑动门及宽高自适应等高级应用技术；
7、初步接触JS。
★ PC端交互开发（原生JS）
1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；
2、DOM *** 作和BOM *** 作；
3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；
4、Ajax动态读取数据、异步 *** 作、与DOM、JSON的结合使用；
5、各种主流浏览器兼容性处理；
6、单例、工厂、代理、观察者等设计模式；
7、ECMA60新特性介绍。
★ PC端交互开发 （JQuery）
1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念
2、jQuery各种选择器的使用，及选择器的应用优化；
3、Dom节点 *** 作、插入、删除、复制、移动节点等 *** 作；
4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；
5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；
6、表单开发，设计可用性表单、表单验证、增强型表单；
7、Ajax、XML>
8、在jQuery中编写插件、插件扩展、插件应用、jQuerypagination分页、jQueryqtip信息提示、 jQueryartDialogd出层、jQueryjscrollpane滚动条；
9、理解模块式开发，以及requirejs插件的使用。
★ PC项目实训
1、了解项目需求，项目流程；
2、了解项目管理，模块分配，项目时间预估；
3、了解产品周期，参与团队协作；
4、综合运用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技术，完成大型PC端项目开发。
第二阶段：Mobile terminal
★ HTML5+CSS3新添特性
1、HTML5概述，新增的元素和废除的元素、全局属性；
2、HTML5基础：新增文档结构元素（Article、section、nav）智能表单、文件API（FileList对象和File对象、FileReader接口）、拖放API；
3、CSS3基础：新增的后代选择器、伪类选择器、文本阴影、圆角、盒阴影、变形处理（transform）、动画（transitions）、帧定义（key-frames）、旋转（rotate）、 animation；
4、HTML5多媒体audio音频元素、Video视频元素、视频回调事件；
5、本地存储web storage、本地缓存；
6、定位基础知识以及原理，结合google（高德）地图定位；
7、响应式布局概念以及语法（@media）、web网页和mobile网页的区别、样式继承；
8、Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、创建动画。
★ WebAPP项目开发及实训
1、angularjs、backbonejs；
2、数据交互，ajax与DOM交互应用；
3、HTML5+CSS3在实际项目中的应用；
4、项目管理，模块分配，项目时间预估；
5、产品周期，团队协作；
6、微信场景开发；
7、微信平台互动开发。
第三阶段：混合应用开发及实训
★ 混合应用开发及综合实训
1、混合开发原理；
2、APP与webAPP；
3、混合应用与HTML页面交互；
4、通过客户端传递数据；
5、项目的版本迭代；
6、项目打包与应用，生成APK。
以上就是关于想学习前端。求学习路线。先学什么 后学什么。。以及书籍推荐全部的内容，包括:想学习前端。求学习路线。先学什么 后学什么。。以及书籍推荐、几个必须掌握的css概念：重用，子选择器和组选择器、js子窗口关闭，父窗口跳转指定页面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）