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

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

打开电脑,我们第一想做的事情应该就是上网(www.qmsh.net)。

这个“网”是什么呢?

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

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

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

- JavaScript 行为

来点最简单的JavaScript交互吧

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

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

主营产品:液压剪切机,液压卧式压块机,液压立式打包机,液压卧式打包机,液压钢筋切粒机