#3 将 HTML 内容编码到一个 Favicon 图标中

Web HTML 2026-06-27

我曾经有过一个实验，将文件编码存储到一个图片中。
没有想到还有人想到将网站内容存入一个 Favicon，然后通过 JS 解析出来，有意思。
虽然想不到什么实际意义，但是是一次有趣的探索实验。

Tim Wehrle 的文章《I Stored a Website in a Favicon》是这样说的：
PS：代码放在 GitHub 上。

  1. 编码过程：将 HTML 文本转为 UTF-8 字节数组 → 前置 4 字节记录载荷长度（便于截断尾部无用像素）→ 依次写入 PNG 像素的 R/G/B 通道（每像素存 3 字节），生成的图像看似随机噪点。

    <style>
    body {
        font-family: system-ui;
        max-width: 40rem;
        margin: 2rem auto;
    }
</style>
<h1>Website in a Favicon</h1>
<p>Everything you're reading right now was decoded from favicon pixels.</p>

    HTML 载荷：208 字节 + 4 字节长度头 = 212 字节
    Favicon 部分：选择 9×9 正方形，81 像素，可以容纳 239 字节数据，Cover 上面的 HTML 负载（利用率约 87%）

  2. 解码过程：浏览器加载 favicon → 用 Canvas API 绘制并读取像素 RGB 值 → 还原字节数组 → 读取前 4 字节获知长度 → 提取载荷 → UTF-8 解码得到原 HTML → 替换页面内容渲染。

  3. 关键限制：favicon 只存内容，仍需一小段外部 JavaScript（bootstrap loader）来解码，无 JS 时它只是一张普通 PNG。

#2 网页对电话号码的处理

Web HTML 2026-06-23

页面上加链接可以点击触发拨号 <a href="tel:+8613800138000">138****8000</a>，这个各浏览器都支持。

不同的是，iOS Safari 自动识别电话号码并注入拨号连接，而 Android Chrome 则没有这个行为。

在 iOS Safari 会自动扫描页面中的数字串（比如订单号、序列号、IP 地址），只要格式“看起来像电话”，就会偷偷把它们转换成可点击的拨号链接：

<a href="tel:1234567890">1234567890</a>

这会导致样式错乱，甚至误触拨号。

解决方案：

  • 全局关闭自动识别：

    <meta name="format-detection" content="telephone=no" />

    注意：这是 Apple 私有的规范，并非 W3C 标准。

  • 真正需要拨号的地方，手动声明：

    <a href="tel:+8613800138000">138****8000</a>

#1 HTML 总结

HTML 2021-08-21

HTML5 的一个重要变化是彻底放弃 XML 化路线，也就是所谓的 “no logger based on SGML”，事实上 HTML5 就是因为浏览器厂商和 W3C 之间存在是否应该 XML 化这个分歧才诞生出来的。最终厂商联盟 WHATWG 获胜，取得了标准制定方面的绝对话语权（W3C 设计的 XHTML2 胎死腹中），其他的功能上的大跨度变化（除了本身的功能增加之外，对外设备连通性，性能）都只能算是副产品。

我们常说的 H5 实际上是 HTML5 + CSS3, JS 一般好像没有要求，应该还是默认 ES5, 不过现在 ES6 目前也已经在主流浏览器上得到了很好的支持。

黄色：废弃
绿色：新增
红色：非标准

标签

基础框架

  1. <!DOCTYPE>
  2. <!-- -->
  3. html
  4. head
  5. body
  6. title
  7. meta
  8. base
  9. basefont
  10. style
  11. link

文档结构

  1. p
  2. h1 ... h6
  3. ul, ol, li
  4. dl, dt, dd
  5. dir 使用 ul 替代
  6. span
  7. div
  8. table, tr, td, th, thead, tbody, tfoot, col, colgroup, caption
  9. a

样式/排版

  1. abbr, acronym 简写
  2. bdo 文字书写方向
  3. b, strong
  4. big, small
  5. center
  6. font
  7. i 斜体
  8. s, stike 中划线
  9. u 下划线
  10. del, ins 删除、插入，默认就是加上中划线和下划线
  11. em 强调
  12. dfn 术语
  13. q, blockquote, cite 引用
  14. address
  15. var 变量
  16. samp 样本
  17. kbd
  18. br
  19. hr
  20. sub, sup
  21. ruby, rt, rp
  22. pre, code

图片/视频/音频

  1. img
  2. map
  3. area
  4. canvas
  5. figcaption
  6. figure
  7. piture
  8. svg
  9. audio
  10. video
  11. source
  12. track

表单

  1. form
  2. input
  3. select
  4. textarea
  5. button
  6. option, optgroup
  7. label
  8. legend
  9. datalist 配合 input 使用
  10. output

Frame

  1. frame
  2. frameset
  3. noframes
  4. iframe

程序

  1. script
  2. noscript
  3. embed 可能是 v4 没有纳入标准
  4. object
  5. param
  6. applet

语义标签

  1. main
  2. header
  3. footer
  4. nav
  5. article
  6. aside
  7. section
  8. details
  9. dialog
  10. menu
  11. menuitem 火狐
  12. summary

Web Components

Custom Elements
H5 特性。

新的 API

  1. SVG
  2. Canvas
  3. 音频/视频
  4. WebRTC
  5. 本地存储
  6. WebStorage: LocalStorage + SessionStorage
  7. IndexedDB
  8. WebSQL
    PS: WebSQL 相关规范已经冻结，所以现在不属于 HTML5 标准，只有 Safari 和 Chrome 系浏览器支持。
    火狐全力支持 IndexedDB，认为一项标准不应该依赖一个具体的实现（SQLite），而且对于在网页端执行 SQL 非常不看好。
  9. WebAssembly
    这同样不属于 HTML5 的范畴，不过也是一项重要的标准，可能对 Web 开发产生很大的影响。
  10. WebSockets
  11. Server-Sent Event
  12. 2D/3D (WebGL)
  13. XMLHttpRequest Level 2

参考资料与拓展阅读