Emmet：通过缩写快速生成 Html 和 Css 代码的扩展工具

示例编辑器：visual studio code (Vscode)

官网下载地址：https://code.visualstudio.com/

在vscode中，Emmet工具是作为内置功能存在的，这导致没有单独的开关选项来启用或禁用它，但默认情况下是启用的，在编辑HTML 和 css 或其他支持文件类型是会自动生效。

Emmet官方文档：https://docs.emmet.io/

        单个标签：输入字母 自动生成标签

        同级标签：标签名 + 标签名

        父子级标签：标签名 > 标签名

        多个相同标签使用：标签名 * 个数

         带有内容标签：标签名{内容}

         标签和类名：标签名.类名

         标签和id ：标签#id

Emmet的所有简写都可以混用 

测试

可以看出 Emmet的缩写语法被设计成类似于Css选择的写法，并不难掌握，并且可以随意组合，下面在介绍两种不常用的缩写方式。

         分组：（）  将某个节点完成更复杂的写法

        项目编号：$  代表数字，自增

 具体详情信息和更多缩写方式请前往官网

 采自官网的原话  “ 对于CSS语法，Emmet有很多预定义的属性片段。例如，您可以展开缩写以获取代码段。但是，您不仅想要属性，还希望为此属性指定一个值 ”

简单的来说代码提示器只能快速写出属性，并不能直接写出属性值，因此Emmet完美的解决了这个问题

 css属性名大多简写形式都为首字母

background-image

有时因为属性名简写首字母可能造成重复，

如  background-size 简写为 bs，可能首提示为 border-style

因此可以多写单词首字母，background-size 简写为 bgs

属性值为数值时：简写属性名数值

属性值为单词时：简写属性名:属性值

 实际操作中，单词也基本只需打出首字母即可

        简单来说，代码提示（Code IntelliSense）和 Emmet 是两个不同但可以相互配合的功能。

        代码提示它可以根据你正在编写的代码和上下文，提供关于代码补全、函数签名、方法参数、属性等方面的建议和提示。能够帮助你更快速地编写代码，减少拼写错误，提供有关代码库和框架的相关信息。

        Emmet 则是一个独立的工具，用于快速编写 HTML 和 CSS 代码。率。

        在 Visual Studio Code 中，Emmet 和代码提示可以协同工作。当你在编辑 HTML 或 CSS 代码时，Emmet 可以通过代码提示的方式在编辑器中提供 Emmet 缩写的建议和补全。这意味着，当你输入 Emmet 缩写的一部分时，VS Code 将显示相关的 Emmet 提示，帮助你快速选择并生成代码。

        所以说，通过结合代码提示和 Emmet，可以更高效地编写 HTML 和 CSS 代码，减少手动输入的工作量，并快速生成常见代码结构和属性。

以上仅为个人理解，欢迎大家指出错误或说出其他想法