自学web前端开发,请问从何入手呢？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自学web前端开发,请问从何入手呢？相关的知识，希望对你有一定的参考价值。

尤其css布局。弄得头昏脑胀的。做出来的效果总是和预想的不一样。也不知道什么原因。请猛烈推荐讲解细致的入门方法吧

学习前端，要从学习html和CSS开始着手。关于这部分的学习，网上可选择的资料就太多了，这里不一一列举，题主百度搜索栏搜索 HTML 教程，或者css 教程，就可找到相关资料。

接着是学习前端的一个难点、也是重点，就是javascript。

首先，初学一门语言，要秉承一个原则：“能动手的，尽量别吵吵”

另外，你需要一个能够从简到难的知识体系，一步一步跟下来。

下面是干货。

体系：上图。

说明一下这张图，题主提问如何有效学习JS，我这里理解为JS原生，所以关于框架、工作流的内容，没有具体展开，题主有兴趣可以自行搜索。

一、文档资料

    红宝书(基础)：https://book.douban.com/subject/10546125/

    蝴蝶书(进阶)：https://book.douban.com/subject/11874748/

    阮一峰老师ES6: http://es6.ruanyifeng.com/

    权威官方文档MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/

二、学习步骤

    语法和基本类型

    控制流

    循环

    表达式和操作符

    日期对象

    正则表达式

    对象

上面这些搞定，就已经掌握了ES5的最基本的内容了，接着，我们就可以来操作页面了。毕竟这是一个看脸的社会，我们在搞页面的同时，还要注意一下页面的样式。

8.DOM操作

1>DOM树的概念

2>从DOM树取节点

3>操作这个DOM树(节点的添加、删除、修改)

4>访问节点(parentNode, children, 等等)

5>属性操作(id, className)

9. 事件处理

1>鼠标事件(mouseove)

2>键盘事件(keyup)

3>浏览器事件(load)

好，到这里，基本上静态页面，你就可以随意玩耍了。这里我们最好降上面思维导图提到的例子，都撸一遍。一是加深上面知识点印象，二是锻炼一下编程的逻辑思维能力。具体实现，网上有一堆堆的。（这里让题主自己搜索，是因为编码的一项重要能力，就是搜索）一定要谨记，多敲代码。

10. 面向对象：原型式继承、原型链

11. ES6：

ES6跟ES5还是有较大的区别，所以建议你能系统的过一遍，将上面的练习，改为使用ES6再来一遍

三、调试

1、JS编程的调试非常简单，打开浏览器控制台(我个人比较钟爱Chrome)。如图：

1> console标签：这个标签，可以打印我们开发时，JS引擎为我们抛出的异常。我们可以根据这个异常的信息，来分析错误原因。另外，我们也可以在代码中使用console.log() 输出程序运行时的环境变量信息。

2> 右红框1：错误提示。说明当前页有一个error发生，点击他，可以跳转到console来查看错误具体信息

3>右红框2：警告信息。提示了我们程序潜在的危险。

4> source，我们进行单步调试的地方。具体见下图

（四）、工作流(跟JS原生关系不大，不详细展开了)

    webpack

    gulp

上面的内容结束后，就可以进入前端框架的海洋中畅游了。

 参考技术A 你首先要搞清楚前端开发是做什么的，才好有方向去努力。如果你只是想切图（把PSD的图片写成html代码），我建议你还是先找几本书来看，书店里有很多HTML+CSS+javascript的书，就是一本全讲完的，挑你能看的懂的书看，不一定要多么有名气的作者，也不一定要外国作者的书，因为你现在刚刚开始学，需要基础。HTML标签很重要，先别研究HTML5，和CSS3。好好学习HTML和CSS，有空看一下简单的JS语法，写点简单的JS程序，如果你想深入了解JS更是有一大堆书值得学习。还有jquery，当然这是后话了。
然后你还要重新认识浏览器，你会发现浏览器是个神奇的东西，一般会把你弄奔溃。电脑上多装几种浏览器，从开始布局网页就要开始不断的测试。（浏览器兼容也是你要考虑的）
这样差不多你就可以入门了，至于以后的，代码风格和规范你要经常阅读别人的代码，思考人家为什么这样写的的好处，慢慢有自己的代码风格。本回答被提问者采纳 参考技术B

一 · 前端零基础入门

从前端基础入门知识学起，掌握基本的HTML+CSS网页布局，以及简单的JS特效，最终可以独立开发出前端PC网页。

注：CSS是一种定义样式结构如字体、颜色、位置等样式的语言，被用于为页面添加效果。需要全面了解CSS的基础语法、选择器、文本、背景、列表、盒子模型、浮动、定位以及网页的布局方式。

二 · 响应式开发与常用框架

使用H5+CSS3实现网页动态特效，通过Bootstrap框架学习，从原生编码过渡到框架使用，更高效的开发出适配各个设备的响应式网页。

注：需要全面了解主要包括CSS3的选择器、边框、圆角、背景、渐变、文本、字体、转换、过渡、动画、多列布局以及用户界面。

三 · 组件化思想开发电商网页

学会H5进阶内容：svg、canvas、H5存储、拖拽上传等，对JS、jQuery进行提升，学习企业开发模式——组件化开发,在企业项目团队中协同合作，实现“高内聚、低耦合”的网页搭建。

四 · 热门框架Vue开发WebApp

