从零学前端第一讲：前端开发是什么？给初学者有什么建议？

时间 2019-11-14

标签前端第一开发什么初学者建议繁體版

原文原文链接

初识前端javascript

一、前端开发是什么？css

二、前端开发有前途吗？html

三、前端开发哪里学？前端

四、前端发展html5

五、对初学者的建议java

六、学习html入门node

七、学习css入门jquery

1.前端开发是什么？
css3

前端开发是从网页制做演变而来。程序员

早期的网页制做主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。

随着互联网的发展，现代网页更佳美观，交互效果显著，功能更增强大。

所以如今的前端开发的主要技术一般是指html、css、js技术和一些开发框架的使用。

直播录屏版

传送门：https://v.qq.com/x/page/i0726y4r0o5.html

2.前端开发有前途吗？
若是在8年10年之前这么问，或许不少人会思考一下，说：不知道，应该没后端编程有前途吧

或者直接说：web前端有啥啊？不就是个美工吗不就是个页面仔吗？不就写个网页、js吗？工资又低。。。。

然而如今？

随着html5的崛起，css3的风靡，随着nodejs 的出现，JavaScript这个最容易被人误解的语言，终于散发了它本该有的光芒。

Javascript这个牛X的历史产物，如今真的能够说是万能的，至少在web层面是这样，交互、效果、数据操做、娱乐游戏、操做文件io等等。

并且因为如今是web应用时代，各类尺寸的电子设备增加式的爆发，只要和屏幕有关的就是颜值，颜值表明了一切，能够说是前途一片光明；

html五、网页游戏风靡全球，须要页面展示的东西都是前端范畴，前途一片光明；

目前世界上最多的可视化物质是什么？是网页，网页，网页，据统计如今全世界有亿级别的网页，这是什么概念，前途一片光明；

最最直观的：前端的工资从前几年的平均几K，到如今的10k、20k ，真的是前途一片光明！

3.前端开发哪里学？

前端开发应该在哪里学怎么学？

一般有3种选择：

一是报班，效果好但价格贵对时间要求高，不是全部人都能拿得出那么多时间和金钱去学习的。

二是自学，经济实惠但缺点是缺乏指导缺乏方向，若是没有出众的意志力规划力是很难学下去的；

三是报名线上课程，优势是价格相对便宜，一般有一个集体能够探讨问题，有老师指导方向，效果要比自学好不少

但缺点就是可能没有报班效果显著，比自学要贵一点。

所以到底该怎么去选择仍是要看我的具体的状况去对症下药了。

还有许多人老是爱问，我如今多少岁什么学历什么专业什么性别我适合学XXX吗？

这种问题其实没太大意义，最重要的是知道一句话：

种一棵树最好的时间是在十年前，其次是如今。只要当即去学，比什么都强。

4.前端发展
前端的发展是经历了一些阶段性的发展的：

在最开始那些年是一个先后端不分的蛮荒时代，那个时候先后端没有分离，程序员是又当爹又当妈，要作前端又要作后端。

代码各类耦合在一块儿，服务器压力巨大，由于服务器会受到各类http的请求

例如静态的css，js，图片等，一旦服务器出现问题，先后台一块儿玩儿完，用户体验特别差。

并且开发上也是，UI出好设计图以后，必须先切html页面，再来套jsp等数据化的内容。开发时间变长，出错率也很是高

若是html发生变动，就更惨了，能够说是开发效率奇低。

后来随着开发和应用的需求变化，逐渐进入到了先后端分离的文明时代。

在文明时代的第一阶段，js一般使用原生js，但这样作的缺点也很明显：

首先是js语言设计比较草率，一些原生的api并很差用，所以须要更多代码来解决浏览器的兼容问题，须要大量的时间精力，对开发人员要求也比较高。

所以在第二阶段，为了解决原生js晦涩难懂还很差用的问题，出现了jquery等框架解救了万千开发人员。

和js相比，这些库的语法更简单，能够很容易地浏览文档，选择元素，处理事件等，也下降了开发人员的门槛。

到了第三阶段，由于随着互联网的发展，项目愈来愈大，先后端分离后的开发工做量愈来愈多的转移到前端上来。

一个简单的jquery库或者是underscore库等等已经难以管理控制整个项目了，代码变得愈来愈复杂难以修改。

这个时候就迫切的须要将代码更合理的划分以便于开发和管理，所以诞生了MVC这种取自于后端的概念沿用到前端来。

M是模型model用于数据保存

V是视图view用于用户界面绘制

C是控制器controller用于业务逻辑

这就将代码分层，成为了咱们基本的MVC框架。

固然还有一些框架提出了MVVM模式，其实就是用View Model代替了Controller，成为了简化的Controller

这样作惟一的做用就是为view提供处理好的数据，不含其它任何逻辑，实现视图与数据模型的强耦合，数据的变化会实时反映在view上，再也不须要手动处理。

5.对初学者的建议
第一，梳理信心，坚决目标。只要相信本身能够就必定能够。

第二，多练习多写，好的代码是写出来不是看出来的。

第三，不要中止学习，互联网的发展特别快，可能快过其余任何领域，所以不要有一次学习就能够工做终身的想法。

第四，开放的心态，去拥抱变化，不断尝新，而且中止争论语言和工具，把精力投放在更合适的领域。

