Emmet: Lorem Ipsum 与隐式标签细节：占位文案生成与隐式规则汇总

前 9 课你学会了 Emmet 的全部 HTML 结构 + 文本 + 编号操作符，已经能写出任意嵌套、任意属性、任意编号、任意文案的 HTML。但还有两个"省字"的杀手锏没用——Lorem Ipsum 自动生成占位文案和隐式标签名的完整规则。前者让你 1 秒生成 30 词 Lorem 文本（不用手敲），后者让你在 ul/table/select 等父元素语境下省去 li/tr/td/option 这些标签名。本课把这两个机制讲透，作为 Phase 3 的收官。

1. 你将学到

• Lorem Ipsum 生成器：lorem 默认 30 词，loremN 指定 N 词
• 多段 Lorem：p*3>lorem 生成 3 个段落，每段独立文案
• 隐式标签名：在 ul/ol/table/tr/select/dl 等父元素语境下自动切换
• 隐式 + class + id：ul>.item → <li class="item">、table>#row1>.cell → <tr id="row1"><td class="cell">
• 隐式规则的边界：父元素不在白名单时仍默认 div（含 snippets.json 自定义概念）

2. 一个前端开发者的真实故事

(1) 痛点：占位文案 + 标签名重复，拖慢开发

Alice 在做博客模板的设计稿还原。她需要展示一个标准的"博客文章页"——标题、作者信息、正文 3 段、侧边栏标签云。但她不知道正文该写什么（设计稿阶段还没真实内容），又不想用乱码填充（看起来不真实）。

她先试着从 lipsum.com 复制 30 词 Lorem Ipsum 文本，粘贴到第一个 <p>。然后第二个 <p> 又复制一份（不一样的内容），粘贴。3 个段落复制了 3 次，浪费了 3 分钟。更糟的是：第二天她又要做同样的事情，再复制一遍——重复劳动。

更要命的是侧边栏的"标签云"——15 个 <a> 链接，每个指向 #tag-design、#tag-css 等。她手敲：

<a href="" id="tag-design">#design</a>
<a href="" id="tag-css">#css</a>
<!-- ... 13 more lines -->

15 行 HTML 花了 5 分钟。

最后是表格部分——5 行 4 列的"数据展示表格"。她想：表格里每行每列都长得一样，能不能只写 class 名（如 .row、.cell）让 Emmet 自动填上 <tr>、<td>？答案是肯定的（第 06 课已经讲过），但她还想要"在 select 里只写 .opt 自动变 <option>"、"在 dl 里只写 .term 自动变 <dt>"——这些场景她还没系统学过。

(2) Lorem + 隐式标签的解法

Emmet 提供两个互补机制解决 Alice 的问题：

Lorem Ipsum 生成器：在简写中写 lorem 或 loremN，Emmet 自动展开为 30 词（或 N 词）的 Lorem Ipsum 文案。Alice 的 3 段正文可以这么写：

article>(p>lorem)*3

3 个 <p>，每个包含 30 词独立 Lorem 文案（不重复）。

隐式标签名完整规则：在特定的父元素语境下，省略标签名时 Emmet 会自动切换为合理的子元素标签——ul/ol 内隐式为 li、table 内隐式为 tr、tr 内隐式为 td、select 内隐式为 option、dl 内隐式为 dt/dd。Alice 的"标签云"可以这么写：

