2023前端第一次讨论班

进入前端和VScode插件安装

进入前端

	前端又称web前端，web顾名思义就是网页，所以大部分人的理解就是前端就是做网页的。
但其实并不是，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS
及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互
的过程。以前的前端确实就是单纯的用DreamWeaver以及其它一系列的软件做静态网页，但随
着互联网技术的不断发展，网站开发的难度加大，网页从静态发展为动态，交互效果更加强
大。

接着我们来了解一下前端开发的三大语言
HTML

	HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，
专门用来设计和编辑网页。
	HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。
	所谓的超文本，有两层含义：
	1、 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、
	按钮、输入框、动画、多媒体等高级内容。（超越文本限制）
	2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超级链接文本)

CSS

	CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS
样式表。它是一种用来表现HTML或 XML 等文件式样的计算机语言。
	在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现
更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，
或者页数不同的网页的外观和格式。

JavaScript

JavaScript（简称JS）是当前非常流行、应用很广泛的脚本语言，被称为前端的“灵魂”。
特点：
	1、一种解释性脚本语言（代码不进行预编译）
	C、C++、Java等高级语言先编译后执行，而JavaScript是在程序的运行过程
中逐行进行解释。运行过程中由js解释器（js引擎）进行解释并执行，密码输入错误、邮箱格
式、认证失败……均是在运行时刻就已经解释执行的（这样大大的提高了用户的体验性和网络传
输速度）
	2、主要用来向HTML页面添加交互行为；
	3、可以直接嵌入HTML页面
	4、可移植性好，绝大多数浏览器均支持JavaScript

JS组成

通常我们把JavaScript和ECMAScript用来表达相同的含义，但是一个完整的JavaScript由以下三个不同的部分组成。

WEB标准
接下来我们就通过了解WEB标准来了解三大语言在网页设计与开发中的作用
（1）Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织
（2）浏览器不同，他们显示的页面或者排版就有差异，需要web标准来限制
WEB标准的构成

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为	行为指网页模型的定义与交互的编写，主要指JavaScript

下面是一个形象的例子

补充内容: 静态网页和动态网页

VScode插件安装

VScode下载地址
进入VScode点击左侧下方扩展，可以在搜索框搜索所需的扩展下载

扩展推荐

1.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code（必备）
2.Path Intellisense (必备)     自动提示文件路径
3.Live Server（必备）      在线调试部署
4.Auto Import、Auto Close Tag、Auto Rename Tag（必备）
标签自动化三剑客，Auto Import可以根据你引入的组件，自动导入提示；Auto Rename Tag
当你修改标签的时候，自动完成另一侧标签的同步修改；Auto Close Tag 自动闭合HTML/XML
标签，谁用谁知道。安装即可。
5.HTML CSS Support、HTML Snippets、JavaScript (ES6) code snippets （必备）
前端三剑客，HTML CSS Support 智能提示CSS类名以及id；HTML Snippets 智能提示HTML
标签，以及标签含义；JavaScript (ES6) code snippets ES6语法智能提示，以及快速输
入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含
js代码文件的时间。你不要也得给我装！安装即可。
6.open in browser（必备）  将页面在浏览器中打开
7. Prettier (必备)   大名鼎鼎的 格式化插件。 Beautify 并不能格式化 React 的代码。
而 Prettier 可以。
8.jQuery code Snippets  jQuery智能提示
9.code runner   运行编程语言

不知道大家现在VScode能否正常使用“！+Tab”自动生成HTML模板的功能，上次暑假因为上面某个插件的停运导致我不能正常使用了qwq，困扰了我好一会，如果你也有这个问题，这里有 解决方案
VScode快捷键

1、保存
> ctrl + s
2、注释
> a)单行注释和取消单行注释：ctrl+/
> b)多行注释：alt+shift+A
 3、复制或剪切当前行/当前选中内容
> Ctrl+C 、 Ctrl+V
 4、撤销、还原
> ctrl+z ctrl+y
 5、查找
> Ctrl+F
 6、查找替换
> Ctrl+H
 7、切换全屏
> （fn）+F11
 8、新建一个页面
> ctrl + n
9、新建一个窗口
> ctrl + shift + n
 10、关闭当前窗口
> ICtrl+W
 11、关闭当前的 VSCode 编辑器
> Ctrl+Shift+W
 12、文件之间切换
> Ctrl+Tab
 13、显示/隐藏左侧目录栏
> ctrl + b
 14、代码行向左或向右缩进
> Ctrl+[ 、 Ctrl+]
> 15、控制台终端显示与隐藏
> ctrl + ~
 16、跳转到下一个 Error 或 Warning
> 当有多个错误时可以按 F8 逐个跳转
 17、向上或向下移动一行
> Alt+Up 或 Alt+Down
 18、向上或向下复制一行
> Shift+Alt+Up 或 Shift+Alt+Down
 19、在当前行下方插入一行
> Ctrl+Enter
20、在当前行上方插入一行
> Ctrl+Shift+Enter
 21、复制当前行
> shift + alt +up/down
 22、删除当前行
> shift + ctrl + k
23、查找文件/安装 vs code 插件地址
> ctrl + p
 24、代码格式化
> shift + alt +f
 25、裁剪尾随空格(去掉一行的末尾那些没用的空格)
> ctrl + shift + x
26、字体放大/缩小
> ctrl + ( + 或 - )
>  27、拆分编辑器
> ctrl + 1/2/3
 28、切换窗口
