前端及vscode初识与vscode插件安装

前端及vscode初识与vscode插件安装

一：前端初识

前端，通俗理解即视觉可见区域，当我们打开一个网站，能看到的部分大多都有前端技术来完成。例如bilibili主站及其源码。

其中上半部分为展示给用户的页面，下半部分为制作此网页的源码。

而源码部分主要由HTML CSS 和JS组成。

HTML为超文本标记语言，通过一系列标签为网页制作基础框架。它不是一种编程语言，而是一种标记语言，它由一系列的标签构成。由于它能实现放入图片，声音，动画，链接等等超越传统文本的属性，所以称之为超文本语言。

CSS为层叠样式表，它能够对网页中的标签属性起到修饰作用，让网页更美观，用户体验更好。它同样是一种标记语言，它的最大价值为结构和样式相分离，即HTML专注于结构，CSS专注于样式。

JS可以为网页页面修饰行为，可以添加动态文本于HTML页面，对浏览器事件做出响应，实现用户与网页的互动。

总体来说：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
掌握了这些，就可以称得上是一个合格的前端工程师了。

二：认识vscode并安装vscode插件

（1）vscode图标：

（2）vscode界面：

这是第一次打开vscode的大致页面，为了我们开发更加方便，我们点击左上角的文件图标，再选择打开文件夹，就可以管理一个文件夹下的所有文件了，这样可以大大提升我们的开发效率。

（3）vscode插件的安装：

点击vscode左侧最下面的按钮，就会出现插件搜索框，再搜索你想要的插件即可。搜索后在目标插件右下角点击安装，vscode就会将目标插件安装成功了。不仅如此，在右边还会出现该插件的详细功能，阅读之后就能对插件有一个更加详细的认识。安装完成后重启vscode，目标插件就已经可以使用了。

（4）vscode插件的禁用与卸载：

vscode安装插件之后，如果不再需要它，那么就可以在插件中找到它，然后点击界面右方的禁用或者卸载即可。

（5）常用插件介绍：

第一个为汉化包

第二个Open in browser为我们提供了快速预览网页的途径，安装该插件后，在写好的网页上单击右键，选择open in default browser（快捷键alt+b）即可用默认浏览器打开做好的网页。

第三个为自动格式化插件，当我们写好页面保存后，vscode就会将我们的格式变成其默认的风格样式。

第四个即自动重命名，即当你对前一个标签进行修改时，与其对应的后边的标签也会自动进行修改。