输入!或html:5按Tab生成HTML5结构，用>、+、^实现嵌套与同级关系，.、#、[]快速添加类、ID和属性，CSS中m10等简写提升样式编写效率。
VSCode中的Emmet功能能极大提升HTML和CSS的编写效率，通过简写形式快速生成完整代码。只要在HTML或支持的语言文件中输入特定缩写，按Tab或Enter就能展开成结构化标签。
基本HTML结构生成
输入!或html:5，然后按Tab，就会自动生成标准的HTML5文档结构：
嵌套与父子关系
使用>表示嵌套（子元素），+表示同级（兄弟元素），^向上跳出一层。
例子：div>ul>li*3 → 生成一个div包含一个ul，里面有3个li header+main+footer → 生成三个并列的块级标签 div>p^span → p在div内，span在div外与div同级
类、ID与属性快速添加
用.定义class，#定义id，[属性=值]添加自定义属性。
乐活途购物分享社区
beta v1.1版本为第一个版本，简单的整合了基础功能，各位站长拿到程序后，不要纠结后台的功能简单，后续将不断更新扩展。在beta v1.1版本使用过程中遇到什么问题，请登录 www.loftto.com 进行反馈！ 安装说明######重要提醒：程序不支持二级目录安装，请使用一级目录或二级目录绑定！#第一步，确定你的服务器支持PHP+mysql。#第二步，确定你的服务器开启了gd库。#第三步，
0 查看详情 常见写法：div.container#myId →
a[href=”#”][title=”link”]{点击} → 带属性和文本内容的链接 input[type=”text”].form-control → 输入框加类名
CSS中的Emmet简写
在CSS文件里也能用Emmet快速写样式。例如输入m10按Tab会变成margin: 10px;。
常用缩写：p10 → padding: 10px; fw → font-weight: bold; posr → position: relative; dib → display: inline-block;
基本上就这些核心用法。Emmet在VSCode中默认开启，不需要额外配置。多练几次常用缩写，写前端代码速度会明显提升。
以上就是VSCode的Emmet功能怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/807097.html
微信扫一扫 
支付宝扫一扫 
