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

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

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

这个“网”是什么呢？

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

1.1 网站分类

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

– 信息功能展示类（网站向用户提供信息和功能）

大型新闻网站类（腾讯网、凤凰网等）

招聘网站

银行网站

– 用户产生信息（用户写文章、发表视频等）

博客

论坛

小说网

– 混合型（平台有自己的内容，也允许用户提供内容，但是要审核。）

自媒体平台

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

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

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

1.2 需要解决的问题

– 浏览器端的各种界面展示问题（界面）

– 产品与用户之间的一系列人机交互问题（人机交互）

– 前端与后端之间的数据处理问题（数据）

– 产品功能上的程序逻辑问题。（逻辑）

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

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

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

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

– 第四阶段：项目工程化级别的开发，各种框架、各类组件库等等，成为高级开发工程师的必经之路。（工程模块化）

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

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

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

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

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

1.3 学习要求

– 有浓厚的兴趣，这是核心条件。

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

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

1.4 学习目的

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

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

2、前端开发的发展历史

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

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

web1.0时代（电视机时代）

web2.0时代（手机时代）

web3.0时代（人工智能时代）

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 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 样式

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

– JavaScript 行为

来点最简单的JavaScript交互吧

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

来源：菁瑞优智