大表姐带你学前端

Hello，大家好，欢迎来到前端大表姐的学习空间。

最近正在准备着手写前端入门系列的文章，到网上随便一搜前端入门，就有大量的相关文档。但基本都是直接抛出来前端三大件（Html、CSS、Javascript），然后就是巴啦巴啦输出一堆生硬的知识点。从入门这个出发点来说，这样的文章对程序开发零基础的童鞋非常不友好，往往还没开始就已经放弃了...

 圈重点！大表姐深深明白这种痛苦，为了帮助大家零负担、零压力、零痛苦，彻底理解前端开发，因此才有了这篇文章。废话不多说，准备起飞。

一、什么是前端？

 

这还要从前端简史开始聊起。

最初web服务全都是静态页面，除非更新存储在服务器上面的静态文件，否则页面不会改变。这就导致一个问题，每一个用户看到的都是同样的内容，

无法看到实时多样的信息。为了解决这个问题，就需要结合后端代码，譬如CGI、JSP、ASP、PHP等。以PHP模板为例：

 通过这样就可以展示动态的数据信息。但是随之也带来了一些问题。一方面，用户需要频繁刷新页面才能获取新数据，而浏览器也需要重新解析整个页面，

在这个过程中，用户无法进行其他操作，体验极差。另一方面，前后端代码高度耦合，这就要求开发者前后端语言都需要了解，十分痛苦。

2015年Ajax(Asynchronous JavaScript and XML)横空出现，上面的问题得以解决。通过Ajax发送HTTP请求，实现页面局部刷新。通过前后端分离的开发方式，前后端工程师只需要定义好统一的数据结构，就可以专注于各自的开发。

随着移动互联网的发展，我们生活中经常会使用的APP、小程序，这些都是离不开前端开发。而在未来，物联网跨端统一，一份前端代码可以在手表、电视、手机、电脑、智能家居等多种设备上展示出一致的效果。

这就是前端发展的大概历程，如果大家感兴趣，后面我会专门写一些文章，和大家聊聊前端发展历史的那些事儿。

聊到现在，到底什么是前端？一句话总结：前端就是通过定义网页结构、样式表和行为文件，再结合后端服务器返回的数据，然后交由浏览器内核进行渲染和解释，并最终在端上展示的程序。

二、前端做什么？

没错！前端开发就是开发网页。当下前端覆盖的场景包括：PC端、移动端、小程序以及H5小游戏。

PS：安利一个快速学习HTML和CSS的方法，可以通过开发者工具，查看线上网页的页面布局和样式。照着敲敲代码，会有很大的收获哦。

PC端：拿我们经常会逛的淘宝、掘金网站为例。

 H5端：

虽然是同一个网站，但是和PC页面对比后，不难发现，两端在页面排版和布局上还是有很大的区别，这是由于用户交互在不同端的侧重点不同。

微信小程序：以京东、掘金为例

通过这些页面可以看出，前端覆盖场景十分广泛。前端是一份很有趣的工作，它是业务最直接的体现，同时也是与用户沟通的第一道窗口。

三、怎么做前端？

前端三大法宝：HTML、CSS、JavaScript

• HTML(HyperText Markup Language)，全称：超文本标记语言。

        定义了网页的内容，提供了一系列语义化标签，每个标签代表页面的一个元素。

• CSS(Cascading Style Sheets)，全称：层叠样式表。

        决定了网页的样式和布局。

• JavaScript，是一种解释型轻量编程语言。

        控制了网页的行为。是网页的灵魂，是前端开发中最重要的一部分。

拿京东首页为例，打开浏览器开发者工具，就会看到网页源代码。

 

左上角圈中的这张图片，就代表网页中的一个元素，在HTML中使用标签来表示，右下方是其对应的CSS样式。中间的图片轮播的效果，就是通过js脚本实现。

听到这里，是不是感觉前端好像挺简单的啊，就是画画页面而已。确实，前端开发的入门门槛很低，在前端开发领域有很多“自学成才”的同行。和后端语言相比，前端的学习曲线先快后慢，是一个先易后难的过程。越到后期，学习难度会明显增加，而此时方显英雄本色。

既然都了解前端了，还不赶快上车！后续大表姐会继续分享前端基础系列的文章，帮助大家打好前端基础，感兴趣的小伙伴敬请期待！前端不易，重在坚持。