工程师html5

写于一个加班调兼容性的深夜，窗外有猫在叫。工程

上周三，工程我盯着 Chrome DevTools 里一个 position: sticky 在 Safari 上完全失效的工程 bug，顺手翻开了项目里那个 2017 年写的工程 index.html。整个文件只有一行 <!DOCTYPE html>，工程然后就是工程满屏的 <div id="app"></div>，剩下的工程全塞在 bundle.js 里。那一刻我意识到，工程很多工程师对 HTML5 的工程理解，其实停留在“就是工程那个 <!DOCTYPE html> 呗”——但真不是。

HTML5 是工程一套规范，不是工程某个标签的集合。它定义了浏览器怎么解析错误、工程怎么处理视频、工程怎么暴露 API 给 JavaScript。你写 <video> 能播 MP4，不是因为浏览器“认识”这个标签，而是因为 HTML5 规范里规定了媒体元素的资源选择算法。工程师用 HTML5，本质上是在跟一套解析规则和 DOM 接口打交道。我见过有人用 <canvas> 画了几万条折线，帧率掉到 12，却不知道 OffscreenCanvas 和 requestAnimationFrame 怎么配合——这不是 HTML5 的锅，是没读规范。

另一个经常被忽略的点：HTML5 的语义化标签不是给开发者自嗨用的。<article>、<section>、<nav> 这些东西，屏幕阅读器会读，搜索引擎会抓，甚至浏览器默认样式表里都给了不同的 display 值。我维护过一个电商详情页，原来全是 <div class="nav">，后来改成 <nav> 加 aria-label，无障碍评分从 62 跳到 89。成本？改标签而已。但很多工程师觉得“反正视觉一样”，就懒得动。这挺可惜的。

还有 localStorage 和 sessionStorage。很多工程师拿它当 cookie 用，存 token、存用户偏好，然后发现 5MB 不够用，或者隐私模式下直接抛异常。HTML5 的 Web Storage 规范写得很清楚：它是同步的，按源隔离，不参与 HTTP 请求。我见过一个后台系统把整个表格数据塞进 localStorage，结果用户清缓存后页面白屏。这不是存储的错，是没想清楚数据生命周期。

说到 API，history.pushState 和 replaceState 是 HTML5 给前端路由的礼物。但有个坑：你 push 了状态，用户刷新页面，服务器得能返回同一个 HTML。我见过 SPA 部署到静态服务器，路由用 history 模式，结果用户直接访问 /user/123 就 404。工程师骂服务器，服务器说“你倒是配 fallback 啊”。最后加了一行 nginx try_files $uri /index.html 解决。HTML5 给了能力，但配套的运维配置得跟上。

我自己的习惯：每次开新项目，先写一个最小 HTML5 骨架，<!DOCTYPE html>、lang、meta viewport、meta charset，然后手动加 <main> 和 <header>。不是为了 SEO，是为了让自己记住——这个页面是有结构的，不是一堆 div 汤。写 CSS 的时候，用 :is() 和 :where() 减少重复，用 clamp() 做流体排版。这些 CSS 特性跟 HTML5 规范是同一批人在 W3C 和 WHATWG 里推的，配合起来很舒服。

最后说个真事。上个月面试一个五年经验的工程师，问他 HTML5 的 <template> 标签和 document.createElement('template') 有什么区别。他愣了几秒，说“不都是模板吗”。其实 <template> 里的内容不会渲染，不会加载图片，直到你克隆它。这是 HTML5 规范里定义的惰性解析。用好了，比 innerHTML 拼接字符串安全得多，也不会有 XSS 风险。他后来没通过，不是因为这一个问题，而是整个回答里没有一次提到“规范”两个字。

工程师写 HTML5，不是背标签，是理解浏览器怎么按规范干活。你写的每一行 HTML，背后都有一份几百页的文档在支撑。偶尔翻翻，比刷技术短视频有用。