走进前端，vscode插件的安装及使用

Michelle&姐姐

已于 2022-03-30 14:48:00 修改

阅读量1.7k

点赞数 1

分类专栏：前端开发文章标签： html

于 2022-03-30 14:46:02 首次发布

本文链接：https://blog.csdn.net/weixin_62859027/article/details/123816559

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Part One 走进前端

一.概述

web前端开发源网站设计，使用各种技术和框架创建页面系统呈现给用户的过程，通过编写代码的方式将图片、文字等素材在页面进行合理布局，达到与效果图相同的效果。前端开发可以使系统主题突出、页面美观、响应速度快、交互方便，对用户体验至关重要。

二·使用的技术

HTML：HyperText MakeUp Language,超文本标记语言，是用来描述网页结构的一种标准语言，不是编程语言，是标记语言。用于设定网页的内容，比如说标题文字、段落文字、超链接等
CSS：叠成样式表，用于美化页面元素样式。比如设置网页背景的颜色、标题文字大小、导航栏的布局
JavaScript：一种脚本语言，用于页面行为的完成、网页的动态效果、与用户交互的结果

三.使用编辑工具

vscode：Visual Studio Code,这个编辑器真的超级好用，拥有非常丰富的插件资源而且安装方便，还免费。关键这个编辑器中含有简写，写代码不要太方便。
Google：我自己使用的是谷歌浏览器，也可以使用其他浏览器，但要注意不同浏览器内核有差异，前端开发时要注意兼容各种浏览器以达到相同的页面效果

四·开发流程

根据需求和效果图，开发者通过编写代码的方式将图片、文字等素材进行合理的布局达到与效果图相同的效果
实现客户端的一些交互效果与动态效果
进行兼容性测试。以保证网页可以兼容各个浏览器

每个网页都有自己的源代码，读者可以鼠标点击右键进行查看



<doctype!html>
<html lang="en">
<head>
	<meta chrset="UTF-8">
	<title> 成都</title>
</head>
<style>
	body{
		background-image:url(image/背景图.jpg);
		background-repeat:no-repeat;
		background-size: cover;
	     }
</style>
<style>
spant{
	font-size:xx-large;
	font-weight: bold;
}
</style>
<style>
	span{
		font-size:large;
		font-weight: bold;
	}
	</style>

<body>
<article> 
	<audio src="成都.mp3" controls="controls" loop="loop">浏览器不支持html5：audio </audio>
	<pre >
	<h1><spant>                                              成都                       </spant> </h1>
	<h2>					                                       ---成就之都    </h2>
	</pre>
	<p>
	<img src="宽窄巷子.jpg" width="400" length="400">
	<img src="锦里.jpg" width="400" length="400">
	<img src="春熙路.jpg" width="400" length="400">
	</p>
	<span>
	<pre>                                               											                                                                         
		大熊猫                           好雨知时节，当春乃发生			    世界大学生运动会
		火锅串串麻辣烫                   随风潜入夜，润物细无声                     世界科幻大会中国国际投资商贸洽谈会
		川剧、盖碗茶                     野径云俱黑，江船独火明                     金砖国家领导人第九次会晤
	        IFS、太古里                      晓看红湿处，花重锦官城                     世博会
	</pre>
	</span>
	<p>
	<img src="串串.jpg" width="400" length="400">
	<img src="美食.jpg" width="400" length="400">
	<img src="熊猫.jpg" width="400" length="400">
	<h3>成都简介</h3>
	<p>
		成都（简称：蓉）是四川省省会、副省级市、超大城市[1]、成都都市圈核心城市。<br/>[2]成都位于四川省中部，四川盆地西部，介于东经102°54′～104°53′和北纬30°05 ′～31°26′之间，总面积14605平方公里。<br/>[3]成都市辖20个县级行政区划单位（市辖区12，县级市5，县3），261个乡级行政区划单位（街道161，镇100）。[4]根据第七次全国人口普查结果，2020年11月1日零时成都常住人口2093.78万人。<br/>[5]成都因地处川西盆地，河网纵横、物产丰富，自古享有“天府之国”的美誉。<br\>古蜀文明发祥地，中国十大古都之一。1952年9月1日，中华人民共和国中央人民政府撤销各行署、恢复四川省建制后，在成都成立四川省人民政府。[6]
	</p>
		<a href="https://www.bilibili.com/video/BV1sf4y197Md/?spm_id_from=333.788.recommend_more_video.-1"><span>视频资料</span></a>
		<br/>
		<a href="问卷.html"><span>click here to fill a form </span></a>
</article>
</body>
</html>

（这个是自己写的一个例子）

Part Two vscode插件的安装和应用

一 ·vscode的安装

下载路径：Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

点击download for windows，然后根据安装向导一步步安装即可

二·vscode的插件安装和应用

在vscode的设置中点击右键，选择拓展，之后就可以下载插件和应用了

kite ai code autocomplete 一款功能强大的人工智能助手，可以进行多行补全功能，可以帮助我们大大提高编码速度以及编码准确度
one dark Pro 一款夜间主题的小插件，可以帮助我们缓解夜间赶码的疲惫，而且其配色绝绝子，大大提升了源代码的观赏性
material icon theme 一个图标主题，里面的图标主题都很好看
Chinese language ：看不懂英文的同学，这个就是救命的小插件了
live sever：实时保存插件，不需要反复更新，但注意要设置自动保存频率，然后打开的时候要以文件夹的方式（即点击文件--打开文件夹）

除此之外，vscode还有许多的小插件，有待读者根据自己喜好自行下载和研究

（这是加入了小插件之后的代码，很漂亮）

总结

通过这次预习，对于web前端开发的流程和基本工具有了更深入的了解，对于vscode掌握了许多提高编码速度和准确度的方法，也尝试了第一次写博客。期待第一次的上课

Michelle&姐姐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
走进前端，vscode插件的安装及使用

Part One 走进前端一.概述web前端开发源网站设计，使用各种技术和框架创建页面系统呈现给用户的过程，通过编写代码的方式将图片、文字等素材在页面进行合理布局，达到与效果图相同的效果。前端开发可以使系统主题突出、页面美观、响应速度快、交互方便，对用户体验至关重要。二·使用的技术HTML：HyperText MakeUp Language,超文本标记语言，是用来描述网页结构的一种标准语言，不是编程语言，是标记语言。 CSS：叠成样式表，用于美化页面元素样式 JavaScript：一.
复制链接

扫一扫