蓝旭工作室2023春季培训第一周预习博客

一、走进前端

1.前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。在前端的开发中， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

2.前端开发语言：

HTML（超文本标记语言）：是为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语言。使用标记标签描述网页。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

CSS（级联样式表）：通常又称为"风格样式表"，它是用来进行网页风格设计的。css样式可以放到html页面中，也可以单独的放到css文件中。

JS（JavaScript）：脚本语言。主要目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。

二、部分VSCode插件的安装与使用

CSS Peek：允许将 css ID 和类字符串作为从 html 文件到相应 CSS 的定义进行窥视。使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。（在 HTML 文件中右键单击选择器，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。）

Quokka.js：编辑器中的 JavaScript 和 TypeScript 演示场。Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。（安装插件后，ctrl+shift+p输入Quokka new JavaScr..即可使用）

Open in Browser：在用户选择的浏览器中打开 HTML 文件。由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端(Firefox，Chrome，IE)中打开命令面板选项。（Alt+B)

browser preview：可以让我们在vscode里面打开浏览器，一边编码一边查看

Microsoft Edge Tools for VS Code：(没太看懂具体怎么用）

• 无需离开Visual Studio Code即可开发网页和使用 DevTools。 此扩展提供了在浏览器窗口中使用 DevTools 进行网页开发的替代方法。

• 模拟设备，例如在开发期间以各种视区大小显示网页。

• 从Visual Studio Code内测试网页的可访问性。

• 实时编辑 CSS 和 SASS，并在编辑实际源文件时查看立即反映在浏览器实例中的更改。 CSS 镜像编辑允许你控制是否保存对文件的更改 .css 。 DevTools 将打开并编辑文件.css，但不自动保存文件，以便你可以决定是否保存在“元素”工具的“样式”选项卡中所做的更改。

Live ServerPP：在服务器端打开你的文件，实时显示你修改的代码，支持websocket 消息服务，可以用于调试websocket 客户端，支持可编程虚拟文件，可用于模拟服务端API接口 

JavaScript (ES6) code snippets：功能：ES6的js代码片段，比如clg---console.log

Auto Rename Tag：自动重命名标签

三、认识浏览器

网页浏览器（英语：Web Browser，常简称为浏览器）是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标识。信息资源中的超链接可使用户方便地浏览相关信息。

网页浏览器虽然主要用于使用万维网，但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。

主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

—— 摘自 【 维基百科】

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。浏览器的主要组件：用户界面、浏览器引擎、呈现引擎、网络、用户界面后端、Javascript解释器、数据存储。 

四、Gitte提交

Gitte是开源中国社区推出的基于git的代码托管协作开发平台

已参照这两篇博客完成配置https://blog.csdn.net/qq_38403590/article/details/120907444?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167958400116800226569954%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167958400116800226569954&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-120907444-null-null.142^v76^control,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=Gitee&spm=1018.2226.3001.4187https://blog.csdn.net/qq_38403590/article/details/120907444?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167958400116800226569954%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167958400116800226569954&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-120907444-null-null.142^v76^control,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=Gitee&spm=1018.2226.3001.4187

【 维基百科】