如何入门前端

  • 一、前端是什么
  • 二、前端页面的组成
  • 三、怎么学习html
  • 四、怎么学习css
  • 五、怎么学习js
  • 六、总结

一、前端是什么

先认识一下一个系统的基本组成，以一个常见的登陆界面举例

前端如何开发 生成架构图_前端如何开发 生成架构图

所以简单地来说，前端就是承上启下的岗位
承上：是指我们要编写出一个页面给用户操作
启下：是指用户操作后，我们要将数据对接给后端

二、前端页面的组成

一个最简单的页面，由3部分组成，分别为html，css，javascript(简称js)。怎么理解他们之间的关系呢？

其实前端的开发就和塑造人物差不多：

组成部分

功能

编写位置

html

编写页面的框架（塑造人物的骨架、身体）

写在body里面

css

编写样式，将页面进行排版，美化（给人物穿衣服）

写在style里面

js

进行一些事件、逻辑、数据的处理（让人物做指定动作、怎么做）

写在script里面

这里你可以随便打开一个编辑器，创建xxx.html文件，输入以下代码，先认识下html页面的基本组成，并且记住它们各自的编写位置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题</title>

  <style>
    /* 编写css的 */
  </style>
</head>
<body>
  <!-- 编写html的 -->
</body>

<script>
  // 编写js代码的
</script>
</html>

三、怎么学习html

上面说了，html就好比塑造人物的身体。那我们在塑造人物身体的过程中，肯定会进行拆分。例如
第一层：身体可以拆分成头、双手、双脚、身体等等的各个部分。
第二层：头里面又可以拆分眼嘴鼻等等不同的器官
第三层：眼睛里面又可以拆分成眼球、上睫毛、下睫毛等等
…
一直拆分到最小单位，无需再拆为止

假如我们把每一层当成一个盒子的话，那么这个过程就是盒子不断包含盒子的过程，以刚才的登陆页面为例

前端如何开发 生成架构图_html_02

所以学习html的关键，就是认识各种盒子，而盒子在html中，其实就是对应着各种标签

那么我们学习的思路以下3点了：

1、学习标签的写法
要认识标签，肯定要先知道它是怎么写的，那么标签（盒子）的写法可以分成两类，例如下面这样：

第一种写法：<xxx>xxx</xxx>，例如<div>内容</div>
第二种写法：<xxx />，例如<img />

而标签是可以添加属性的，例如下面的id、class。属性是提供标签更多的信息的作用

<xxx id="id1" class="class1">xxx</xxx>

2、认识标签的分类
标签分类简单地来说就两种，分类的标准就是自己是否独占一行

类别

特点

包含标签

块级标签

一个标签单独占据一行

div标签、p标签 等等

行内标签

可以多个标签在同一行的

img标签、a标签、input标签、span标签等等

3、新手必学的几个标签

标签

说明

div

以盒子距离，作用就是设置一个一整行的盒子

span

以盒子距离，作用就是设置多个盒子在同一行

a

超链接标签，点击跳转

img

图片标签，往页面添加图片

input

单行文本框标签，提供用户输入内容的标签

学会上面的标签的话，起码就能应对大部分的情况了
而其他的标签，例如像p标签、br标签等等的，有兴趣或者有需要用到再自行学习。

四、怎么学习css

上面说到，css就是给人物穿衣服。而人物可以拆分成很多身体部分，我们需要找到不同的身体部分，加上不同的服装，最后排版拼接起来
所以学习css的关键，就是找到标签、给标签上各种各样的样式、进行排版

那么我们学习的思路以下3点了：

1、怎么找到标签
css找标签的过程，其实就是设置不同的选择器
这里要去学习各个选择的作用以及优先级，新手只需要学会下面的

选择器

说明

优先级（越小越高）

id选择器

就是根据标签的id属性去选择，写法：#id1{ 设置样式 }

0

class选择器

就是根据标签的class属性去选择，写法：.id1{ 设置样式 }

1

标签选择器

就是直接选择某类标签，写法：div{ 设置样式 }

2

2、设置内容样式
这里分成很多小知识，具体如下

内容

涉及到的知识

文字font

文字大小font-size、文字粗窄font-weight、文字颜色color、对齐方式text-align、文字阴影text-shadow等等

背景 background

背景颜色background-color、背景图片background-image、背景大小background-size等等

渐变

linear-gradient

动画

animation

变形transition

平移 translate、缩放scale、旋转rotate、斜切skew

3、布局
也就是各个标签怎么排版的，就像我们上面提到的登陆页，我们写好标签后，怎么让他排版成那样子？
这里涉及到的知识点

