vscode下html快捷编程

最新推荐文章于 2024-04-07 18:03:26 发布
最新推荐文章于 2024-04-07 18:03:26 发布
阅读量1.2k 收藏 13
点赞数 2
分类专栏： 前端 文章标签： vscode html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50552284/article/details/120560021
版权

目录索引

1. 生成html模板：【!】或者【html:5】

生成的模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.单个标签的快速生成

2.1 打完标签名，按下回车键或者Tab键：【div】

生成的模板如下：

<div></div>

2.2 【#】id，【.】class，【[]】属性 ，【{}】标签内容

例：

div.class1#id1[height=100%][width=50%]{aaa bbb}

生成的模板如下：

<div class="class1" id="id1" height="100%" width="50%">aaa bbb</div>

3.生成多个相同的同级标签：【table*3】

生成的模板如下：

  <table></table>
  <table></table>
  <table></table>

4.生成多个不同的同级标签：【div+input+table】

生成的模板如下：

  <div></div>
  <input type="text">
  <table></table>

5.生成嵌套标签：【>】

5.1 指定标签：【el-container>div>table】

生成的模板如下：

  <el-container>
    <div>
      <table></table>
    </div>
  </el-container>

5.2 指定class：【.class1>.class2>.class3】

生成的模板如下：

  <div class="class1">
    <div class="class2">
      <div class="class3"></div>
    </div>
  </div>

再例如：【el-container.class1>div.class2>table.class3】
生成的模板如下：

  <el-container class="class1">
    <div class="class2">
      <table class="class3"></table>
    </div>
  </el-container>

5.3 指定id：【el-container#id1>div#id2>table#id3】

生成的模板如下：

  <el-container id="id1">
    <div id="id2">
      <table id="id3"></table>
    </div>
  </el-container>

5.4 同时指定class和id

例：

el-container.class1#id1>div.class2#id2>table.class3#id3

生成的模板如下：

  <el-container class="class1" id="id1">
    <div class="class2" id="id2">
      <table class="class3" id="id3"></table>
    </div>
  </el-container>

5.5 上级元素：【^】

例：

div#id1>div#id2>div#id3^div#id4

生成的模板如下：
注：【^】使得id4的层级和它的上层元素id2相同

  <div id="id1">
    <div id="id2">
      <div id="id3"></div>
    </div>
    <div id="id4"></div>
  </div>

6 自增长：【$】

例：

div>div>ul>li*3>img[src=./imgs/0$.jpg][alt={img 0$}]

生成的模板如下：

  <div>
    <div>
      <ul>
        <li><img src="./imgs/01.jpg" alt={img 01}></li>
        <li><img src="./imgs/02.jpg" alt={img 02}></li>
        <li><img src="./imgs/03.jpg" alt={img 03}></li>
      </ul>
    </div>
  </div>

7.导入外部css：【link:css】

生成的模板如下：

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

8.导入外部js：【script:src】

生成的模板如下：

<script src=""></script>

9.随机文本的输入：【Lorem】

Lorem：自动输入1行随机文本(默认30个单词)。
Lorem10：自动输入1行随机文本(10个单词)。
Lorem*5：自动输入5行随机文本(每行默认30个单词)。
Lorem2*5：自动输入5行随机文本(每行默认2个单词)。
【完】