学习JS的最新版本ES6，前端流行框架Vue.js， 结合最流行的打包工具Webpack，掌握一个项目上线前的所有开发流程，真正成为一个能够满足企业需求的前端工程师。

 参考技术C 　　其实，学习前端开发是一件很有趣的事情，你可以很简单的几行代码实现很炫丽的效果。这个刚开始的时候你可能觉得很难，不知道如何下手，不知道怎么学。这个时
候你需要有人指点你一下，该先学什么后学什么。在这里我要说明一点，想学好前端开发，必须要有浓厚的兴趣，而不是一时脑热、冲动。如果是这样的话，即使有
高手指点，也学不好，因为你的心就不在这里。废话不多说了，直接进入主题。

首先，了解前端开发

Web
前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户
使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变
化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现
的。说得直白点就是美工photoshop,交互设计,flash,js,html+css。就小规模公司而言,一个技术员都得会这几样技能,这样很锻炼
人的,慢慢的你就会成为公司的主力。大规模的公司把这些分得很细,所以,你可以精通一门,熟悉其他的,进军大公司。 参考技术D

学习通常看视频会快一点，css3，h5，js是基础，根据你的情况，从你的问题来开，你还需要多加努力，如果你是计算机相关专业的，你可以去国内的菜鸟教程，w3school等网站上学学，如何觉得枯燥，可以看看视频，国有有很多视频网站，他们的一部分视频是免费的，边学边练习，学习前端应该不是很难；如果你不是计算机相关专业的，自学是很困难的，因为你没用相关的编程基础，不好学习，如果真的对前端很感兴趣，你可以向自己的盆友请教开导你会好一些，实在没法去培训下也可以

前端的学习路线基本是 (html+css+html)->(dom+bom)->(jquery,bootstrap,vue等框架),万丈高楼平地起，学习编程重在上机实战，只是看永远学不会，初学者多敲敲别人的demo，多写写代码，入门是没有问题的

遇到自己不懂的问题多去google，百度，去看看别人的博客，收益无穷，这个网站收藏了一些，对你可能有帮助网站收藏，最后，要想有好的成就，记得关注别人的博客，跟着大牛们学习，你应该加入一些社区论坛，这样可以向别人学习和实时了解技术的新趋势，别闭门造车。备注一下，这里可能是以后你常来的地方，不妨先去了解了解 github

自学H5第一天笔记

1.web前端开发工程师

1.web前端开发工程师是做什么的

要与网站打交道

2.成为一名web前端开发工程师需要具备的条件

1、兴趣

2、敲代码

3.web前端开发需要学习什么

1、软件

  浏览器:有非常多种-常用的:谷歌(推荐) 火狐 IE

  浏览器调试工具:option + command + j(MAC) F12(windows)

  编辑器:hBuilder（推荐-国产）下载地址:http://www.dcloud.io/、sublime、dreamever

  PS: 

2、语言

  HTML  CSS  JavaScript

 

 

==========HTML============

超文本标记语言  (结构)

标签:<html>  </html>  <meta/>      文本:

 

==========CSS=============

层叠样式表 （样式）

style="width: 200px ;height: 300px;background: red;"

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<title>--标题--</title>

</head>

<body>

我的第一个网页

<div style="width: 200px ;height: 300px;border: 2px solid red;background: url(https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDpYFkeOp4Q6pFbNJ4u326Al1uzPkAWXccHkmreK0YeFnXC0UCxk4IpFvmlk3xFqUc/220?tp=webp);">这是一个方块</div>

</body>

</html>

==========JavaScript=========

脚本语言  (行为)  

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<title>--标题--</title>

</head>

<body>

我的第一个网页

<div onclick="this.style.width=‘800px‘;this.style.height=‘500px‘;" style="width: 200px ;height: 300px;border: 2px solid red;background: 

url(https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDpYFkeOp4Q6pFbNJ4u326Al1uzPkAWXccHkmreK0YeFnXC0UCxk4IpFvmlk3xFqUc/220?tp=webp);">这是一个方块</div>

</body>

</html>

 

============HBuild工具的使用===========

 

=================================

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!--

        作者：[email protected]

        时间：2016-09-17

        描述：CSS出现的位置:1、行间 2、内部 3、外部

        1、行间样式表：给单独的标签添加样式

        语法：<div style="width:100px;"></div>

        缺点：不利于修改

        2、内部样式表

        -->

        <div style="width: 100px;height: 100px;background: red;">

        div1

        </div>

        <div>div2</div>

</body>

</html>

================================

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

div{

width: 100px;

height: 100px;

background: pink;

}

</style>

</head>

<body>

<!--

        作者：[email protected]

        时间：2016-09-17

        描述：内部样式:样式表写在一个html文件里面

        语法：把样式写在一对<style></style>标签队中，这个标签对是放在html页面里面的

        缺点：内部样式表的作用范围只存在当前的页面

        -->

        <div></div>

</body>

</html>

以上是关于自学web前端开发,请问从何入手呢？的主要内容，如果未能解决你的问题，请参考以下文章

如何入门Web前端 你可以从这几方面入手

Web前端开发0基础从入门到精通自学视频教程合集，立即免费领取！

零基础怎么学web前端

如果要学习web前端开发，需要学习什么？

编程丨100G Web前端开发自学教程+工具+框架！

前端入门 前端自学路线 web开发前端如何学习