快速生成代码：Emmet使用技巧

1、快速生成多行代码

以下是 Emmet 在 Visual Studio Code 中的一些使用技巧：

基本缩写：

ul>li*5：这将生成一个包含5个列表项的无序列表。

div+p+bq：这将生成一个 <div> 元素，后面跟着一个 <p> 元素和一个 <blockquote> 元素。

a{Click me}：这将生成一个带有“Click me”文本的锚点标签。

嵌套缩写：

nav>ul>li>a：这将生成一个导航结构，其中包含一个无序列表，列表项中包含锚点标签。

属性操作：

a[href="#"]：这将生成一个带有 href 属性的锚点标签，属性值为 #。

input[type="text"]：这将生成一个类型为文本的输入框。

编号：

ul>li.item$*5：这将生成一个包含5个列表项的无序列表，每个列表项都有一个类名，从 item1 到 item5。

分组：

div>(header>ul>li*2>a)+footer>p：这将生成一个 <div>，包含一个带有2个列表项的 <header> 和一个包含 <p> 的 <footer>。

隐式标签：

.class：这等同于 <div class="class"></div>，因为 div 是默认的标签。

em>.class：这等同于 <em><span class="class"></span></em>，因为 span 是默认的嵌套标签。

自定义缩写：

你可以在编辑器的设置中添加自定义的缩写，以便快速生成常用的代码片段。

使用Tab键展开缩写：

在输入完Emmet缩写后，按下Tab键，Emmet会自动将缩写展开为完整的HTML代码。

交互式缩写：

在 Visual Studio Code 中，Emmet 提供了一个交互式的方式来自动完成缩写。只需输入缩写，然后按 Ctrl+Enter（或Mac上的Cmd+Enter），Emmet 会显示一个列表，你可以从中选择一个选项来展开缩写。

使用多个编辑器：

你可以在多个编辑器实例中打开不同的文件，并使用Emmet来快速生成代码。

利用Snippets：

Visual Studio Code 允许你创建自己的代码片段，你可以将Emmet缩写作为代码片段使用，通过快捷键快速插入。

2、乱数假文

Emmet 提供了一个快速生成乱数假文（Lorem Ipsum）的功能，这对于原型设计和测试布局非常有用。在 Visual Studio Code 或其他支持 Emmet 的编辑器中，你可以使用特定的缩写来生成乱数假文。

以下是一些常用的乱数假文相关的 Emmet 缩写：

lorem：生成一段标准的乱数假文文本。

lorem5：生成包含5个乱数假文句子的段落。

lorem10：生成包含10个乱数假文句子的段落。

p>lorem3：生成一个包含3个乱数假文句子的段落。

ul>li*5>lorem2：生成一个包含5个列表项的无序列表，每个列表项包含2个乱数假文句子。

要使用这些缩写，你只需在编辑器中输入缩写，然后按下 Tab 键（或其他你设置的展开缩写的键），Emmet 就会自动将缩写展开为乱数假文文本。

例如，如果你想在 HTML 文件中插入一段乱数假文，你可以这样做：

打开你的 HTML 文件。

输入 p>lorem。

按下 Tab 键。

这样就会生成一个 <p> 标签，里面包含一段乱数假文文本。