小麦魔法
关注
专栏目录
vscode 自动生标签_VS Code插件
weixin_39530960的博客
01-31 3596
VS Code是前端界必备的开发工具。介绍几款高效、好用的插件，让原本单薄的VS Code如虎添翼，开发效率倍增。vscode-iconsvscode-icons不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标，例如，git、Markdown、配置项、工具类等Better Comments一款让注释会说话的插件，注释前加 * ！ ？ todo // 就可...
使用vscode时，如何在.vue文件中补全html代码
Phil Jing
04-28 4817
vscode不得不说是个神器，微软大法好，毕竟webstorm不会用，3年的老机器打开几乎是秒开，使用过程没发现卡顿现象。目前码vue，就装了Vetur、Vue 2 Snippets两个插件，习惯了联想补全的我发现.vue文件没有自动补全&lt;div&gt;之类的html元素的功能。度娘谷歌一下一堆方法，在settings.json中添加或者修改如下"files.associations": {...
vs code怎么快速形成html5,VS Code 快速生成代码
weixin_33911375的博客
06-29 617
例：vscode 中输入div.list>div.item_$*6 摁下回车键就会生成如下代码类名 .输入 div.wrapperid #div#wrapper属性 []span[title="test"]后代 >div>span>a兄弟 +div+p+span上级 ^div>span^i乘法 *ul>li*2文本 {}div>span{this is t...
vscode快捷键创建div和起class名字
weixin_72155467的博客
03-06 4222
vscode快捷键创建div和起class名字
VScode快速创建HTML标签
jinchunye的博客
01-08 5239
1.生成一个带有id的div标签。 div#dome <div id="dome"></div> 2.生成一个带有class的div标签。 div.dome <div class="dome"></div> 3.生成一个带有特定属性的标签。 a[href=“www.baidu.com”] <a href="www.baidu.com"></a> 4.生成一个标签有内容的div。 div{内容} <div&gt
vscode快捷用法
weixin_50636581的博客
11-14 565
emmet语法教程 vscode快捷编写代码 快速生成css样式语法 CSS 基本采取简写形式 比如 w200 按tab 可以 生成 width: 200px; 比如 lh26px 按tab 可以生成 > line-height: 26px; 快速生成HTML结构语法 1.生成标签 直接输入标签名 比如 div 然后enter 键， 就可以生成<div></div> 2.想要生成多个相同标签 加上 * 就可以了 比如 div*3
VScode修改默认生成的HTML模板的方法
10-14
VS Code（Visual Studio Code）是一款由微软开发的免费、开源的代码编辑器，支持多种编程语言的语法高亮、代码补全、Git控制等强大功能。它深受前端开发者喜爱，特别是在编写HTML页面时，VS Code提供的Emmet插件可以...
Vscode压缩包下载
04-22
VSCode（Visual Studio Code）是一款由微软开发的免费、开源的源代码编辑器，它支持多种编程语言，并具有丰富的插件系统，使得开发者可以根据自身需求定制功能。在本压缩包中，包含的是VSCode的用户安装程序，版本为...
前端的安装包vscode压缩包
04-20
- **跨平台**: VSCode可以在Windows、Linux和macOS上运行，这使得开发者能够在不同的操作系统环境下保持一致的工作流程。 - **内置Git支持**: 内置的Git集成使版本控制操作变得简单，用户可以直接在编辑器中完成...
第2讲 vscode软件的安装与使用_vscode_vscode使用_
09-29
**Visual Studio Code（VSCode）** 是由微软开发的一款免费、跨平台的源代码编辑器，支持多种编程语言和框架，被广泛应用于Web、桌面和云应用的开发。本讲将详细阐述VSCode的安装与使用，帮助你快速掌握这款强大的...
VSCode 安装教程（超详细）
热门推荐
9.冄2.7.號的博客
12-02 11万+
VSCode安装教程
【提高效率】VScode快速生成代码片段（代码模板）
coderYYY的博客
01-15 3891
我们在写代码的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成，提高效率。 VSCode中的代码片段有固定的格式，如果是自己写那种格式的话，比较慢且可能会写错，所以我们一般会借助于一个在线工具来完成。 具体的步骤如下： 第一步，复制自己需要生成代码片段的代码（这里以vue3生成app的代码片段为例）； 第二步，https://snippet-generator.app/在该网站中生成代码片段； 第三步，在VSCode中生成代码片段； 代码片段是什么
VScode快速编辑html
蒟蒻达的博客
12-08 5238
在使用vscode编辑html时，有很多常用的技巧可以提高我们的开发效率： 1. 在空白处打一个 ！弹出提示后按tab键： 2. 批量生成相同的标签，如：想并列的生成3个div标签，输入 div*3 回车即可： 3. 批量生成嵌套的标签，如div>div>div： 4. 如果想顺便声明类的名字，直接 .类名： 5. 如果想生成并列的但是不一样的标签： ...
用VScode写html快速生成代码
zjj8008120308的博客
07-04 2559
1.直接输入标签名再回车快速生成一个或一对标签 2.ctrl + /快速生成和取消注释< ! - - - - > 3.多个平级标签+，* 输入 div*5 会有提示，按回车，出现下面的代码 <div></div> <div></div> <div></div> <div></div> <div></div> 输入p+a会有提示，按回车，出现下面的代码 &.
emmet html 基础语法 _ vscode html代码生成快捷键
weixin_41244495的博客
05-30 604
1. 基本使用： a. 语法：标签+tab = 生成的html代码 div + tab<div></div> 2.不同符号的作用 0. $ 号： 为元素添加序号。 1.* 号： div*6 = 生成6个div 2.[] 号： a[href="#"] = 括号中的属性值 3.{} 号： 输入文本到标签中 a[href="#"]{$} <li><a href="#">1</a></li&...
vscode中添加html自定义模板
lingliu0824的博客
03-29 6224
通常，在编写代码时，在编辑器中输入部分就会生成相关的联想 如输入HTML选择html:5的联想就会出现以下内容 那么如何在vscode编辑器中自定义模板，输入特定字符就会生成事先定义好的模板呢 1.点击界面左下角的设置图标，选择“用户代码片段” 2.选择html.json 3.在.json文件中添加以下内容，并保存 4.在.html文件中输入vue,回车，并会生成刚刚自定义的模板内容 注意...
vsode中的html文件的常用的快捷方式(1)
最新发布
radcb55226的博客
04-07 438
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-zcka9hY9-1712484159948)][外链图片转存中…(img-pg1AfxBO-1712484159948)]
Web学习（一） html基础标签
May the Force be with you
03-05 3245
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
vscode快捷jian生成vue
09-08
VSCode是一款非常流行的代码编辑器，支持多种编程语言和框架的开发。在VSCode中可以通过快捷键来生成Vue文件。 生成Vue文件的第一步是确保系统中已经安装了Vue的开发环境，包括Node.js和Vue的脚手架工具Vue CLI。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值