Sublime Text 中输入 ! 并按 Tab 可快速生成 HTML5 基础结构，含 DOCTYPE、html、head（含 UTF-8 meta）和 body；div.container>ul>li*3 等缩写支持嵌套与重复，但需确保文件类型为 HTML 且无多余空格。
Sublime Text 用 Emmet 写 HTML，根本不用手动敲 这套 boilerplate —— 只要输入 ! 再按 Tab，立刻生成完整基础结构。
输入 ! 就能生成标准 HTML5 文档结构
这是 Emmet 最常用也最容易被忽略的快捷入口。不是 html:5（旧写法），也不是 html，就是单独一个叹号 !。
- 光标定位在空行，输入
!，按Tab（或Ctrl+E，取决于你的键位设置） - 会自动展开为包含
、<code>、（含<meta charset="UTF-8">）、的完整结构 - 如果当前文件已关联为 HTML 类型（右下角显示
HTML），Emmet 才会生效；否则先按Ctrl+Shift+P→ 输入Set Syntax: HTML
用 div.container>ul>li*3 一次性写出嵌套列表
Emmet 的核心是「缩写语法」，不是模板拼接。符号含义固定：> 表示子元素，* 表示重复，. 表示 class，# 表示 id。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
div.container>ul>li*3→ 展开后是带 class 的三层嵌套，li恰好生成 3 个 -
section#main>p.text$*2→$是序号变量，生成<p class="text1"></p>和<p class="text2"></p> - 别手抖多打空格：
div .container（中间有空格）会被当成两个独立标签，不会加 class - 如果展开失败，大概率是当前作用域没启用 Emmet —— 检查是否在 HTML 或 JSX 文件中，且未被其他插件禁用
Emmet 默认不支持自定义标签或 Vue/Svelte 语法
Emmet 内置规则只覆盖标准 HTML 标签和常见属性。像 <mycomponent></mycomponent> 或 <template></template> 这类非 HTML 标准标签，原生不识别。
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件里写
template>div，需要先确保文件类型设为Vue Component，并安装Emmet for Vue类扩展（纯 Sublime 自带 Emmet 不处理<template></template>） - 想让
btn展开成<button class="btn"></button>？得手动编辑Preferences → Package Settings → Emmet → Settings – User，添加"abbreviations"自定义映射 - JSX 中
div.my-class能用，但div.my-class{hello}（花括号插值）不会渲染成className属性 —— Emmet 不做运行时转换
真正卡住人的往往不是语法记不住，而是文件类型没切对、缩写中间多了空格、或者以为 Emmet 能智能猜框架。它只是高效文本展开器，不是 AI 代码生成器。
