走进前端，vscode插件的安装和使用
一.走进前端。
Web前端开发源于网站设计，是应用HTML,CSS,JavaScript及其衍生的各种技术和框架创建系统页面呈现给用户的过程。前端开发可以使系统主题突出，页面美观，响应速度快，交互方便，对于用户体验至关重要。
前端开发是对Web系统页面进行布局和优化，直接决定了用户的体验，是Web系统开发的重要环节。前端开发技术主要有HTML，CSS和JavaScript，分别决定了页面结构，页面样式和页面行为。
1.1概述
Web系统是指具有一定功能，以网站，APP等形式呈现的系统。例如：电商网站淘宝，京东；综合门户网站新浪，搜狐等。
1.1.1基本概念
1.web系统按照不同角色可以分为客户端，服务器端。
2.Web系统中前端是指以网页形式呈现的部分，后端是指进行数据存取，与数据库交互的部分。
3.web系统前台是指浏览器，用户登录能够浏览和使用的部分；后台是指管理员登陆能够浏览的部分。
1.1.2开发流程
1.Web系统开发流程
项目经理 交互设计师 视觉设计师 前端工程师 后端工程师 测试工程师 运维工程师 网站架构师
2.Web前端开发流程
根据需求和效果图，通过编写代码的方式将素材合理布局，达到效果图的效果；实现客户端的交互效果和动态效果；最后进行兼容性测试，保证网页在各种不同浏览器环境下显示结果一致。
1.2网站与网页
Web系统通常以网站形式呈现。网站是网页与其他资源文件的一个集合。
1.2.1基本概念
1.网站
从用户角度看，网站就是互联网上用于展示特定信息的页面的集合；从开发人员角度看，网站是一个文件夹（站点文件夹）。
2.网页
网页是网站中的一页，网站中的网页通过“超链接”的方式被组织在一起。从开发人员的角度看，网页就是符合特殊规范的可以被浏览器解析的文件。
3.主页
也称首页。主页文件名通常为index.html或者indx.htm。
4.页面元素
通常包括：站标，导航栏，超链接，广告横幅，表单等。
1.2.2网站发布
Web系统开发完成后，需要将站点文件夹上传至Web服务器上，用户才可以访问该服务器浏览网站内容。访问Web服务器时需要定位到该服务器，这个过程被称为寻址。
寻址主要涉及以下几类地址：IP地址，域名，URL。
1.2.3浏览器与搜索引擎
1.浏览器
客户端安装了浏览器，才可以访问Web系统中的网页，它的主要作用就是对Web服务器提出访问请求，在收到服务器端的应后响应后，将服务器传送回来的网页文件进行解析，渲染，并以可视化的方式呈现出来。
浏览器内核主要包含渲染引擎和JS引擎，用于解析网页源代码并在屏幕上绘制网页。
2.搜索引擎
搜索引擎就是根据用户需求，运用特定策略从互联网检索出特定信息反馈给用户的一种检索系统。
1.3Web前端开发技术
1.3.1技术构成
HTML用于设定网页结构。
CSS用于设定网页样式，主要包括页面元素的样式和网页布局。
JavaScript是一种客户端脚本语言，能够设定网页行为，用于完成网页的一些动态效果与用户的交互效果。
1.3.2技术标准
W3C（万维网联盟）是Web技术领域最具权威的技术标准机构。
JavaScript由ECMAScript,DOM和BOM三部分构成。其中ECMScript由ECMA国际组织发布标准；DOM由W3C组织发布标准；BOM由各浏览器厂商发布。
1.4前端开发工具
VS code，Sublime，Text等。
其中VS code是开源免费并且跨平台的，是主流的前端开发工具。
二.VS code插件的安装和使用
下载插件如下：
Chinese 汉化
Beautify 格式化文本（并设置了format on save,会在保存时自动格式化）
Live Server 用于模拟服务器，并自动使编辑区与浏览器同步。
Autoprefixer 用于为CSS和CSS3自动添加浏览器前缀。（只针对单独的样式表文件）
Color highlight 用于以色块形式提示CSS颜色。
Auto Renae Tage 自动改标签。
快速生成html和CSS代码：
快速生成备注： ctrl+/
标签的嵌套： 例p>span
生成同级标签：例img+a
标签分组：例（div>p)+(div>img)
打开命令菜单： ctrl+shift+enter
保存：ctrl+s
w/h/p/m+数字+enter
bgc+enter
div#要引用的id类型的样式+enter
div.class属性的取值+回车
混合使用： 例div#nav.bar
查阅资料：《Web前端开发》
https://2d.hep.com.cn/mobile/book/show/PKN7WMKXT