HTML里的“宏”

Posted 2026-10-12 | stdout

摊牌了，分享两个极少有人知道的技巧。

观察下面的网页

https://lab.est.im/xhtml/

有没有发现神奇之处

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html [
  <!ENTITY my_symbol "★">
  <!ENTITY wikipedia '<img height="14" src="https://en.wikipedia.org/favicon.ico" alt="Wikipedia" />'>
]>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Entity test</title>
  </head>
  <body>
    <p>hey &my_symbol; visit &wikipedia; for more!</p>
  </body>
</html>

另外就是刚做的 play2mi 有一个特立独行的想法：不让出现厂牌的关键字，一律用图标代替。

但是这个 <img height="16" src="https://www.mi.com/favicon.ico" /> 出现得次数太多，就很重复了。有没有宏/macro 来节约呢？

浑身不舒服。经过一番激烈拷打AI，最终结果：

div.wrap param {display: inline; height: 1em; vertical-align: -.125em;}
param[mi] { content: url("https://www.mi.com/favicon.ico"); }
param[mijia] { content: url("https://cdn.web-global.fds.api.mi-img.com/mijia/prod/home/favicon.ico") }

<param mi> 是一个自定义属性，写起来比 短，也不需要闭合。

用不存在的自定义标签当然也行，但必须写一对儿 <mi-icon></mi-icon>。为了不闭合偷懒，查到浏览器只白名单了14个空元素（Void Elements）

<meta> 声明页面元数据 <meta charset="UTF-8">
<link> 引入外部资源，常用于 CSS、favicon
<base> 设置页面中相对 URL 的基础地址 <base href="https://example.com/">
<img> 嵌入图片。它是最常用的空元素之一。
<source> 为 <picture>、<audio>、<video> 提供可选媒体源。它通常不能独立发挥作用。
<track> 给视频或音频添加字幕、说明文字、章节等文本轨道。
<embed> 在页面中嵌入外部内容，例如某些 PDF 文档或浏览器支持的嵌入资源。
  强制换行第一行 第二行
 建议浏览器可在此处换行 superlongword
<col> 为表格的一列设置样式或属性 <colclass="numeric">
<input> 创建文本框、复选框、单选框、文件选择器等表单控件。
<area> 在图片映射（image map）中定义一个可点击区域。
<param> 为 <object> 提供参数已废弃，不建议新项目使用

那就变废为宝，拿 <param> 来当宏用，不会被当成未知元素，HTML 校验也不报错。

之前的版本还有 css 变量

param {display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: var(--icon) center / contain no-repeat;}
param[A] { --icon: url("A.jpg"); }
param[B] { --icon: url("B.jpg") }

也有利用 background-image 比 background 优先

param {display: inline-block; padding: .5em; vertical-align: -.125em; background: center / contain no-repeat;}
param[A] { background-image: url(A.jpg) }
param[B] { background-image: url(B.jpg) }

但 width: 1em 这个太死板。现代css有 content: 更省事儿，宽度还会按图片比例自动算。

AI 还教了一招，用 attr() 给宏传参数

param::after { content: attr(value) }

<param mi value="手机"> <param mi value="电视">

有AI真能学到好多东西，以前翻破书都想不到的，就看你肯不肯开口问。

Comments