初识前端以及对vscode插件的安装

一、前端

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript，最新的高级版本HTML5、CSS3等。

1.核心技术

• HTML
  指的是超文本标记语言(Hyper Text Markup Language)，其基于XML标准开发的用于表示网页的标记语言，经历了多个版本的发展，已经发展到5.0版，得力于W3C建立的标准和规范。
• CSS
  级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。它通常可以以三种形式被引入到html文件中，分别为行内样式表，内部样式表以及外部样式表,通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
  外部样式表引入方式如下：

   <link rel="stylesheet" href="style.css">

• JavaScript
  JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

2.前端框架

• Vue
  Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
• jQuery
  jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

3.前端基础课程及标签查询库推荐

• pink老师:HTML5+CSS3
• pink老师:JavaScript
• 标签查询库：MDN
  
  
  
  

二、vscode插件安装

1.汉化包

• 安装好vscode后，首先点击此按钮

• 搜索“ Chinese"并下载，安装汉化包

2.open in browser

• 下载此插件后，写完的html页面无需在文件夹中打开，可选择使用快捷键Alt+B,使用默认浏览器打开，或者鼠标右击，用其他浏览器打开，如图所示：
  

3.CSS Peek

• 使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
  效果如下：

总结

前端是一个入门容易，但想要精通需要付出巨大的努力，前端也不是自己一个人的工作，也需要与后端交互，形成动态结构。如果你怀揣这样一个梦想，希望未来的你会对当初选择前端而感到欣慰，加油吧前端少年！