vscode编写html的快捷键（敲代码的快捷方式）

最新推荐文章于 2024-07-25 10:14:00 发布
最新推荐文章于 2024-07-25 10:14:00 发布
阅读量8.5k 收藏 109
点赞数 20
分类专栏： 前端学习 文章标签： vscode 编辑器 ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muweichang/article/details/126599129
版权

今日的浪漫主义

【冰岛公路环岛】当车窗如画框，开车也成了一种享受

vscode编写html的快捷键

01. 输入！

选择第一行
在这里插入图片描述将自动生成缺省html代码框架：

在这里插入图片描述
或者输入！接着输入tab键是一样的效果。

输入html:5，然后按tab键或enter键，
效果如下：
在这里插入图片描述
在这里插入图片描述

02. 注释：ctrl + /

在这里插入图片描述

比如光标停留在test这一行，按ctrl +/有：
在这里插入图片描述再按一次，则取消注释：

在这里插入图片描述

03.输入标签名自动补齐

输入标签名 按tab键或Enter键自动补齐

输入 h1
在这里插入图片描述
在这里插入图片描述

04. {}可输入标签内的文本

如输入：h2{填充文本}
在这里插入图片描述
在这里插入图片描述

05. 为了测试，不想打字，随机文本的输入

随机文本的输入

在这里插入图片描述
Lorem自动输入一段随机文本(默认30个单词)，Lorem10 输入10个单词，Lorem*5 输入5遍随机文本

在这里插入图片描述

06. 使用"#“输入id，”.“输入class，”[]"输入属性

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

div[alt=到底了]{结束} 添加属性及包裹文本

在这里插入图片描述
在这里插入图片描述

07.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素

">“输入嵌套标签
在这里插入图片描述

div#left{I am left}+div#right{I am right} 并列标签

在这里插入图片描述

"^"上级元素

在这里插入图片描述
在这里插入图片描述

08.使用"（）“对标签分组及使用”*"生成多个相同的标签

在这里插入图片描述

在这里插入图片描述

09.自增符号$

在这里插入图片描述
在这里插入图片描述

提示：对于这篇学习笔记就暂时到这了，兄弟们加油
对于这篇学习笔记就暂时到这了，兄弟们加油

从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
如果又出错的，请各位友友指正。

请添加图片描述

新人报到，各位友友们，给我个三联（点赞，关注，收藏）

