1.01.10前端介绍

一、起步

1. 什么是web开发

• Web开发其实就是Web应用开发

在 PC（Personal Computer，个人计算机）刚兴起的年代，软件主要使用 C/S 架构（Client/Server，客户端/服务器）即应用运行在桌面上，而数据库这样的软件运行在服务器端。

随着互联网的兴起，B/S 架构模式 （Browser/Server， 浏览器/服务器）开始流行，这种架构模式就是Web应用开发

因为Web应用程序的更新和升级相较于传统的 C/S 架构更加的迅速，（C/S 架构需要每个客户端升级应用软件。 B/S 架构下，客户端只需要浏览器，浏览器请求服务器，获取Web页面，并把Web页面展示给用户即可。无需用户自己升级应用）

2. Web开发能做什么？ 跨平台性

1. 门户网站（商城网站，多媒体网站，公司官网等）
2. 后台管理系统
3. 手机APP
4. 桌面应用（电脑的应用程序）
5. 服务器语言 nodejs
6. 游戏 白鹭+TS
7. 小程序开发 + 小游戏

3. web开发工程师的职责

1. 掌握基本的前端开发技术
2. 前端主流框架、SEO
3. 了解项目在不同浏览器上的兼容情况, 解决浏览器的兼容问题
4. 提高用户体验， 优化网站性能
5. 学会运用各种工具进行辅助开发

4. 认识浏览器(前端常用的浏览器及其内核)

1. 谷歌浏览器(chrome) Blink(webkit内核的分支)
2. IE浏览器 Trident内核
3. 火狐浏览器(firefox) Gecko内核
4. safari浏览器 WebKit内核
5. 欧朋浏览器(Opera) presto内核(已废弃) 目前用webkit内核
6. edge浏览器(IE浏览器在windows10后的版本) edgeHTML内核

• 浏览器内核由两个部分组成
  • 渲染引擎: 渲染页面
  • js引擎: 解析脚本

• 由于不同的浏览器对于 HTML+CSS+JS 的理解不同, 所以不同的浏览器对于前端代码的表现不一样
• 特别是现在移动设备和微浏览器的市场占有率变大, 标准更加复杂
• 所以HTML需要一个统一的标准(w3c万维网联盟) 哪些标准？

---

5. 前端常用开发工具

1. submit text3 轻量级的文本编辑器 官方地址
2. VScode 最流行的免费开源现代化轻量级的代码编辑器, 可以通过安装各种插件支持几乎所有主流的开发语言和框架 官方地址
3. Hbuilder 一款支持HTML5的web开发工具 官方地址
4. webStorm 被称为最强大的HTML5编辑器, 对电脑的配置要求较高而且需要付费 官方地址
5. Atom 是 github 专门为程序员推出的一个跨平台文本编辑器。支持CSS，HTML，JavaScript等网页编程语言 官方地址

6.vscode开发工具

1. 打开vscode以后
   • 顶部菜单栏
   • 左边侧边栏
   • 代码编辑区
2. vscode 快捷键

   • 在本地文件中打开文件目录 shift + alt + r

   • 修改编辑器主题色 [ctrl + k + t]

   • 打开/关闭侧边栏 [ctrl + b]

   • 选中相同的内容 [ctrl + d]

   • 自动换行/不自动换行 [alt + z]

   • 保存文件 [ctrl + s]

   • 撤销 [ctrl + z]

   • 关闭窗口 [ctrl + w]

   • 依次打开最后关闭的窗口 [ctrl + shift + f]

   • 在光标当前行的下面插入一行 [ctrl + Enter]

   • 在光标当前行的上一行插入一行 [ctrl + shift + Enter]

   • 按住鼠标中键, 拖动鼠标, 可以选中一列

   • 拖动文件, 直到区域变亮，可以实现分屏

   • 注释 [ctrl + /]

     问号那个斜杆 [ ctrl + ? ]