2021-07-13 前端学习第一天

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等网页编程语言 官方地址

我个人目前在使用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 + ? ]

6.HTML基础标签与作用

• html 定义HTML文档

• head 定义关于文档的信息

• body 定义文档的主体

• title 定义文档的标题

• meta 定义关于HTML文档的元信息

• link 定义文档与外部资源的关系

• style 定义文档的样式信息

• script 定义客户端脚本

• h1 + h6 定义标题 ，h1最大，h6最小

• p 定义段落

• span 标签被用来组合文档中的行内元素

• pre 定义预格式化的文本

• br 换行符

• hr 在HTML页面中创建一条水平线

• i、em i标签显示斜体文本效果，em把文本定义为强调的内容

• b、strong b是定义粗体字 strong是把文本定义为语气更强的强调的内容

• s、del s标签标记删除线文本，del标签定义文档中已被删除的文本

• u、ins u标签定义下划线文本，ins标签定义已经被插入文档中的文本并需要与del标签一起使用

• img 向网页中嵌入一幅图像

• div 可定义文档中的分区或节

• a 定义超链接，用于从一张页面链接到另一张页面

• iframe 会创建包含另外一个文档的内联框架（即行内框架）

标签建议优先使用语义化标签！！！