NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

前端开发是做什么的_前端学习之前端初介绍

作者:菁瑞优智_小菁 时间:2021-06-25

1、前端开发是做什么的?

打开电脑,我们第一想做的事情应该就是上网。

这个“网”是什么呢?

互联网时代,我们上网所浏览的页面都属于前端开发的范畴。

1.1 网站分类

网站的类型按照信息的产生主要分为三类:

- 信息功能展示类(网站向用户提供信息和功能)

  • 大型新闻网站类(腾讯网、凤凰网等)

  • 招聘网站
  • 天眼查
  • 银行网站

- 用户产生信息(用户写文章、发表视频等)

  • 简书
  • 豆瓣
  • 知乎
  • 哔哩哔哩
  • 起点中文
  • 博客园

- 混合型(平台有自己的内容,也允许用户提供内容,但是要审核。)

  • 优酷视频
  • 马蜂窝旅游

网站按照设备可以划分为两种类型:

- PC端——浏览器所展示的页面

- 移动端 ——网页、APP、小程序、公众号等

- 网页

  • 起点中文:https://m.qidian.com/
  • 简书:https://www.jianshu.com/

- APP(太多了,利用UI中国的效果图了解:https://www.ui.cn/detail/491256.html)

  • 今日头条
  • 抖音
  • 淘宝
  • 天猫
  • 支付宝
  • 微信
  • QQ
  • 京东
  • 优酷

- 小程序(不用安装,用完即走)

- 微信小程序

  • 博鸟绘本
  • 知乎
  • 车来了
  • 招行信用卡
  • 苏宁小店
  • 京东购物
  • 当当
  • 抽奖

- 支付宝小程序

  • 印鸽
  • 哈啰出行
  • 考拉海购
  • 优酷视频
  • 速递易

- 公众号

  • 再小的个体,也有自己的品牌

1.2 需要解决的问题

- 浏览器端的各种界面展示问题(界面)

- 产品与用户之间的一系列人机交互问题(人机交互)

- 前端与后端之间的数据处理问题(数据)

- 产品功能上的程序逻辑问题。(逻辑)

**学习前端开发要经历的几个阶段:**

- 第一阶段:要把UI设计师精心设计的效果图和网站内容,通过一系列的编码方式和技巧,在浏览器上像素级的完美展示。(HTML+CSS)

- 第二阶段:能够完成整套的静态页面搭建之后,可以开始思考人机交互的诸多问题。开发出用户体验完善的界面,比如细腻的动画效果、各种数据交互问题、功能逻辑问题等等。(JavaScript)

- 第三阶段:征服了PC端大屏幕之后,可以开始转战到小屏幕——移动端。支持更多新的特性,多种交互方式,比如单指滑屏、多指操作、长按短触、摇晃手机……(跨设备)

- 第四阶段:项目工程化级别的开发,各种框架、各类组件库等等,成为高级开发工程师的必经之路。(工程模块化)

**专业前端开发人员需要具备的能力:**

- 复杂炫酷的页面交互设计能力

- 良好的用户体验设计能力

- 复杂的业务逻辑处理能力

- 能处理跨终端的适配兼容问题

1.3 学习要求

- 有浓厚的兴趣,这是核心条件。

- 熟悉互联网,不只是会玩手机,还会使用电脑工具、会打字、会上网搜索资源、有计算机基础知识。

- 一定要反复练习,千万不能眼睛耳朵会了,手不会,不能眼高手低,输入和输出是大脑两个不同的系统

1.4 学习目的

不管你是新人小白,还是入门菜鸟,还是草根野生派,最后通过学习都能变成专业派。

精简成一句话:完美还原UI设计师的视觉和动画效果,以用户体验最佳的方式处理和展示后端提供的数据,是承上启下的桥梁岗位,是艺术和技术的结合体,是颜值和实力并存的开发者。

2、前端开发的发展历史

知道一个岗位的发展历史,了解它的前世今生,才明白它是如何一步一步发展至今。每一次技术的革新,都是人类社会经济的一次发展,人类思维的一次提升。

互联网世界就是人类真实世界的复制。

2.1 web1.0时代(电视机时代)

生产力低下,获取信息靠村里大婶儿之间的八卦,有的人从小到老没有离开过村子,走的路范围没有超过十里远。

突然有一天,有人抱回来一台黑白电视机,从此信息获取就靠这台电视了,它的信息是单向传播的,只能获取,不能反向反馈。

这就像刚刚出现的互联网。

互联网,我们也叫万维网,它的全称是world wide web,发明者是 [蒂姆·伯纳斯·李](https://baike.baidu.com/item/蒂姆·伯纳斯·李/8868412?fr=aladdin)(Tim Berners-Lee)英国计算机科学家, 南安普顿大学与麻省理工学院教授。 2017年,他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的[图灵奖](https://baike.baidu.com/item/图灵奖)。

蒂姆·伯纳斯.李建立的第一个网站(也是世界上第一个网站)是http: //info. cern. ch/,它于**1991年8月6日**上网,它解释了万维网是什么,如何使用网页浏览器和如何建立一个网页服务器等等。

1993年4月30日,欧洲核子研究组织宣布万维网对任何人免费开放,并不收取任何费用。

1994年蒂姆·伯纳斯.李在麻省理工学院创立了万维网联盟W3C,它由不同的原意建立万维网标准和提高万维网质量的公司组成。 比如微软、苹果、IBM、 Sun Microsystems 、 Adobe 等,2011年后中国的百度、腾讯、阿里巴巴、360等一共有28家公司加入W3C联盟,一起制定互联网技术标准。

万维网联盟W3C制定并推出了很多技术的标准规范,从而使得互联网渐渐统一。

2003年万维网联盟决定所有由联盟提出的技术都是无偿的,所有人都可以简单地使用。

在十九世纪四五十年代就已经有了超大型计算机,但是计算机互不联通,不能互相访问。

“在超文本和计算机诞生后,我正好时间充裕,又不乏兴趣和爱好。落在我头上的任务就是把它们有机地结合起来。” ——蒂姆.伯纳斯.李

万维网产生之初的目的就是实现一台计算机能够访问另一台计算机上存储的文件,包括图片、音视频等。

- 万维网的内核部分是由三个标准构成的:HTML/URL/HTTP

  • HTML 超文本标记语言,定义文档的结构和内容。
  • URL 统一资源定位符, 这是一个世界通用的负责给万维网上例如网页这样的资源定位的系统。
  • HTTli 超文本传输协议,它负责规定浏览器和服务器怎样互相交流。

- web1.0的特征( 信息共享 )

  • web1.0是只读模式的网络
  • Web1.0一开始是为大型企业、商业公司服务,将企业的信息搬运到网上,向人们宣传企业。
  • Web1.0是静态的、单项的网络, 注重点击浏览,通过门户整合,用户以流量为主,以网页制作为主,大多是静态页面。
  • 马云曾经的“中国黄页” https://baijiahao.baidu.com/s?id=1594259008024927446&wfr=spider&for=pc
  • 产生了第一批门户网站:新浪网、网易、搜狐
  • 回到过去:[网站历史档案馆](http://www.54zz.com/)

- 产生的弊端

  • Web 1.0只解决了人对信息搜索、聚合的需求,而没有解决人与人之间沟通、互动和参与的需求。”因此,为了满足广大网民的需求,对于二代网络的开发已迫在眉睫。
  • 用户在网上通过点击链接到处瞎逛,所以叫上网冲浪。

2.2 web2.0时代(手机时代)

从全民上网到全民织网,从用户获取信息到用户产生信息,这是一个巨大的变化。

大约在2004年左右,诞生了WEB2.0的概念,更注重用户的交互作用,用户既是浏览者,也是内容的制造者,在模式上由单纯的“读”向“写”以及共同建设发展。

那时候做网站不叫网页制作了,叫做“网站重构”。

这个时候开始出现“web前端开发”这个独立的岗位。

Web1.0主要依赖于html语言,最大的缺陷是交互性差,用户每提交一次数据,都要停下来等待互联网的响应,在网站出现响应之前,用户只能看到一个空白网页无所事事,这一缺陷在web2.0上市后得以很好的解决。

所以web2.0注重页面和用户的交互,注重用户体验,可以说这十多年已经发展到了web2.0时代的巅峰,现在的产品不管是用户界面还是用户交互体验已经达到了极致。

搜索引擎、电商、社交和在线视频是web2.0最大的产物。

天涯论坛、新浪博客(微博)、即时通讯QQ、微信让人与人的沟通变得前所未有的容易。

用户产生的数据成为了网站主要信息来源。

知乎、豆瓣、今日头条、公众号、抖音等等,用户成为了信息最大的产生者。

假如说*Web1.0*的本职是联合,那么*Web2.0*的本质就是互动,它让用户更多地参与信息产品的创造、传播和分享。

- web2.0的特征( 信息共建)

  • 交互
  • 沟通和传播
  • 用户产生大量的数据

- 产生的问题

  • 大量的数据没有发挥真正的价值
  • 用户数据泄露,隐私曝光
  • 获取的数据不是自己想要的

2.3 web3.0时代(人工智能时代)

机器具有学习的能力,通过分析用户的行为,可以对用户进行精准的数据推送。

比如现在的今日头条,根据你的阅读兴趣推送你感兴趣的文章。

现在的电商,根据你购买记录和搜索记录推送相关产品。

万物互联,不再是web1.0时代的电脑,web2.0时代的智能手机,而是物联网,无处不在。

智慧城市,智慧家居,这些概念可以猜测出未来的发展,但是,最终一定会超出我们的想象。

[WEB3.0白皮书](https://blog.csdn.net/shangsongwww/article/details/90269519)

谁掌握了数据,谁处理好了数据安全,谁就是下一个时代的王者。

3、学习工具(工欲善其事必先利其器)

3.1 常用编辑器

- DW

- Sublime

- HBuilder

- Webstorm

- **VS Code**( Free. Built on open source. Runs everywhere. )

- 下载 [VS Code](https://code.visualstudio.com/)

- 安装后的必备扩展

- Chinese (Simplified) Language Pack for Visual Studio Code

- Open In Browser

- HTML Snippets

- HTML CSS Support

- Auto Close Tag

- Auto Rename Tag

- Beautify

- Color Picker

- Color Info

- JavaScript (ES6) code snippets

- 建立自己的工作区(将文件夹添加到工作区)

- 建立自己的站点,新建页面,页面必须手动加上后缀名,比如index.html、style.css、swiper.js

- 利用Emmet速写语法快速书写HTML语言。语法规则地址 https://docs.emmet.io/abbreviations/syntax/

- 首选项修改字体大小和颜色主题等

- 常用的快捷键

- 注释单行 Ctrl+/

- 注释多行 Shift+Alt+A

- 向下复制行 Shift+Alt+DownArrow

- 关闭窗口 Ctrl+W

- 全部关闭 Ctrl+K W

- 保存全部 Ctrl+K S

- ……

- 保存并发布第一个html文档

- 先安装好插件

- 点击右键,选择“open in default browser”发布

3.2 浏览器

- **Chrome 谷歌浏览器** Webkit / Blink js的V8引擎

- Firefox 火狐浏览器 Gecko 内核

- IE系列浏览器(IE9、IE10、IE11) Trident( MSHTML ) 内核

- Edge [edʒ] (windows 10)(据说要换成Webkit 内核了)

- Safari 苹果浏览器 Webkit 内核

3.3 调试工具

- 谷歌自带的开发者工具(F12) [开发者工具文档](https://www.html.cn/doc/chrome-devtools/)

- 火狐的firebug

3.4 辅助软件

- PhotoShop

4、前端开发的三驾马车

4.1 HTML

超文本标记语言,负责页面的结构和内容。

HTML是WWW出现的三大核心之一。

- 1991 年,HTML第一次出现。

- 1993年 正式发布HTML草案。

- 1994年7月 HTML 2.0 规范发布 。

- 1997年6月, HTML 4.0作为W3C推荐标准发布。

- 2000年 XHTML1.0 作为 W3C 推荐标准发布,开始定义了JSON格式数据。

- 2014年10月28 日,W3C 正式发布 HTML 5.0 推荐标准。

4.2 CSS

层叠样式表,负责页面的样式装修。

随着互联网的发展,为了满足页面设计者的要求,HTML添加了很多显示功能,增加了一些用于样式的标签。但是随着这些功能的增加,HTML变的越来越杂乱,页面越来越臃肿,于是CSS便诞生了。

- 1994年,提出CSS。

- 1996年12月, W3C 推出了 CSS1.0 规范 。

- 1998年5月,CSS推出了CSS2.0规范。

- 2011年4月12日 ,修正后的CSS2.1规范。

- 现在的CSS3是按照模块化的方式标准化。 将 CSS 划分为许多小组件,称之为*模块*。这些模块彼此独立,按照各自的进度来进行标准化。

![CSS Modules and Snapshots as defined since CSS3](https://developer.mozilla.org/files/3623/CSS_Modules_and_Snapshots.png)

比如 **[CSS Color Module Level 3](https://drafts.csswg.org/css-color-3/)** (颜色模块是Level3的标准),选择器也是level3的标准。

[CSS3规范介绍](https://developer.mozilla.org/zh-CN/docs/Archive/CSS3)

4.3 JavaScript

Netscape的LiveScript、 标准之后的ECMAScript ,脚本语言,负责页面的交互行为和数据展示 。

用了10天就诞生的语言,一度被后端工程师鄙视,但是随着用户体验和用户交互的被重视,JavaScript的发展得到了空前的提升,目前在世界编程语言排行榜中第六名。

[编程语言排行榜](https://www.tiobe.com/tiobe-index/)

- 1996 年 3 月,Navigator 2.0内置了JavaScript 1.0 。

- 1997 年 6 月,ECMA 以 JavaScript 语言为基础制定了 ECMAScript 标准规范 ECMA-262。

- 1999 年 12 月,ECMAScript 3 规范发布,在此后的十年间,ECMAScript 规范基本没有发生变动。

- 2009 年 12 月,ECMAScript 5.0版正式发布。

- 2013 年 12 月,ECMAScript 6草案发布。

- 2017 年,ECMAScript2017正式发布。

https://cloud.tencent.com/developer/article/1484475

4.4 三者之间的关系

- HTML 结构

- CSS 样式

css

h1{
    color:#f30;
    font-size:24px;
    text-align:center;
}
.center{
    text-align:center;
}

- JavaScript 行为

来点最简单的JavaScript交互吧

html

<h1 onclick="this.style.color='#333'">文章标题</h1>
<p onclick="this.style.backgroundColor='#ddd';">学习web前端第一课</p>

案例:通过点击body切换网页中文字的颜色和背景的颜色练习三者之间的关系。