真正精通html必须通过高强度、有约束、带反馈的真实项目实践，如复刻政务表单并满足wcag无障碍标准、w3c零错误验证、多端响应式适配及localstorage断网续填等硬性要求。
想靠“看教程+抄代码”就精通 HTML，基本不可能。真正能沉淀为能力的 HTML 技能，只来自高强度、有约束、带反馈的真实项目实践——不是做三个静态页交作业，而是模拟真实交付压力：要兼容、要语义、要可访问、要 W3C 验证通过、要经得起 DOM 检查和屏幕阅读器测试。
用真实需求倒逼语义化与结构严谨性
很多人写 HTML 习惯堆 <div>，是因为没被业务逻辑卡住过。一旦你接一个“需通过 WCAG 2.1 AA 级无障碍审计”的企业级表单页，<code><div class="input-group"> 就立刻失效——你必须用 <code><fieldset></fieldset> + <legend></legend> 包裹多选组，给 <input type="radio"> 配 <label for="id"></label>，且 for 值必须严格匹配 id。这种约束下，语义化不再是“加分项”，而是上线前提。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 从政府或高校官网找一个公开的「在线服务申请页」（如社保卡申领、学籍异动），1:1 复刻其表单结构，禁用任何 CSS 框架，只用原生 HTML5 标签
- 用 Chrome DevTools 的
Accessibility面板跑一遍，修复所有Contrast ratio不足、Missing label、No role类报错 - 把页面丢进 W3C Markup Validation Service，确保零错误；若出现
Element X is not allowed as child of element Y，说明嵌套违反规范，不是浏览器“能显示就行”
在响应式场景中强制理解 viewport 与媒体查询边界
只写 @media (max-width: 768px) 是懒人做法。真实项目里，你得面对折叠屏（如 Galaxy Z Fold）、iPad Pro（分辨率 2048×2732）、MacBook Air（1366×768）三类设备共存的情况，而它们的 device-width 和 viewport 行为完全不同。
实操建议：
- 用
<meta name="viewport" content="width=device-width, initial-scale=1.0">是基础，但必须补上user-scalable=no吗？不。只有金融类操作页才需要禁缩放，普通内容页加它反而违反 WCAG - 在 Chrome DevTools 里手动切到
Galaxy Z Fold设备预设，观察导航栏是否在展开态下溢出视口——这时你会发现仅靠max-width不够，得结合min-width和orientation - 把
<picture></picture>+<source media="(min-width: 1200px)"></source>写进 banner 图，而不是只用<img srcset>，否则大屏加载小图会触发 Lighthouse “Properly size images” 告警
用 localStorage + 表单持久化制造真实调试压力
HTML 不只是“写完就能跑”。当你实现一个支持断网续填的报名表，用户填到一半关掉页面，再打开时所有字段（包括 <textarea></textarea> 光标位置、<select multiple></select> 已选项）必须还原——这就逼你深入 DOM 事件时机：input 还是 change？beforeunload 能否捕获所有关闭路径？localStorage 存对象还是字符串？
实操建议：
- 监听
input事件而非change，因为后者对<textarea></textarea>和<select></select>不触发实时保存 - 用
JSON.stringify()存值前先检查typeof value !== 'function'，避免序列化失败静默吞掉数据 - 在
DOMContentLoaded后立即读取localStorage并dispatchEvent(new Event('input', {bubbles: true}))，否则 Vue/React 类框架绑定的 v-model 可能不更新
绕不开的兼容性雷区：IE11 未死透，但别为它妥协
国内政务、银行内网仍有 IE11 强制要求。但直接写 <header></header> 在 IE11 里就是个无样式的 <div>。解决方案不是降级回 <code><div class="header">，而是用 <code>document.createElement('header') 主动注册 HTML5 元素——但这个脚本必须放在 最顶部，且不能 defer。
实操建议：
- 只对必须支持 IE11 的项目加 HTML5Shiv，现代项目（Chrome/Firefox/Safari/Edge ≥ 90）完全不用
-
<video></video>的poster属性在 IE11 下不生效，得用<div> 覆盖层 + JS 判断 <code>video.readyState手动显示 - 别信“Babel 能转译 HTML”，JS 转译不影响标签语义，IE11 识别不了
<main></main>就是识别不了
最易被忽略的一点：HTML 精通不体现在你能写出多炫的动画或交互，而在于你能否在 30 分钟内，用纯 HTML+CSS 完成一个通过 Lighthouse 95+ 分、W3C 零错误、VoiceOver 全流程可操作、且在 Safari iOS 15 / Chrome Android 14 / Edge Win11 三端表现一致的落地页——所有“高级技巧”都该服务于这个底线，而非相反。
