最高效方式是使用Emmet插件,通过.添加class、#添加id,如div.header生成带class的标签,支持在已有标签内输入后按Tab补全,大幅提升HTML编写效率。

在 Sublime Text 中快速为 HTML 标签添加 class 或 id,最高效的方式是使用 Emmet 插件。它内置了常用语法缩写,能极大提升编码效率。
快速添加 class 和 id 的 Emmet 语法
Emmet 使用类似 CSS 选择器的写法来生成 HTML 标签:-
添加 class:用
.表示 class,例如输入div.header,按 Tab 会生成: -
添加 id:用
#表示 id,例如输入div#main,按 Tab 生成: -
同时添加 class 和 id:可以连写,如
div#content.main-section,生成:
在已有标签上添加 class 或 id
如果已经写好一个标签,想快速加属性,可以这样做:- 将光标放在开始标签内(如 )
- 直接输入
.classname或#idname- 按 Tab,Emmet 会自动补全到 class 或 id 属性中
- 多个 class 可以连续输入
.a.b.c,生成class="a b c"其他常用 Emmet 缩写示例
-
ul>li*3→ 生成包含 3 个 li 的 ul 列表 -
a[href="#"]{点击这里}→ 生成带链接和文本的 a 标签 -
input:text→ 快速生成 text 类型的 input -
p.my-class$*2→ 生成两个 p 标签,class 分别为 my-class1 和 my-class2
基本上就这些,熟练掌握后写 HTML 结构速度会明显提升。Sublime 默认支持 Emmet,无需额外安装插件(部分版本可能需要手动启用或通过 Package Control 安装 Emmet 插件)。不复杂但容易忽略的是,所有操作都依赖按 Tab 键触发展开。
- 直接输入










