【VS Code】使用Emmet插件编写HTML/CSS代码的快捷技巧

最新推荐文章于 2024-10-08 17:19:17 发布

原创

最新推荐文章于 2024-10-08 17:19:17 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

这篇文章属于本人参考诸多博客、教程、文档等资料，所撰写的「Windows10上配置VS Code」系列文章之一，内容随时可能发生更新变动，欢迎关注和收藏VS Code系列配置总目录一文以作备忘。

很多时候，在书写前端代码时，尤其是HTML时效率十分低下，因为存在很多尖括号、很多标签需要闭合。于是 Emmet 应运而生，它提供了一种简练的语法规则，能够用来生成对应的HTML结构和CSS代码，此外它还有多种实用的功能，掌握它的使用可以大幅提高前端开发的效率。

本文只会略微介绍编写HTML代码时的快捷技巧，更多更丰富的功能见Emmet的文档。

1. HTML语法规则总结

(1) 元素 `Elements`

可以使用元素的名称如 div, p 来生成HTML标签对。对于Emmet来说，只要知道元素的缩写，就会自动转换为对应标签：

html        <html></html>
html:5      和!一样生成HTML5标准、空body的基本dom
html:xml    <html xmlns="http://www.w3.org/1999/xhtml"></html>

a:mail      <a href="mailto:"></a>
a:link      <a href="http://"></a>

base        <base href="">
br          <br>

link        <link rel="stylesheet" href="">
script      <script></script>
script:src  <script src=""></script>

div         <div></div>
foo         <footer></footer>
label       <label for=""></label>

input       <input type="text">
inp         <input type="text" name="" id="">
input:btn   <input type="button" value="">
input:email <input type="email" name="" id="">
input:pas   <input type="password" name="" id="">
input:check <input type="checkbox" name="" id="