如何使用 Emmet 快捷方式提高开发效率

前端开发是一个高度依赖效率的领域，开发者们常常需要处理大量的 HTML 和 CSS 代码。为了解决重复工作和提高开发效率，Emmet 快捷方式应运而生。Emmet 作为一款强大的前端工具，能够通过简化的快捷命令快速生成 HTML 和 CSS 结构，极大地提升了开发者的编码速度。本文将介绍如何在日常开发中使用 Emmet，帮助你节省宝贵的时间。

什么是 Emmet 快捷方式？

Emmet 是一款广泛应用于前端开发的插件，它通过一系列简短的命令来快速生成 HTML 和 CSS 代码。无论你是在 Visual Studio Code、Sublime Text 还是 Atom 等编辑器中工作，Emmet 都能为你提供极大的便利。你只需输入简短的快捷命令，Emmet 会自动生成对应的 HTML 或 CSS 代码，让你专注于编写页面内容，而不必纠结于繁琐的结构和格式。

常见的 Emmet 快捷命令

在日常开发中，有一些 Emmet 快捷命令是最常用的。掌握这些命令后，你将能够大幅提升你的编码效率。以下是一些常见的 Emmet 命令：

html:5：生成一个基本的 HTML5 模板。
div.container>ul>li*5：生成一个包含 5 个列表项的无序列表，并将其包裹在一个类名为 container 的 div 中。
ul>li.item$*3：生成一个包含 3 个列表项的无序列表，并为每个列表项添加递增的编号（item1，item2，item3）。
a.href：生成一个超链接标签，并自动添加 href 属性。

掌握这些命令，意味着你可以避免重复手动编写 HTML 结构，大大提高工作效率。

Emmet 快捷方式：

1. 基本标签

div → <div></div>
p → <p></p>
a → <a></a>
img → <img />
ul>li*5 → <ul><li></li><li></li><li></li><li></li><li></li></ul>（生成一个包含 5 个 li 项的 ul 列表）

2. 类名和 ID

div.classname → <div class="classname"></div>
div#idname → <div id="idname"></div>
div.class1.class2 → <div class="class1 class2"></div>
div.class$*3 → <div class="class1"></div><div class="class2"></div><div class="class3"></div>（生成带有递增数字的类名）

3. 属性

input[type="text"] → <input type="text" />
a[href="http://example.com"] → <a href="http://example.com"></a>
img[src="image.jpg" alt="Image"] → <img src="image.jpg" alt="Image" />
input[checked] → <input checked />（默认选中的复选框）

4. 递增数字

div.item$*5 → <div class="item1"></div><div class="item2"></div><div class="item3"></div><div class="item4"></div><div class="item5"></div>（创建带递增序号的类名）
ul>li*5 → <ul><li></li><li></li><li></li><li></li><li></li></ul>（创建包含递增数字的列表）

5. 子元素和嵌套

div>ul>li*3 → <div><ul><li></li><li></li><li></li></ul></div>
div>ul>li*3>span → <div><ul><li><span></span></li><li><span></span></li><li><span></span></li></ul></div>
table>tr*3>td*3 → 创建一个有 3 行 3 列的表格

6. 文本内容

div{Hello, World!} → <div>Hello, World!</div>
ul>li*3{Item $} → <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>（生成带递增文本的列表）

7. HTML 注释

!-- Comment --> →

8. HTML5 Doctype 和其他元素

! → <!DOCTYPE html>
html:5 → 生成 HTML5 基础结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> </body> </html>

9. CSS 快捷方式

m10 → margin: 10px;
p20 → padding: 20px;
w100 → width: 100%;
bgc#f00 → background-color: #f00;
d+ → display: flex;（快速生成 display 属性）

10. 其他常用功能

div>ul>li.item$*3 → <div><ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul></div>
ul>li*3{Item $} → <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

使用方法：

输入 Emmet 简写。
按下 Tab 键，VSCode 会自动展开为完整的 HTML 结构。

如何在实际项目中使用 Emmet？

在实际的开发项目中，Emmet 的快捷方式可以帮助你减少大量的重复劳动。例如，在创建网页布局时，你只需要输入类似 div.container>header+main+footer 的命令，Emmet 就会自动生成一个包含 header、main 和 footer 的 HTML 结构。

这样，你可以节省大量时间，不必手动书写复杂的 HTML 标签和层级结构。你只需要关心页面的内容和样式，Emmet 会帮助你快速搭建起网页的框架。

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet 快捷方式介绍</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <main>
            <article>
                <header>
                    <h1>如何使用 Emmet 快捷方式提高开发效率</h1>
                    <p>发布于 2025年1月20日 | 分类: 前端开发</p>
                </header>
                <section>
                    <h2>什么是 Emmet 快捷方式？</h2>
                    <p>Emmet 是一款用于前端开发的强大插件，帮助开发者通过简化的快捷方式来生成 HTML 和 CSS 代码。Emmet 可以在各种编辑器中使用，例如 Visual Studio Code、Sublime Text 和 Atom，极大地提高了开发效率。</p>
                </section>

                <section>
                    <h2>常见的 Emmet 快捷命令</h2>
                    <ul>
                        <li><strong>html:5</strong>：生成一个基本的 HTML5 模板。</li>
                        <li><strong>div.container>ul>li*5</strong>：生成一个包含 5 个列表项的无序列表，外面包裹一个类名为 container 的 div。</li>
                        <li><strong>ul>li.item$*3</strong>：生成一个包含 3 个列表项且每个列表项有不同编号的无序列表。</li>
                        <li><strong>a.href</strong>：生成一个超链接标签，并自动添加 href 属性。</li>
                    </ul>
                </section>

                <section>
                    <h2>如何在实际项目中使用 Emmet？</h2>
                    <p>在实际开发中，Emmet 帮助我们减少了手动编写重复代码的工作，提升了编码效率。例如，在创建网页布局时，你只需输入 `div.container>header+main+footer`，Emmet 会自动生成包含 header、main 和 footer 的 HTML 结构。这样你可以集中精力处理页面内容，而不必浪费时间在繁琐的 HTML 结构书写上。</p>
                </section>

                <section>
                    <h2>更多 Emmet 示例</h2>
                    <pre>
div.container>section>article*3>h2+ul>li*5
                    </pre>
                    <p>上述命令会生成一个包含 3 个文章（article）的 section，每个 article 包含一个 h2 标题和一个包含 5 个列表项的无序列表。</p>
                    <p>这样，通过简单的命令，我们就能在几秒钟内完成复杂的 HTML 结构。</p>
                </section>
            </article>

            <aside>
                <h3>最近文章</h3>
                <ul>
                    <li><a href="#">如何提高前端开发效率</a></li>
                    <li><a href="#">CSS Flexbox 简介</a></li>
                    <li><a href="#">响应式设计最佳实践</a></li>
                </ul>

                <h3>标签</h3>
                <ul>
                    <li><a href="#">Emmet</a></li>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">HTML</a></li>
                </ul>
            </aside>
        </main>
    </div>

    <footer>
        <p>© 2025 我的博客. 版权所有.</p>
    </footer>
</body>
</html>