6.学习html入门
学习html首先认识一下运行于浏览器上几门语言：

html，css和javascript。

html是一门标记性语言，负责描述网页的骨架，简单来讲就是把网页分割成一个个的矩形，而后把这些矩形嵌套起来，造成层级关系。

CSS是一门装饰性的语言，负责描述这里面矩形的大小位置背景等外观。

javascript则是一门脚本语言。负责定义网页的行为，定义了哪一个矩形在何时作什么事情。

值得开心的是js是一门很是容易入门的弱类型语言，但值得引发警戒的是，js也属于一门复杂的语言

它的复杂度即便是放在非脚本语言中来衡量，也是不容小觑的。所以学习它的过程当中千万不能掉以轻心。

首先来看一下html元素的语法：

<p>this is content</p>

元素一般是由开始标签加闭合标签加上内容组成，标签由英文尖括号<>括起来

好比<html><p>这些就是标签，结束标签要比开始标签多一个斜杠。

另外元素能够防止于其余元素之中，无限极的嵌套。接下来看一个最简单的网页代码：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>this is a head title</h1>

<h6>this is a head title too</h6>

<p>this is a param</p>

<ul>

</ul>

</body>

</html>

首先是doctype文档类型。

在html刚刚出现的时期，文档类型是用来链接一些应该遵照的规则，有点像是自动校订等。

然而如今你们都不用管文件类型，只是由于历史缘由还必须包含在代码中。

html，这个元素包含了整个页面的内容，有时也被称为根元素。

head，这个元素能够包含想添加的任意内容，可是不会被用户所看到。

一般包括想让搜索引擎搜索到的关键字、页面描述、css样式表和字符编码声明等等。

body，这个元素包含了想被用户看到的内容，无论是文本，图片仍是多媒体等等。

meta charset=“UTF-8”，这个元素指定了字符编码，能够避免出现乱码等问题。

title，这个元素设置了页面的标题，显示在浏览器标签页上。

h1-h6，标题元素，指定文章的标题和子标题，它包括6个级别从1到6.

p，这个元素用来指定段落内容的。

ul/ol，列表元素

其中ul是无序列表，其中的顺序并不重要好比购物清单，这种就放在ul中；

ol是有序列表，每一项li都会默认自带数字。

元素还分为块级元素和内联元素。

块级元素在页面中以块的形式展示，一个块级元素会新开始一行而且尽量撑满容器。

好比div p h1-h6 header footer section等。

一个以block形式展示的块级元素不会被嵌套进内联元素中，但能够嵌套在其它块级元素中。

内联元素也叫行内元素，一般出如今块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。

内联元素不会致使文本换行：

它一般出如今一堆文字之间例如超连接元素<a>或<span>包裹一些文字，或者强调元素<em>和 <strong>。

7.学习css入门
在css中，选择器是一种模式，用于选择须要添加样式的元素。最多见的选择有：

选择器说明例子*选择全部元素*id选择id为intro的元素#introclass选择class名为navs的元素.navselement选择全部p元素p结构选择全部的div和p元素

选择div内部的全部p元素

选择父元素为div元素的全部p元素

选择紧邻在div元素以后的全部p元素div, p

div p

div > p

div + p

学习css首先要学习的概念是盒子模型

盒子模型有5种主要属性：

宽和高让盒子有基本的形状大小；

border是盒子的边框，能够设置厚度和基本形态以及颜色；

padding是沿着border在内部产生的一个边距，让盒子内部的内容和边框产生距离；

margin则是沿着border在外部产生的一个边距，让盒子之间产生距离。

其次是知道浮动的概念，浮动在文档布局中是一个很是重要的概念。

一般块级元素在页面中独占一行，自上而下成为流。

元素浮动以后，会被移出正常的文档里，根据设置向左或者向右平移，直到碰到了所处容器的边框，或者是另一个浮动的元素。

当一个元素浮动以后，不会影响到块级元素的布局只会影响到内联元素好比文本的排列。

浮动有3个属性值，left，right以及none，分别表示向左向右浮动和不浮动。

元素浮动以后一般会产生一个高度塌陷的问题，由于浮动的元素已经脱离文档流，没法撑开父级元素的高度，所以出现高度塌陷。

也就是说浮动元素的父级元素不会自动伸缩来闭合浮动元素。

为了解决这个问题就须要清除浮动：

.container::after {

content: “";

display: block;

clear: both;

}

这样来让元素盒子的边不能和前面的浮动元素相邻。

或者是用overflow的方式：

.content {

overflow: hidden;

height: auto;

}

这样作的原理是触发BFC。

BFC的意思是block format content，块级格式化上下文，也就是产生一块独立的不受外界影响的盒子区域。

其触发以下：

该元素为根元素，即HTML元素

该元素float的值不为none

该元素overflow的值不为visible

该元素display的值为inline-block、table-cell、table-caption

该元素position的值为absolute或fixed

运用举例：

职业选择、求职辅导、学习规划、困难答疑、技术交流等等，均可以加入IT交流群828691304

或者加大师姐微信咨询也能够哟

微信号：it_xzy

技能树.IT修真院http://www.jnshu.com

“咱们相信人人均可以成为一个工程师，如今开始，找个师兄，带你入门，学习的路上再也不迷茫。这里是技能树.IT修真院，初学者转行到互联网行业的汇集地。"