极具浪漫主义色彩的菜鸟学习之路
关注
  • 20
    点赞
  • 踩
  • 109
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
markdown代码编辑器vscode及安装说明
10-22
VSCode不仅适合编写Markdown文档，还拥有强大的代码编辑能力。它支持代码片段、智能感知、Git集成、调试工具等功能，使得开发者可以在一个统一的环境中完成从编写文档到编写代码的全部工作。 总的来说，VSCode作为...
VSCodeSetup-x64-1.19.1 安装软件以及详细配置
10-09
通常，你可以选择默认设置，但也可以自定义安装路径、是否创建桌面快捷方式等选项。 2. **首次启动与界面** - 启动：安装完成后，启动VSCode，你会看到简洁的用户界面，包括左侧的资源管理器、中间的编辑区域和...
【黑马前端—开发工具】vscode官方快捷键、Emmett快速开发语法
学习如逆水行舟，不进则退
08-25 1759
工具：vscode 比sublimetext用的简单，扩展直接去商店下载，更方便。 比dream waver的块头更小。 总之，vscode是个方便快捷，小巧精美的前端工具 VSCode 的使用 双击打开软件。 新建文件（Ctrl + N ）。 保存（Ctrl + S ）, 注意移动要保存为 .html 文件 Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图 5. 生成页面骨架结构。 输入! 按下 Tab 键。 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In D
HTML编辑器与开发工具推荐——vscode & Sublime Text & Atom & HBuilderX
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-15 2314
HBuilderX拥有丰富的插件生态系统，开发者可以根据自己的需求安装和使用各种插件，扩展HBuilderX的功能。HBuilderX作为一款轻量级的IDE，仅10余M的绿色发行包（不含插件），启动速度快，大文档打开速度快，编码提示响应速度快。Sublime Text是一款高度可定制的文本编辑器，以其优雅的用户界面、强大的功能和卓越的性能而受到开发者的喜爱。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。🙈吾辈才疏学浅，摹写之作，恐有瑕疵。
Html种类和VScode快捷键
G81948577的博客
04-18 1985
width:设置单元格的宽度 这一列中最宽的单元格的宽度是这一列的宽度。width:设置单元格的宽度 这一列中最宽的单元格的宽度是这一列的宽度。1、使用图片要注意图片是以原时尺寸显示的，如果像设置图片尺寸，切忌图片变形使用 单方向设置图片尺寸即可。colspan:设置单元格合并的列数-->align：设置单元格中内容的对齐方式。align:设置行中每个单元格中内容的对齐方式。min数字最小值 max数字最大值 step value。-- <div></div> 竖着布局和span一样没有其他副作用-->
[VSCode] VSCode 常用快捷键
2401_84519907的博客
04-21 804
除了上述的功能，VSCode 还提供了一些其他的快捷键来快速执行一些常用的操作，如撤销、重做、保存、关闭、切换、缩放等。除了上述的功能，VSCode 还提供了一些其他的快捷键来快速执行一些常用的操作，如。VSCode 提供了一些快捷键来快速执行一些常用的代码片段操作，如。VSCode 提供了一些快捷键来快速执行一些常用的扩展操作，如。VSCode 提供了一些快捷键来快速执行一些常用的选择操作，如。VSCode还提供了一些快捷键来快速执行一些常用的操作，如。，VSCode 提供了一些快捷键来。
HTML简介，VScode快捷键
nidayeguen的博客
02-07 3246
HTML5相关标签，表单，快捷键
vscode配置和快捷键
热门推荐
Shanks
12-22 2万+
以下内容转载自https://www.cnblogs.com/qianguyihao/archive/2019/04/18/10732375.html 本文的最新内容，更新于 2020-06-19。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。 本文的最新内容，也会在GitHub上同步更新，欢迎 star。 VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。 前端男神尤雨溪大大这样评价 VS Code： .
html常用快捷键（编辑器：VScode）
2301_80138597的博客
03-23 636
（5）选择任意行内容 并按住Alt+up/down：将选择内容上移或下移（可选择一行也可选择多行）（7）Ctrl+/：注释单行，再按一次Ctrl+/则为撤销注释。（2）Alt+shift+up/down：向上复制/向下复制。（8）Ctrl+C复制 Ctrl+V粘贴 Ctrl+A全选。（9）Ctrl+S保存（养成保存的好习惯）发布于2024-03-23著作权归作者所有。+回车：直接生成html基本结构。（4）Ctrl+Z：撤销上一步操作。（6）Ctrl+F：查找内容。（3）Tab：补全剩余内容。
分享一些写HTML代码时需要掌握的VSCode快捷键
前端达人
03-11 2871
在编写大量代码时，以下这些 VS Code 快捷键非常方便。这些快捷键可帮助您更快地编写代码，提高工作效率 10 倍以上。此外，您无需安装任何扩展即可使用这些快捷键。让我们学习一些魔法吧1、感叹号 ' ! '在您的 VSCode 编辑器中打开文件，键入!并按 Enter 以获取 HTML 模板。通过简单地键入!，您就可以编写 11 行代码。您是否看到了我之前提到的“魔法”呢？它真的很简单。如...
VScode常用快捷键、
qq_60839348的博客
11-14 1万+
VScode常用快捷键，web基本组成，创建文件，命名规范
vscode实现代码片段快捷输入设置
Bearin的博客
06-07 796
4.在界面输入想要在哪儿生成快捷键,html,vue等等.我想在vue上设置快捷键,选中vue.json。英文:File==>Preferences==>Configure User Snippets。如下图添加描述,快捷键和代码片段.右边会有生成内容。中文:文件==>首选项==>用户代码片段。多个快捷键记得加逗号(,)进行分割。5.把刚刚的代码复制进去。1.编写想要的代码片段。
vscode自动补全插件详情大全.docx
06-20
5. **HTML CSS Support**：对于HTML和CSS开发者，此插件提供语法高亮和自动补全，帮助你更准确地编写HTML结构和样式，提高代码可读性。 6. **JavaScript (ES6) code snippets**：对于JavaScript（特别是ES6）的开发...
第2讲 vscode软件的安装与使用_vscode_vscode使用_
09-29
**Visual Studio Code（VSCode）** 是由微软开发的一款免费、跨平台的源代码编辑器，支持多种编程语言和框架，被广泛应用于Web、桌面和云应用的开发。本讲将详细阐述VSCode的安装与使用，帮助你快速掌握这款强大的...
VSCode切换默认终端
changyana的博客
07-23 776
我的VSCode默认终端为PowerShell，每次新建都会自动打开PowerShell。但是我想让每次都变为cmd，也就是Command Prompt。
图形编辑器基于Paper.js教程10：导入导出svg，导入导出json数据
知无涯
07-25 7128
如svg的g标签转换为group，rect标签转换为shape，一些符合元素转换为CompoundPath对象，内部其实是Path对象组成的。将提供的SVG内容转换为Paper.js项目中的图形项，并将其添加到此项目的活动层中。请注意，首先不会清除项目。最外层是一个group，然后会有很多子元素，一些svg的元素会被转换为paperjs画布中的元素。导出svg，你可以将一个元素导出成svg，也可以将一整个项目导出成svg。在这里，我们将导出的JSON对象保存到了本地存储中，便于后续的导入操作。
易语言教程——第二章 IDE介绍以及第一个程序
最新发布
qq_39172792的博客
07-25 781
打开易语言IDE后，界面如下我们双击“Windows窗口程序”打开后界面如下主要需要关注的有下面几个部分。
vscode编写html快捷键
11-16
以下是在VS Code中编写HTML的一些常用快捷键： 1. 在HTML文件中输入“!”，然后按下Tab键，将自动生成HTML模板。 2. 输入“html:5”，然后按下Tab键，将生成HTML5模板。 3. 输入“link:css”，然后按下Tab键，将生成CSS链接标记。 4. 输入“script:src”，然后按下Tab键，将生成JavaScript链接标记。 5. 输入“div”，然后按下Tab键，将生成一个div元素。 6. 输入“ul>li*5”，然后按下Tab键，将生成一个包含5个li元素的无序列表。 7. 输入“table>tr>td*3”，然后按下Tab键，将生成一个包含3个单元格的表格。 8. 输入“form>input:text+input:password+input:submit”，然后按下Tab键，将生成一个包含文本框、密码框和提交按钮的表单。 另外，还有一些其他的快捷键可以帮助您更快地编写HTML代码，例如Ctrl + Shift + K可以删除当前行，Ctrl + Shift + D可以复制当前行，Ctrl + /可以注释选定的代码行等等。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <h1>Hello World!</h1> <p>This is a paragraph.</p> </div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> <form> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <input type="submit" value="Submit"> </form> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极具浪漫主义色彩的菜鸟学习之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值