首先创建自定义HTML代码片段，在Sublime Text中通过Tools → Developer → New Snippet…生成模板，替换内容为包含div、img、a等标签的CDATA结构，设置tabTrigger如divc、imgt、ahref，并将文件保存为以.sublime-snippet为扩展名的文件至Packages/User目录；其次配置多个常用片段，如图片标签和锚点链接，分别使用imgt和ahref触发；接着利用$1、$2等占位符实现光标跳转，提升输入效率；最后确保作用域scope设为text.html.basic，使片段仅在HTML文件中生效，避免误触。
如果您希望在编写HTML代码时减少重复劳动、提升开发效率，Mac上的Sublime Text提供了强大的代码片段（Snippet）功能，能够快速插入常用代码结构。以下是创建和使用HTML代码片段的具体步骤：
一、创建自定义HTML代码片段
Sublime Text允许用户通过XML格式定义代码片段，并为其设置触发关键词，以便在编辑器中快速调用。
1、打开Sublime Text，点击菜单栏的Tools → Developer → New Snippet…。
2、系统会生成一个代码片段模板，包含示例内容。将其中的内容替换为以下HTML代码片段结构：
立即学习“前端免费学习笔记（深入）”；
<snippet>
<content><![CDATA[<div class="$1">$2</div>]]></content>
<tabTrigger>divc</tabTrigger>
<scope>text.html.basic</scope>
<description>Div with class</description>
</snippet>
3、将文件保存为div_with_class.sublime-snippet，确保扩展名为.sublime-snippet，并存放在默认的Packages/User目录下。
二、配置多个HTML常用片段
通过创建多个片段，可以覆盖日常开发中的高频标签结构，例如段落、图片、链接等。
1、新建一个片段文件，输入如下内容以快速生成图片标签：
<snippet>
<content><![CDATA[<img src="$1" alt="$2" />]]></content>
<tabTrigger>imgt</tabTrigger>
<scope>text.html.basic</scope>
</snippet>
2、保存为image_tag.sublime-snippet，之后在HTML文件中输入imgt并按下Tab键即可插入图片标签。
3、同理可创建锚点链接片段：
<snippet>
<content><![CDATA[<a href="$1">$2</a>]]></content>
<tabTrigger>ahref</tabTrigger>
<scope>text.html.basic</scope>
</snippet>
三、使用占位符和跳转控制
代码片段支持使用$符号定义光标位置和可编辑区域，提升输入连续性。
1、在CDATA内容中使用$1表示第一个可编辑位置，$2为第二个，依此类推。
2、例如创建一个包含多个字段的表单输入片段：
<snippet>
<content><![CDATA[<input type="$1" name="$2" id="$3" value="$4" />]]></content>
<tabTrigger>inputt</tabTrigger>
<scope>text.html.basic</scope>
</snippet>
3、触发后，按Tab键可在type、name、id、value之间依次跳转。
四、验证语法与作用域范围
确保代码片段仅在HTML文件中生效，需正确设置<scope>字段。
1、对于HTML专用片段，统一使用text.html.basic作为作用域值。
2、若希望片段在多种语言中可用，可设为source或留空，但可能引发误触。
3、可通过菜单View → Syntax → HTML确认当前文件类型是否匹配。