知识点

具体内容

盒子模型

理解标准盒子模型和怪异盒子模型的区别，学习宽width，高height，内边距margin，外边距padding、边框border的作用

定位position

学习position的relative、absolute、fixed的区别

新手学完上面这些，基本上就能入门html和css了。
可以尝试地找一些页面去练手了，例如上面的登陆页面、微信聊天框、支付宝首页等等等等。

练到每看到一个页面，就知道大概要怎么拆分，怎么编写为止，然后才来开始学习js

五、怎么学习js

上面说到的，通俗点来说，js就是怎么让人物做指定的动作，处理做动作的逻辑。
那么想想，假如我们要让一个静止的人物行走，要怎么设计：

1、定义一个开关。
2、定义一个编写行走的逻辑，例如先抬左腿再抬右腿
3、当开关打开时，让人物行走。当开关关闭时，让人物静止

那么我们的伪代码可以这样写：

定义一个开关：开关按钮

定义一个行走的逻辑：{
	逻辑是：先抬左腿再抬右腿
}

如果开关打开时，让人物行走；
不然当开关关闭时，让人物静止。

带着这个思路，我们再去学习js
我们要学习几个知识点：

  1. 怎么定义开关(变量)
  2. 怎么定义行走逻辑（函数）
  3. 怎么做开关判断（控制流程）

1、怎么定义开关
首先得学习怎么定义变量

格式：var 变量名 = 变量值
例如定义一个变量去控制开关：var switch = 'open' 或者 var switch = 'close'

变量名我们可以随便起，你起成aaa、bb都行。变量值的话，在js中就有区分类型了，如下：

种类

说明

number

数字类型，定义值为1，2, 3这样的数字的

string

字符串类型，定义像上面那样用引号包起来的’open’

boolean

布尔类型，定义true或者false的

null

空值，一个从来没存在过的值

undefined

空值，一个存在过，但没有值的值

object

对象，后面详细介绍

此时，如果我们需要额外加一个人物传记的话，需要定义姓名、性别、年龄等等等等，我们按照上面介绍到的类型去定义的话，就是

var name = '姓名'
var sex = '男'
var age= 18

这样太麻烦了，要一个个定义，那么有没有能整和起来的呢？
答案是有的，就是对象object。我们可以这样定义

var people = {
	name:'姓名',
	sex:'男',
	age:18
}

以上就是js中的变量和类型了。当然了这只是最基本的，如果延展开学习，需要学习到很多内容。例如

  • 类型的命名规则(驼峰法)
  • 类型的判断(typeof、instanceof)
  • 字符串string的各种方法(split、replace、indexOf、slice等等)
  • object对象的创建方法
  • object对象原型，原型链
  • object对象的继承等等

2、怎么定义行走逻辑
在js中，通常我们把某一段的逻辑处理，都会写在一个合集里面，这个合集，称之为函数
函数一般这样写：

// 函数的定义
function functionName(){
	// 编写函数的逻辑
}
// 函数的调用
functionName()

//例如上面的行走
function run(){
	var leg = '';
	leg = 'left' // 先左腿
	leg = 'right'// 后右腿
}
run()

这里这是定义一个最基本的函数，延展开学习的话，会学习到：

  • 函数的类型
  • 作用域、this
  • 闭包等等

3、流程控制
就是当开关打开时，让人物行走。当开关关闭时，让人物静止。这里就要学到最基本的if else了

if(switch === 'open'){
		// 调用行走逻辑
	}else{
		// 不调用
	}

这里这是用到了if else，如果额外学习的话，能学到：

  • switch case
  • while
  • 循环
  • 递归等等

此时，把上面3点结合起来，人物行走的全部代码也就是

var switch = 'close'
	
	function run(){
		var leg = '';
		leg = 'left' // 先左腿
		leg = 'right'// 后右腿
	}
	
	if(switch === 'open'){
		run()
	}else{
		// 不调用
	}

除此之外，js还需要学习其他的内容：

内容

需要学什么

数组

数组的增删查改、循环等各个方法（pop、push、indexOf、unshift、shift、slice、splice、join、reserve等等）

缓存

Cookie、localStorage、sessionStorage

操作标签

getElementById、getElementsByClassName、querySelector、createElement、removeChild、innerHTML、append等等

操作日期 Date

new Date()、getTime、getFullYear、getMonth、getDate、getDay等等

操作计算方法Math

random、ceil、floot、round、max、min等等

事件

addEventListener、removeEventListener、onClick、onScroll、事件委托、事件冒泡等等

…

…

学习js是急不得的，而且js要学会的东西比html、css要多得多