前端初识

前端初识

web前端发展史

• 前端科普系列（1）：前端简史

• web1.0时代（2013）：网页制作
• web2.0时代
  • 弱前端时代（服务端渲染）
  • 客户端渲染（浏览器渲染）
• 全面进军移动端
• node.js 全栈开发工程师

前端开发工程师

• PM、PD - 产品经理
• UE - 设计UI/用户体验研究
• RD - 前端开发工程师
• QA - 质量保障工程师
• OP - 运维（开发）工程师

前端工作职责

• 基本职责: 常规开发、界面交互、数据交互
• 职位职责: 用户体验把控、对性能的追求
• 软素质: 具有探索精神、每天都在不断学习进步

前端开发职责

与UE协作，根据设计图完成页面制作，并对完成的页面进行维护和对网站前端性能做相应的优化。掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等;

项目流程介绍

产品需求—技术产品需求评估—视觉与交互稿—评估视觉与交互稿—技术开发—自测（还原度评估）—修复bug—再测试（还原度评估）—上线—线上观察

前端开发环境软件

前端开发常用的IDE（Integrated Development Environment 集成开发环境）

• 网页三剑客 （Adobe Dreamweaver、Adobe Fireworks[ Adobe Photoshop] 、Adobe Flash 目前设计效果图，很多公司都在使用sketch）
• Sublime Text
• HBuilder
• Webstorm (推荐)
• Atom
• Vim
• Visual Studio Code (推荐+) :

前端开发常用的浏览器（Browser)

• Webkit内核(V8引擎): 谷歌浏览器(chrome) 、 safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度…)、安卓和IOS大部分手机浏览器…
• Gecko内核: 火狐浏览器(firefox)
• Presto内核: 欧朋浏览器(opera)
• Trident内核: IE浏览器（IE6 - IE11）
• KHTML排版引擎: 大部分网站都已放弃IE8及更低版本浏览器（例如：淘宝）

浏览器de控制台

打开控制台（F12、ctrl+F12、右击检查元素）

• elements：基础、原理 【style-样式 】
• console:控制台【可以当计算器，可以运行js代码，方便调试，打印页面内容，可以输出页面中的报错】
• sources:存放的是静态资源文件
• network:里面是所有的数据请求

代码编辑器VScode的安装

• VScode软件入门：用户自定义代码块+常用快捷键+常用扩展插件

vscode 安装完毕之后，我们需要安装的几个插件：

• 中文汉化插件：chinese
• 在浏览器打开的插件：open in browser
• 设置控制已更新文件的自动保存 Auto Save : off 修改为 afterDelay
• 设置Font Size 代码字体大小
• 设置控制折行的方式Word Wrap: off 修改为 on
• 设置颜色主题: 设置我们喜欢的颜色主题