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

  1. vs code下载地址:
    https://code.visualstudio.com
    ①点击链接进入官网下载:
    点击链接显示页面
    ②点击.exe文件不断点击下一步完成安装:
    在这里插入图片描述

  2. 汉化VS code:
    下载好的VS code是英文版本,需要我们设置为中文:
    在这里插入图片描述
    ①点击扩展;
    在这里插入图片描述②在搜索框输入chinese,点击安装,重新启动VS code后生效:
    在这里插入图片描述

  3. VS code常用插件(部分):
    安装方式与上述汉化过程相同。
    ①open in browser
    右击html文件选择红线框中的任意一项,可以在默认浏览器或选择其他浏览器中显示。
    点击open in default Brower 将在默认浏览器打开:
    在这里插入图片描述
    点击open in orther Borwer,可以选择要使用的浏览器:
    在这里插入图片描述
    ②view in borwer
    直接在默认浏览器显示:
    在这里插入图片描述
    ③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 + 鼠标左键
    在这里插入图片描述
    选择同样内容的下一个: ctrl + D
    写标签单词,然后按Tab键自动补充
    初始代码自动补充:! + tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  1. VS code引入文件方式:
    点击文件 -> 打开文件/文件夹、新建文件/文件夹 ->使用。
    在打开的文件夹中,可以点击小图标新建文件或文件夹:
    在这里插入图片描述
    在这里插入图片描述
发布了4 篇原创文章 · 获赞 1 · 访问量 112

猜你喜欢

转载自blog.csdn.net/qq_43812504/article/details/104574396