Emmet 缩写语法浏览器 - 编写并预览展开

Emmet 是一种用于快速编写 HTML 和 CSS 的缩写语法，最初名为 Zen Coding。它允许开发者使用类似 CSS 选择器的简洁语法来生成复杂的 HTML 结构，极大提升编码效率。例如，输入 div#page>ul>li.item*5 即可展开为包含5个列表项的完整 HTML 结构。Emmet 已被集成到 VS Code、Sublime Text、WebStorm 等主流编辑器中。

基础语法速查表：
div → <div></div>（元素）
div.class → <div class="class"></div>（类名）
div#id → <div id="id"></div>（ID）
div[title="hello"] → 带属性
div>p → 父子关系
div+p → 兄弟关系
li*5 → 重复5次
li.item$*3 → 编号递增（$=1,2,3）
li.item$$*3 → 编号补零（01,02,03）
div{内容} → 文本内容
(div>span)*3 → 分组重复
div>ul>li^^div → ^向上攀爬一层

$ 在乘法中自动递增。多个 $ 可补零：$$→01, $$$→001。
$@- 表示倒序：li.item$@-*3 → item3, item2, item1。
$@5 从指定数字开始：li.item$@5*3 → item5, item6, item7。
$@-5 从5开始倒序：→ item5, item4, item3。
编号可用于元素名、类名、ID、属性值和文本内容中。

当只写类名或 ID 而不指定标签名时，Emmet 会自动推断标签。例如 .container 展开为 <div class="container"></div>，#header 展开为 <div id="header"></div>。默认隐式标签是 div。在 ul 或 ol 内部，.item 会展开为 <li class="item"></li>。

本工具支持 Emmet 核心语法：元素名、类名（.）、ID（#）、自定义属性（[]）、文本内容（{}）、父子关系（>）、兄弟关系（+）、攀爬操作（^）、乘法重复（*）、自动编号（$ 及格式化）、分组（()）、隐式标签。支持多行输入（每行独立展开）。自闭合标签（如 img、br、input）会自动识别处理。