VS Code 快速输入代码

news/2024/11/14 13:02:15/文章来源:https://www.cnblogs.com/emanlee/p/18402725

VS Code 快速输入代码: HTML 代码

 

只输入 ! ,按Enter,这将自动生成一个基本的HTML骨架代码,例如:

 

快速输入特定的HTML标签,可以使用Emmet插件,它是VS Code的一个扩展,可以通过简短的指令生成复杂的HTML结构。

输入div,按Enter

输入div*4,按Enter

 

例如,输入 ul>li*4 将生成一个包含4个列表项的无序列表:

 

div{内容}+Enter

 

.box enter
<div class="box"></div>

#box enter
<div id="box"></div>

 

1、先输入一个 感叹号!,再按下Tab键,直接显示出html文件的基本格 式;

 <!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>


2、输入 标签名,按下Tab键,自动生成相应标签;

  <div></div>


3、输入:  ‘ span#app ’   ,按下Tab,可以快速创建id为‘app’的‘span’标签 ;

<span id="app"></span>


4、输入: ‘ div.app ’  ,按下Tab键,可以快速创建class为‘app’的’‘div’标签;

<div class="app"></div>


5、输入: ‘ ul>li*3 ’  ,按下Tab键可以快速创建‘ ul ’下的3个‘ li ’标签 ;

 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>


6、输入: ‘ ul.menu>li*3>a[href=#]‘   可以创建一个class为‘ menu ’的‘ ul ’标签;

 <ul class="menu">
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
 </ul>


7、输入  ‘ ul>li*5>a[href=#]{我序号是$} ’  ,再按下Tab键

 <ul>
  <li><a href="#">我序号是1</a></li>
  <li><a href="#">我序号是2</a></li>
  <li><a href="#">我序号是3</a></li>
  <li><a href="#">我序号是4</a></li>
  <li><a href="#">我序号是5</a></li>
 </ul>

 


REF                  
链接:https://blog.csdn.net/weixin_41804367/article/details/108614650

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/793984.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序开发系列4----页面配置--WXML列表渲染

小程序布局-WXML列表渲染 源码获取方式(免费):(1)登录-注册:http://resources.kittytiger.cn/(2)签到获取积分(3)搜索:微信小程序开发2-wxmllist列表渲染

微信小程序开发系列3----页面配置--WXML数据绑定+条件渲染

1小程序布局-WXML数据绑定 有的时候发现需要刷新一下全局的app.js才能有效果。。。。。 2小程序布局-WXML条件渲染 下图会报错:不能在if else 中间插入其他的标签 如下展示一次渲染多个标签使用block 源码获取方式(免费):(1)登录-注册:http://resources.kittytiger.c…

[C++ Daily] 虚表与虚指针的理解

虚表与虚指针的理解结果:

微信小程序开发系列1----账号注册、开发工具下载、小程序代码结构

一、注册小程序账号 url:https://mp.weixin.qq.com/cgi-bin/wx?lang=zh_CN&token= 注册后获取 AppID(小程序ID) 和 AppSecret(小程序密钥)二、微信小程序工具下载 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html官网文档:https://developers…

可测试,可维护,可移植:上位机软件分层设计的重要性

从三个方面论述了上位机软件分层设计的必要。互联网中,软件工程师岗位会分前端工程师,后端工程师。这是由于互联网软件规模庞大,从业人员众多。前后端分别根据各自需求发展不一样的技术栈。那么上位机软件呢?它规模小,通常一个人就能开发一个项目。它还有必要分前后端吗?…

【漏洞分享】2018年-2024年HVV 6000+个漏洞 POC 合集分享

此份poc 集成了Zabbix、用友、通达、Wordpress、Thinkcmf、Weblogic、Tomcat等 下载链接: 链接: https://pan.quark.cn/s/1cd7d8607b8a看着就真的看着,不学就真的5

【工具推荐】FindEverything(最新版) - 内网渗透必备 敏感文件搜索工具

工具介绍 内网渗透过程中搜寻指定文件内容,从而找到突破口的一个小工具 下载链接: 链接: https://pan.quark.cn/s/067a43165790使用说明 python3 FindEverything.py -n .txt,.ini,.yaml,.php,.jsp,.java,.xml,.sql -c "password=" -d D:/ python3 FindEverything.p…

不可不知的WPF几何图形(Geometry)

在软件行业,经常会听到一句话“文不如表,表不如图”说明了图形在软件应用中的重要性。同样在WPF开发中,为了程序美观或者业务需要,经常会用到各种个样的图形。今天以一些简单的小例子,简述WPF开发中几何图形(Geometry)相关内容,仅供学习分享使用,如有不足之处,还请指…

[Spring]MyBatis的执行原理

MyBatis的执行原理详细介绍 为了使大家能够更加清晰的理解MyBatis程序,在正式讲解MyBatis入门案例之前,先来了解一下MyBatis程序的工作原理,如图1所示。 MyBatis的工作原理从图1可以看出,MyBatis框架在操作数据库时,大体经过了8个步骤。下面就对图1中的每一步流程进行详细…

逐月信息学——2024初秋集训——提高组 #22

A. 牛牛的方程式 题目描述 给定一个三元一次方程 \(ax+by+cz=d\),求该方程是否存在整数解。 思路 由于若干个 \(a,b,c\) 只能凑出 \(\gcd (a,b,c)\) 的倍数,所以只需判断 \(d\) 是否为 \(\gcd(a,b,c)\) 的倍数即可。特别的,若 \(a,b,c\) 均为 \(0\),则显然只有 \(d=0\) 时存…

在VScode-SSH中Rust工程不能代码间跳转的原因

今天正常使用VScode-SSH访问虚拟机,但是发现读代码的时候不能使用ctrl+左键的方式跳转,然后看到Rust-Analyzer(VScode的Rust语言插件)报错. 2024-09-08T02:25:28.998500Z ERROR failed to find any projects in [AbsPathBuf("/home/winddevil/App")] 2024-09-08T02:2…