VS Code 快速输入代码

news/2024/10/5 3:18:24

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.ryyt.cn/news/57915.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序开发系列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] 虚表与虚指针的理解

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

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

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

[网鼎杯 2020 朱雀组]phpweb

仔细地话可以看到这题每个一段时间就会刷新一次页面,而且后面还会有一个时间,就很可疑,抓个包试试果然多了几个参数func=date&p=Y-m-d+h%3Ai%3As+a 经过搜索 发现这是一个函数(用来显示时间,也就证实了前面地图片为什么会出现时间地原因) 于是试着就修改函数和参数来…

【漏洞分享】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)相关内容,仅供学习分享使用,如有不足之处,还请指…