> ctrl + shift + left/right
 29、自动换行
> alt + z
 30、显示 git
> ctrl + shift + g
 31、全局查找文件
> ctrl + p
 32、显示相关插件的命令(如：git log）
> ctrl + shift + p
 33、选中文字
> shift + left / right / up / down
 34、折叠代码
> ctrl + k + 0-9 (0 是完全折叠)
 35、展开代码
> ctrl + k + j (完全展开代码)
 36、删除行
> ctrl + shift + k
 37、快速切换主题
> ctrl + k / ctrl + t
38、快速回到顶部
> ctrl + home
39、快速回到底部
> ctrl + end
 40、格式化选定代码
> ctrl + k / ctrl +f
 41、选中代码
> shift + 鼠标左键
 42、多行同时添加内容（光标）
> ctrl + alt + up/down
 43、全局替换
> ctrl + shift + h
 44、当前文件替换
> ctrl + h
 45、打开最近打开的文件
> ctrl + r
 46、打开新的命令窗
> ctrl + shift + c

浏览器

浏览器介绍

什么是浏览器？

浏览器用于显示网页服务器或者文件系统的 HTML 文件内容，将服务器上网页文件中的文字、
图像及其他信息显示在网页页面上，这些文字或图像，可以是连接其他网址的超链接，用户
可迅速及轻易地浏览各种信息。

常见浏览器
常见的浏览器：QQ 浏览器、Edge ( 替换了Internet Explorer) 、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360 浏览器、UC 浏览器、傲游浏览器等。

浏览器内核

   不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，负责对
网页语法的解释（如 HTML、JavaScript）并渲染（显示）网页。它决定了浏览器如何显示网
页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一
网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
1.IE内核 Trident
2.谷歌内核 Webkit/Blink
3.火狐内核 Gecko
4.Safarri内核 Webkit
5.Edge内核 Chromium
正是因为内核不同，所以浏览器有兼容问题

浏览器的妙用

妙用F12(检查)

浏览器除了可以帮助我们浏览网页以外，还可以用来查看源代码，查看控制台输出，查看存储数据，查看网络请求，debug等。

键盘上按F12或者右击网页点击检查，就会出现以下界面，可以看到导航栏上有很多内容，今天重点内容是元素、控制台和源代码，应用程序和网络相关在之后的培训中会具体提及，这里稍微展开一下

元素（Elements）
	1.可以看到下图左上部分是HTML的源代码，能够具体看到各种元素之间包含关系，也可在
	线修改元素的代码与属性；
	2.左下角会更加清晰得显示出从html标签开始当前选中元素得父子级关系
	3.右边在样式中会显示当前元素设置所有的CSS样式，包含通过选择器设置的和从父级
	元素那里层层继承下来的。在最下面还会显示当前元素的盒子模型。

控制台(Console)
	1.控制台（Console）是JS开发里最重要的面板，主要作用是显示网页加载过程中产生的
	各类信息，可以用来进行JS代码调试、验证信息的正确性，debug等。
	2.console对象，提供5种方法，用来显示信息，重点掌握第一个即可
	日志信息console.log()、一般信息console.info()
	除错信息console.debug()、警告提示console.warn()
	错误提示console.error()
	

源代码(Sources)
	在源代码左边部分可以看到当前网页文件所用到的所有资源的具体结构（大家可以学习一下优秀网页项目的
	具体文件结构），当前打开的网页界面所涉及到的所有源代码都会出现在该栏，
	包括：css样式、img图片、js文件等；在其中的文件可以直接打开查看源代码部分
	

应用程序(Application)
	主要记录网站加载的所有资源信息，包括存储数据（Local Storage、Session 
	Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
	【Local Storage】浏览器永久存储 ，如果你在开发过程中使用了local storage来存储
	键值对(KVPs)，那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个
	键值对；
	【Session Storage】浏览器零时存储，会话级别；
	【Cache Storage】浏览器本地缓存；
	【Application Cache】应用程序缓存；
网络(Network)
	可以查看请求地址、URL、响应状态码（Status）、响应数据类型（Type）、
	响应数据大小（Size）、响应时间（Time）以及重要相关区域的请求耗时（Waterfall），
	也可筛选出不同类型的URL；

gitee作业提交方式

建立一个gitee仓库

在每次培训后学长学姐可能会留下一个小作业，为了方便管理查看，请同学们在gitee上创建
一个仓库，并命名为Bluemsun_homework2023 (拼错的自罚一个巴掌qwq)

1、登录进入主页，右上角加号下拉后点击新建仓库

2、进入后填写仓库名称Bluemsun_homework2023(拼错的自罚一个巴掌qwq)，一开始并不能直接设置成开源的，下面三个都不用勾选，直接点击创建

3、点击下面这个按钮

4、点击管理，填写仓库基本描述，拉到最下方，选择开源！！！（勾选三个选项），保存

5、回到仓库，点击文件就可以新建文件夹啦，请对每次作业实现分类记录（比如第一次作业或第一周培训课作业。。。）

6、上传作业：到对应目录点击上传文件，点击或拖拽上传文件，填写相应描述后即可成功

7、回到仓库页面，点击右上角 “克隆/下载”按钮，复制https类型的仓库地址，提交到群里的共享文档中（再次提醒，一定要开源！！！）