文章目录
前端及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就会将我们的格式变成其默认的风格样式。
第四个即自动重命名,即当你对前一个标签进行修改时,与其对应的后边的标签也会自动进行修改。