HTML里的“宏”
内容提要
文章介绍用 HTML 实体和 `<param>` 空元素实现“宏”的技巧：在 XHTML 中通过 DOCTYPE 自定义实体（如 `&my_symbol;`、`&wikipedia;`）复用图标或符号；并利用已废弃的 `<param>` 标签配合 CSS 的 `content: url(...)` 与自定义属性，将厂牌图标写成简短宏，避免重复 `<img>`，还可用 `attr()` 传参。
延伸解读
XHTML 实体宏：复用图标与符号
文章展示了在 XHTML 中通过 DOCTYPE 自定义实体，如 &my_symbol; 和 &wikipedia;，将常用图标或符号定义为实体。这样在文档中多次引用时，只需写实体名，避免重复编写完整的 img 标签或字符。但此方法依赖 XHTML 的实体解析，在 HTML5 中并不适用，且实体定义需在 DOCTYPE 内声明，灵活性有限。
param 空元素：变废为宝的宏技巧
利用已废弃的 <param> 空元素作为宏，配合 CSS 的 content: url(...) 和自定义属性，可以简洁地插入厂牌图标。例如 <param mi> 比 <i class="icon-mi"></i> 更短且无需闭合。由于 param 是 HTML 白名单中的空元素，不会被当作未知元素，校验也不报错。但需注意 param 原本用于 object 传参，已废弃，新项目应谨慎使用。
CSS 实现细节：从 background 到 content
文章对比了多种 CSS 实现方式：早期用 background 和 CSS 变量，但 width: 1em 固定尺寸不够灵活；后来改用 content: url(...)，宽度能按图片比例自动计算，更省事。还可用 attr() 传参，如 <param mi value="手机"> 配合 param::after { content: attr(value) } 显示文本。这些技巧依赖现代 CSS 特性，需考虑浏览器兼容性。
Q&A
如何在 XHTML 中自定义 HTML 实体来复用图标或符号？
在 XHTML 的 DOCTYPE 中定义实体，例如 `<!ENTITY my_symbol "★">` 和 `<!ENTITY wikipedia '<img height="14" src="https://en.wikipedia.org/favicon.ico" alt="Wikipedia" />'>`，然后在文档中使用 `&my_symbol;` 和 `&wikipedia;` 即可插入对应的符号或图标。
为什么用 `<param>` 标签来实现 HTML 宏？
因为 `<param>` 是 HTML 白名单中的空元素（Void Elements），不需要闭合标签，写起来比 `<i class="icon-mi"></i>` 更短，且不会被浏览器当成未知元素，HTML 校验也不报错。
如何用 CSS 让 `<param>` 显示为图标？
通过 CSS 选择器为不同自定义属性的 `<param>` 设置 `content: url(...)`，例如 `param[mi] { content: url("https://www.mi.com/favicon.ico"); }`，并设置 `display: inline; height: 1em; vertical-align: -.125em;` 来调整大小和对齐。
如何给 HTML 宏传递参数？
可以使用 `attr()` 函数，例如 `param::after { content: attr(value) }`，然后写 `<param mi value="手机">`，这样宏就会显示传入的文本值。
除了 `<param>`，还有哪些空元素可以用来做宏？
浏览器白名单中的空元素有 14 个，包括 `<meta>`、`<link>`、`<base>`、`<img>`、`<source>`、`<track>`、`<embed>`、`<br>`、`<wbr>`、`<col>`、`<input>`、`<area>`、`<param>` 等，但 `<param>` 已废弃，适合变废为宝。
用 CSS 的 `content` 属性显示图标比用 `background` 有什么好处？
使用 `content: url(...)` 更省事，宽度会按图片比例自动计算，而 `background` 方式需要固定 `width: 1em` 等尺寸，不够灵活。
