走进前端，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