HTML5-VScode-基本技巧(不讲HTML标签怎么用,有点点基础的方可看看)

临时工老六

已于 2022-09-06 11:02:52 修改

阅读量1.6k

点赞数

分类专栏： html5 文章标签： vscode html html5

于 2022-06-17 12:54:05 首次发布

本文链接：https://blog.csdn.net/weixin_45967378/article/details/124556685

版权

本文介绍了如何使用VScode进行HTML5开发，包括基础设置、必备插件、Emmet语法、CSS选择器和定位等，强调了VScode的快捷键和调试工具，如Live Server和代码片段，帮助开发者提升效率。

摘要由CSDN通过智能技术生成

目录标题

前言:没啥基础的看到第5章就可以了,学到"选择器"的同学应该能全篇看完

1.认识VScode

没啥的,就一个编辑器(要下载就去B站搜:"vscode下载"其他软件也是这样下载)(但凡是安装软件/创建文件,一律起英文名字)

2.VScode的基础设置/必装插件(Ctrl+Shift+X) , 装完后记得重启软件

Auto Rename Tag (2.58MB)首尾标签同时修改(不会有人不装这个吧?)
Chinese (Simplified) (简体中文) 菜单栏中文(对自己英文有信心的尽量别用这个)
CSS Peek (5.4MB)查找css样式(只能找外部的css文件 ,按F12或者按住Ctrl,把鼠标移到到HTML里标签的属性上,该插件对vue不起作用)
Dracula Official (0.2MB)暗黑主题 , 还挺好看
HTML CSS Support (0.7MB 有用但又不是完全有用)为 HTML类属性提示外部CSS 类名称补全。
htmltagwrap (3MB)选中一段代码+Alt+W : 给该段代码额外嵌套一层标签
Image Preview (1MB)鼠标触碰图片链接时 , 即时显示图片
Live Server (3.6MB)即时自动刷新网页,同步更新代码(vscode编辑器要打开"文件夹"!!!,只打开HTML文件是不行的,vscode右下角Go Live启动浏览器)
open in browser (0.35MB)右键打开浏览器或者Alt + B
vscode-icons (5MB)文件夹的图标变好看 (装了就会给生活添加点乐趣)
Yao-Translate (0.56MB)翻译:先选中文本再按 Ctrl+shift+t 转换就按 Ctrl+shift+r
vscode左上角->文件->自动保存这个还是开启比较好(对于没有手动保存习惯的我简直就是神器)

下面是 HTML进阶的插件(初学者不一定用得上)
Bootstrap 4 & Font awesome snippets (1.2MB)包含Bootstrap 4＆Font awesome 的代码片段
Code Runner 运行多种语言的代码(1.35MB 右上角三角形 Ctrl+Alt+N )
Vetur (65MB) 语法高亮、智能感知/提示
VueHelper 提示vue代码片段
Vue TypeScript Snippets 提示vue的 typescript 代码片段
Vue 2 Snippets 提示vue 2代码片段
Vue 3 Snippets 提示vue 3代码片段
vuetify-vscode v-???的代码提示
JavaScript (ES6) code snippets 提示es6代码片段
javascript console utils Ctrl + Shift + L/D : 一键生成/删除 console.log
JavaScript Snippet Pack 提示js代码片段
jQuery Code Snippets 提示jQuery 代码片段

3.创建项目HelloWorld(但凡是安装软件/创建文件,一律起英文名字)

在这里插入图片描述

4.调试 / 工具

在浏览器里 :

F12 or 右键-检查
上面/左边Elements(元素) ; 下面/右边Style(样式) (如果有黄色感叹号就说明这个语句有问题)
Ctrl+滑轮:放大缩小调试代码
Ctrl+0:复原浏览器显示大小

在vscode里的快捷键 :

<body>
	<div>1</div>
    <div>2 , 光标放这:Ctrl + Shift + 回车 :在1和2之间开一行</div>
    <div>3 , 光标放这:Ctrl + 回车 :在2和3之间开一行</div>
    <div>4</div>
    
    Alt + 上/下方向键 :将该行向上/下移动
    Alt + Shift + 上/下方向键 :将该行向上/下多复制一次
    
    按着Alt + 按着Shift + 按着鼠标左键(拖动) :选中多行
    按着Alt + 鼠标左键 :点哪里,哪里就会有光标
    Ctrl + 空格 :启动代码提示功能
    Ctrl + Alt + F :整理代码
</body>

5.Emmet语法(就是快捷键)

Emmet语法,快速生成html标签,下面要求对HTML的标签/选择器有初步的认识

以下的div标签可以自己替换其他的标签。类(class)名,id名可以自己更改。calss=“自己写名称”
注意"符号" , "符号"才是本体!!!
注意光标必须得在 Emmet语句最后面再按Tab键,否则将会出错
Ctrl + 空格 :启动代码提示功能
这一章节的标签均在html的body里面
别告诉我不认识 “tab” , 键盘Q键左边那个就是

<body>
自动生成标签的 类选择器/id选择器 , 默认是div ,更改方法: 标签.类名 / 标签#id名
	.nav + tab<!-- .nav要自己敲出来 -->
	<div class="nav"></div>
	#nav + tab
	<div id="nav"></div>
	p.text + tab <!-- 默认是div ,更改方法: 标签.类名 / 标签#id名 -->
	<p class="text"></p>
	
一次性生成多个div , div可以改成别的标签
	div*3 + tab
    <div></div>
    <div></div>
    <div></div>
    
$自增符号,生成 连续的 类选择器 , demo$是类选择器名 选择器名$*3 demo1~3 
 注意: $ 和 * 得配套使用,没有 * 就没有顺序了
	li.demo${第二个$}*3 + tab
    <li class="demo1">第二个1</li>
    <li class="demo2">第二个2</li>
    <li class="demo3">第二个3</li>
    
同时生成div和p
	div+p + tab
	<div></div>
	<p></p>

ul包含li
	ul>li + tab
	<ul>
        <li></li>
    </ul>
    
{内容放这里}
a{直接会附带内容} + tab
	<a href="">直接会附带内容</a>

综上:div*2+p+ul>li#demo${li标签$}*2
	<div></div>