Sublime怎么快速生成HTML标签_Sublime Emmet缩写语法速查表

Emmet插件通过缩写提升HTML编码效率，输入如html:5、div.header、ul>li*3等缩写后按Tab键即可生成完整代码，支持类名、ID、属性、嵌套、重复及文本插入，熟练使用可极大加快结构编写速度。

在 Sublime Text 中快速生成 HTML 标签，主要依赖于 Emmet 插件。它能将简短的缩写语法转换为完整的 HTML 结构，极大提升编码效率。Sublime Text 默认已集成 Emmet（原名为 Zen Coding），只需掌握常用语法即可高效编写代码。

基础标签生成

输入缩写后按 Tab 键即可展开为完整标签：

• html:5 → 生成 HTML5 文档结构
• div → <div></div>
• p → <p></p>
• ul>li*3 → 生成包含 3 个列表项的无序列表

添加类名、ID 和属性

使用 .、# 和 [] 快速添加 class、id 和自定义属性：

• div.header → <div class="header"></div>
• nav#main-menu → <nav id="main-menu"></nav>
• a[href="#"][title="链接"] → 带多个属性的链接标签
• input.text#name[type="text"][placeholder="姓名"] → 复合结构输入框

嵌套与重复结构

用 >、+、* 构建复杂结构：

讯飞绘文

讯飞绘文：免费AI写作/AI生成文章

118

查看详情

立即学习“前端免费学习笔记（深入）”；

• div>p → div 包含 p 标签
• h1+p+ul → 三个同级元素依次排列
• ul>li.item*3 → 生成 3 个带 class 的列表项
• section>article.post*2>h2.title+p → 多层嵌套结构

文本与自动编号

使用 {} 插入文本，$ 实现自动编号：

• p{这是段落} → <p>这是段落</p>
• li.item$*3 → 生成 item1、item2、item3 的 class 名
• h2{章节 $}*3 → 生成“章节 1”到“章节 3”

常用快捷缩写示例

• ! 或 html:5 → 完整 HTML5 模板
• link:css → 引入 CSS 文件
• script:src → 带 src 的 script 标签
• img[src alt] → 图片标签（自动补全常用属性）
• table>tr*2>td*3 → 2 行 3 列表格结构

熟练使用 Emmet 缩写，能让你在 Sublime 中几秒写出原本需要几分钟的 HTML 结构。基本上就这些常用规则，多练几次就能形成肌肉记忆。

以上就是Sublime怎么快速生成HTML标签_Sublime Emmet缩写语法速查表的详细内容，更多请关注php中文网其它相关文章！