Logo

菜单

发布于 2026-01-06 3 阅读
0

VS Code 中的 HTML 快捷键

VS Code 中的 HTML 快捷键

快速编码

要成为一名高效的开发者，有时需要我们花点时间学习一些快捷方式。Emmet 正好能帮到我们。Emmet 是 VS Code 自带的一个插件，它为在 .html 文件中编写代码时提供 HTML 的简写符号。

快捷功能包括：

注意：要接受 Emmet 快捷键，请按“Tab”或“Enter”键。要跳过所有建议，请按“Esc”键，或者添加一个空格即可删除列表。

HTML页面模板

要添加新的页面样板代码，请插入：

!
Enter fullscreen mode Exit fullscreen mode

然后输入即可获得：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

元素

输入任意元素标签名称

h1
Enter fullscreen mode Exit fullscreen mode

获取结束标签和开始标签

<h1></h1>
Enter fullscreen mode Exit fullscreen mode

同级元素

使用 +

header+footer
Enter fullscreen mode Exit fullscreen mode

要在同一级别添加元素

<header></header>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode

子元素

使用 >

    header>nav
Enter fullscreen mode Exit fullscreen mode

要添加嵌套元素

    <header>
        <nav></nav>
    </header>
Enter fullscreen mode Exit fullscreen mode

分组

使用 （）

    header+(main>section)+footer
Enter fullscreen mode Exit fullscreen mode

对元素进行分组

    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>
Enter fullscreen mode Exit fullscreen mode

向上攀登

使用 ^ 键可以转义嵌套层级。

    header+main>section^footer
Enter fullscreen mode Exit fullscreen mode

为了摆脱某种程度的嵌套

    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>
Enter fullscreen mode Exit fullscreen mode

多个元素

使用 *

    ul>li*4
Enter fullscreen mode Exit fullscreen mode

要增加元素的数量

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
Enter fullscreen mode Exit fullscreen mode

类别和ID

使用 。

    nav.my-nav
Enter fullscreen mode Exit fullscreen mode

添加类

<nav class="my-nav"></nav>
Enter fullscreen mode Exit fullscreen mode

和 ＃

nav#my-id
Enter fullscreen mode Exit fullscreen mode

添加 ID

<nav id="my-id"></nav>
Enter fullscreen mode Exit fullscreen mode

添加文本

使用 {}

button{Click Me}
Enter fullscreen mode Exit fullscreen mode

在标签之间添加文本

<button>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

自定义属性

使用 []

button[data-id=btn-id]
Enter fullscreen mode Exit fullscreen mode

要在标签内添加自定义属性

<button data-id="btn-id"></button>
Enter fullscreen mode Exit fullscreen mode

编号

使用 $

ul>li*3#my-item${I'm number $}
Enter fullscreen mode Exit fullscreen mode

为元素添加编号

<ul>
    <li id="my-item1">I'm number 1</li>
    <li id="my-item2">I'm number 2</li>
    <li id="my-item3">I'm number 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

标签属性

使用 ：

script:src
Enter fullscreen mode Exit fullscreen mode

添加属性

<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

占位符文本

使用 ：

lorem6*3
Enter fullscreen mode Exit fullscreen mode

添加示例文本块

Lorem ipsum dolor sit amet consectetur.
Expedita quasi aspernatur velit commodi repellendus?
Voluptas voluptatibus numquam et nam ratione.
Enter fullscreen mode Exit fullscreen mode

请观看视频了解更多说明，并查看“Emmet 速查表”了解更多示例。

一定要开始使用快捷键来加快你的编码速度！

文章来源：https://dev.to/peta_s/html-shortcuts-in-vs-code-35nf
测试 React 上下文提供程序
如何调试在 Docker 容器中运...