ul.tag-cloud>(li.tag*3>a{#tag-$})

隐式标签让 70% 的标签名都不必重复输入。

Alice 用 Lorem + 隐式标签重写整个博客文章页：

section.blog>(header>h1{博客标题: Emmet 提速 5 倍}+p.meta{作者 Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*3>a{#tag-$}))

Alice 验证之后惊呼："3 段 Lorem 从 3 分钟降到 1 秒，15 个标签链接从 5 分钟降到 3 秒，标签名输入减少 70%。Emmet 在'占位文案 + 语义化标签'场景的提效是 50 倍以上。"

(3) 收益

Lorem Ipsum 和隐式标签规则是 Emmet 的"省字核心"。前者让你跳过"复制粘贴占位文案"步骤，后者让你跳过"重复输入常见标签名"。学完本课，Alice 写 3 段 Lorem 只要 1 秒，15 个标签链接只要 3 秒；同时这一课也是 Phase 3 的收官——下一阶段（Phase 4）将进入 CSS 简写，把 Emmet 的能力从 HTML 扩展到 CSS。

3. Lorem Ipsum 占位文案生成器

Lorem Ipsum 是排版行业的标准占位文案，自 1500 年起就被用于排版演示。Emmet 内置了 Lorem 生成器，可以用 lorem 或 lipsum 作为关键字（功能相同）。

(1) lorem 与 loremN 简写

(2) Lorem 与其他操作符的组合

4. 隐式标签名：完整规则汇总

第 03 课和第 06 课已经讲过隐式标签名的概念。本课系统化整个规则集，并补全所有常见场景。

(1) 隐式标签速查表

(2) 隐式规则常见场景对比

(3) 隐式 + class + id 组合

隐式标签可以与 .class #id [attr] 自由组合：

5. 实战示例

下面 5 个示例覆盖 Lorem 和隐式标签的核心场景——从基础 Lorem 到指定词数，从多段到隐式 + class。

▶ 示例：基础 Lorem p>lorem（难度⭐）

1 个段落，30 词 Lorem Ipsum 文案——设计师最常用的占位符。

缩写：

p>lorem

展开：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>

输出：

TEXT 📖 仅展示

📋 Copy

解析：lorem 是 Emmet 的占位文案生成器关键字。默认输出 30 词（按空格分隔计算）的 Lorem Ipsum 文案。p>lorem 把 lorem 放在 p 内，结果是单段 30 词的占位段落。实际词数因编辑器实现略有差异（VSCode/WebStorm 都用相同的 30 词基础段落）。如果想要其他长度，用 loremN 语法（如 lorem5 = 5 词）。

▶ 示例：指定词数 p>lorem5（难度⭐）

5 词 Lorem——短描述占位（如卡片副标题、按钮提示）。

缩写：

p>lorem5

展开：

<p>Lorem ipsum dolor sit amet.</p>

输出：

TEXT 📖 仅展示

📋 Copy

解析：lorem5 中的 5 是词数参数。Emmet 输出 5 词 Lorem（恰好是 "Lorem ipsum dolor sit amet."——这是 Lorem Ipsum 的前 5 个词）。这个长度适合短描述场景：卡片副标题、按钮提示语、tagline。如果需要更长但比 30 词少，可以用 lorem10、lorem20 等。最大词数没有硬性上限（lorem1000 也能展开），但生成大量文本会减慢编辑器响应。

▶ 示例：多段落 Lorem (p>lorem)*3（难度⭐⭐）

3 个 <p>，每段独立的 30 词 Lorem——博客文章正文占位。

缩写：

(p>lorem)*3

展开（节选）：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>

输出：

TEXT 📖 仅展示

📋 Copy

解析：(p>lorem)*3 让 p>lorem 这个模板重复 3 次，每次生成独立的 30 词 Lorem 文案（Emmet 的 lorem 是生成器而非固定文本）。3 段分别引用 Lorem Ipsum 库中的不同段落，文案不重复。这等价于 p*3>lorem——Emmet 解析 p*3>lorem 时也会让 p 重复 3 次，每次插入独立 lorem。括号的作用是让语义更清晰：在分组内重复 3 次整个段落模板。

▶ 示例：隐式 + class 汇总 ul>.item*3 + table>(.row>.cell*3)*2 + select>option*3（难度⭐⭐）

3 种隐式标签场景对照——1 个示例展示 ul、table、select 三个父元素的隐式规则。

缩写（3 个独立展开）：

ul>.item*3

展开：

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

缩写：

table>(.row>.cell*3)*2

展开：

<table>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

缩写：

select>option*3

展开：

<select name="" id="">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>

输出：

TEXT 📖 仅展示

📋 Copy

解析：三个缩写展示隐式标签的三大主战场。ul>.item*3：ul 是列表父元素，省略标签名时自动推断为 li，3 个 li 共享 class="item"。table>(.row>.cell*3)*2：table 上下文下 .row 隐式为 tr，.cell 隐式为 td，2 行 3 列的表格无需写任何 tr/td。select>option*3：select 上下文下省略标签名时自动推断为 option。注意：select 默认带 name="" 和 id=""（Emmet 预设），option 默认带 value=""——这些是 HTML5 标签的最小化属性。

▶ 示例：表单 + 隐式 form#login>(input[type=text name=user]+input[type=password name=pwd]+button{登录})（难度⭐⭐）

登录表单一行写完——隐式 + class + id + 属性 + 文本填充的组合。

缩写：

form#login>(input[type=text name=user]+input[type=password name=pwd]+button{登录})

展开：

<form id="login" action="">
  <input type="text" name="user">
  <input type="password" name="pwd">
  <button>登录</button>
</form>

输出：

TEXT 📖 仅展示

📋 Copy

解析：本例综合了 Phase 1-3 的全部操作符——# (id)、> (嵌套)、+ (兄弟)、. (class)、[attr] (属性)、{} (文本填充)、() (分组)。form#login 给 form 加 id="login"（form 默认带 action=""）；括号内 3 个兄弟元素：input[type=text name=user]、input[type=password name=pwd]、button{登录}。button 默认无 type 属性（HTML5 button 默认 submit 行为，但显式 type 更清晰）。这是 Phase 3 收官的标准综合，展示了 Emmet 在表单场景的全部能力。

6. 完整示例：博客文章页 + Lorem + 隐式 + 编号

把 Lorem、隐式标签、{text}、$ 编号组合起来——一个完整的"博客文章页"骨架用一行简写写完。

▶ 示例：博客文章页骨架（难度⭐⭐）

缩写：

section.blog>(header>h1{博客标题: Emmet 提速 5 倍}+p.meta{作者 Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*5>a{#tag-$}))

展开：

<section class="blog">
  <header>
    <h1>博客标题: Emmet 提速 5 倍</h1>
    <p class="meta">作者 Alice · 2026-07-30</p>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
    <p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
    <p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
  </article>
  <aside>
    <ul class="tag-cloud">
      <li class="tag"><a href="" id="tag-1">#tag-1</a></li>
      <li class="tag"><a href="" id="tag-2">#tag-2</a></li>
      <li class="tag"><a href="" id="tag-3">#tag-3</a></li>
      <li class="tag"><a href="" id="tag-4">#tag-4</a></li>
      <li class="tag"><a href="" id="tag-5">#tag-5</a></li>
    </ul>
  </aside>
</section>

输出：

TEXT 📖 仅展示

📋 Copy

解析：本例是 Phase 3 收官的完整综合——同时调用了 Lorem 生成器、隐式标签（ul→li）、文本填充 {博客标题: Emmet 提速 5 倍}、编号 $-（tag-1 到 tag-5）。括号嵌套 3 层：外层 (header>...) + (article>...) + (aside>...) 让三块成为 section 的兄弟；内层 (p>lorem)*3 让 article 内有 3 段独立 Lorem；最内层 (li.tag*5>a{#tag-$}) 让每个 li 含 1 个 a，a 的 id 和文本都带 $- 编号。整个博客文章页 HTML 从 30+ 行手写降到 1 行 Emmet 简写。

❓ 常见问题

📖 小节

• lorem 默认 30 词，loremN 指定 N 词（如 p>lorem5 = 5 词 Lorem）
• lorem 是生成器：(p>lorem)*3 展开为 3 段独立文案，可与 {text} + $ 一行组合整个页面
• 隐式标签按父元素自动切换：ul→li、table→tr、tr→td、select→option、dl→dt/dd（非白名单父元素默认仍 div）
• 隐式规则只在"省略标签名"时生效；显式写标签名永远优先
• 隐式 + class/id：ul>.item → <li class="item">、table>#row1>.cell → <tr id="row1"><td class="cell">

📝 作业

1. 基础题（难度⭐）：用一行 Emmet 简写分别展开为：(a) 一个段落 p>lorem（30 词 Lorem）；(b) 一个 8 词段落 p>lorem8；(c) 一个下拉框 select>option*5（5 个 option，验证隐式）。
2. 进阶题（难度⭐⭐）：写一个"卡片网格"——一个 section 内含 6 张卡片，每张卡片有标题、3 词描述、按钮。要求：(a) 描述用 lorem3 生成；(b) 标题用 {Card $} 文本填充 + 编号；(c) 按钮用隐式标签 + {详情}。完全用一行 Emmet 简写，并解释为什么 lorem3 和 {Card $} 不会互相干扰。
3. 挑战题（难度⭐⭐⭐）：编写一个完整的"博客首页"骨架，包含：(a) header 含 logo + 3 个导航链接（用 nav>ul>li*3>a{导航 $}）；(b) main 内 3 篇文章卡片，每篇文章有标题、作者、3 段 Lorem；(c) aside 含标签云（5 个标签，用 ul.tag-cloud>li.tag*5>a{#tag-$}）；(d) footer 含版权信息 {© 2026 web-tutorial.com}。全部用一行 Emmet 简写（可以用 + 连接各块，或用括号分组），验证展开结果，并对比手写 HTML 50+ 行 vs 一行 Emmet 简写的时间差异。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们