前端入门（1）

最近社团需要，所以整理了一下从0开始学习前端的一些知识。

安装软件（VScode）以及对应插件的安装，相关配置。
介绍vscode常用快捷键
初始化第一个html程序

1.软件以及插件安装

前端开发其实对开发工具的要求很低，甚至用记事本也可以写。但是一个好的工具可以让我们事半功倍，在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。

VS vode特点：

开源，免费；
自定义配置
集成git
智能提示强大
支持各种文件格式（html/jade/css/less/sass/xml）
调试功能强大
各种方便的快捷键
强大的插件扩展

下面介绍一些插件。

首先去官网下载和安装这个不必多说，打开vscode之后，红框所示位置，下载安装插件

1. 首先我们先给汉化一下。在搜索栏搜索chinese，点击安装即可（即图中"卸载"的位置）
2. 接下来介绍几个常用插件及使用方法
LiveServer 可以实时预览网页，十分方便
（使用时必须在文件夹打开文件）
3. 显示Visual Studio代码的图标，目前该插件已被vscode内部支持：“文件” -> “首选项” -> “文件图标主题”

4. 一些常用的代码提示插件

HTML Snippets
HTML CSS Support
jQuery Code Snippets

5. 还有其他补充的小功能类

Code Spell Checker 检查拼写错误
Bracket Pair Colorizer 用于着色匹配括号
filesize 在底部状态栏可以看到文件大小等信息
Import Cost 查看引入大小

2.常用快捷键介绍

Ctrl + F 查询
Ctrl + H 替换
Shift + Alt + F 格式化代码
Shift + alt +up/down 复制当前行
Shift + ctrl + k 删除当前行
Ctrl + ~ 控制台终端显示与隐藏
Ctrl + S保存
Ctrl + z 撤销
Ctrl + shift + Z返回
Ctrl+\ 选中区域注释
Ctrl + +/- 放大缩小字体
Ctrl + h 替换
Ctrl + Shift + h全局替换

3.新建第一个html文件

新建html文件后，输入！即可快速生成html标准模板

接下来就可以快乐的写代码了！

前端入门知识整理（1）Vscode使用相关推荐

前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
web前端入门知识解析
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
WEB前端入门知识及要点大全
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
Uni-APP入门知识整理
目录前言 - 课程介绍一.课程背景二.学前须知三.课程大纲 UniAPP 快速入门学习一.UniAPP 介绍 (1)什么是 UniAPP ? (2)为什么要选择 UniAPP ? (3)Un ...
【VUE】vue前端框架知识整理
VUE.JS学习笔记第一章 vue简介基于VUE框架开发的开源前端项目,这个是我学完后开发的开源实例项目,大家有兴趣的可以一起交流,喜欢的话别忘了star一下哦. 1.1 Vue基本使用 Vue的 ...
深度学习入门知识整理-训练技巧以及模型调优
目录网络模型先简单后复杂确认模型损失检查中间输出和连接关于可视化神经网络的主要方法,Faizan Shaikh 举出了三个例子: 超参数的选择学习率范围侧视图Colab Notebook N ...
speedtree中文对照ppt_SpeedTree树木建模入门知识整理
本文知识点整理仅为记录本人学习过程中的知识点,略显粗浅,内容较杂乱,敬请各位见谅! 一.软件介绍 Speedtree是三维软件做树木的一个很强的软件,支持很多树木的快速建立和渲染,而且它自己本身还带有 ...

前端入门知识整理（1）Vscode使用