html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)

  1. vs code下载地址:
    https://code.visualstudio.com
    ①点击链接进入官网下载:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第1张图片
    ②点击.exe文件不断点击下一步完成安装:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第2张图片

  2. 汉化VS code:
    下载好的VS code是英文版本,需要我们设置为中文:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第3张图片
    ①点击扩展;
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第4张图片②在搜索框输入chinese,点击安装,重新启动VS code后生效:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第5张图片

  3. VS code常用插件(部分):
    安装方式与上述汉化过程相同。
    ①open in browser
    右击html文件选择红线框中的任意一项,可以在默认浏览器或选择其他浏览器中显示。
    点击open in default Brower 将在默认浏览器打开:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第6张图片
    点击open in orther Borwer,可以选择要使用的浏览器:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第7张图片
    ②view in borwer
    直接在默认浏览器显示:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第8张图片
    ③CSS Peek
    使用此插件,可以追踪样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项(转到定义),它便会给你发送样式设置的 CSS 代码。
    ④Auto Rename Tag
    自动完成另一侧标签的同步修改。
    ⑤Auto Close Tag
    自动闭合HTML/XML标签。
    ⑥HTML Snippets
    智能提示HTML标签,以及标签含义JavaScript(ES6) code snippetsES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
    ⑦Path Intellisense
    自动提示文件路径,支持各种快速引入文件

  4. VS code常用快捷键:
    全选: ctrl + a
    文件下的首选项进行设置
    从头选中一行 shift + end
    从尾选中一行 shift + home
    快速复制一行 shift + alt + ↓
    快速移动一行 alt + ↓或↑
    向前缩进 shift + tab
    多光标: alt + 鼠标左键
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第9张图片
    选择同样内容的下一个: ctrl + D
    写标签单词,然后按Tab键自动补充
    初始代码自动补充:! + tab


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

快速添加注释和删除注释:ctrl + / 或shift +alt + a
重复写标签:例如:li*5 +tab键
创建出:

 <li>li>
 <li>li>
 <li>li>
 <li>li>
 <li>li>
 快捷键:div#elem + tab键: 
 <div id="elem">div>

快捷键: li{$}*4

  <li>1li>
  <li>2li>
  <li>3li>
  <li>4li>
  1. VS code引入文件方式:
    点击文件 -> 打开文件/文件夹、新建文件/文件夹 ->使用。
    在打开的文件夹中,可以点击小图标新建文件或文件夹:
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第10张图片
    html+css学习笔记1(Visual Studio Code 安装与使用,快捷键)_第11张图片

你可能感兴趣的:(前端,编辑器,html,html5,css,css3)