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

你可能感兴趣的:(Web网页开发,前端)