HTML语义标签防止结构退化需严格使用<article><section><nav><footer>等替代div，交互控件匹配<button>等语义元素，CI中集成html-validate强制校验并拦截错误提交。
代码退化不是“突然崩溃”，而是语义流失、回退失效、样式耦合逐步累积的结果。HTML 层面的退化尤其隐蔽——它不报错，但会让可访问性下降、SEO 掉量、JS 依赖变脆弱、老浏览器彻底不可用。平滑控制的关键，是把质量约束嵌进日常提交和构建流程里，而不是靠人工 review 或事后补救。
怎么用 HTML 语义标签防止结构退化
退化常始于“图省事”：一个 <div class="card"> 替代 <article>，一个 <span onclick="..."> 替代 <button>。这类替换短期无感，长期破坏语义链。
- 所有内容区块优先用
<article>、<section>、<aside>，而非嵌套<div>；导航必须用<nav>，页脚必须用<footer> - 交互控件严格匹配语义：表单提交用
<button type="submit">，切换状态用<button type="button">，链接跳转用<a href>—— 不要用<div role="button">模拟，除非有明确 ARIA 增强需求 - CI 流程中加一条
pmd或自定义 ESLint HTML 规则，检测<div>是否被误用于语义容器（例如父级包含h1–h6且无其他语义标签）
如何让 alt、fallback 和 noscript 真正生效
很多团队把 alt 当成必填字段填完就交差，结果写成 alt="图片" 或留空；<video> 的 <source> 后不跟文字描述；<noscript> 里只放一句“请启用 JavaScript”。这些都不是 fallback，只是占位符。
-
alt必须传达等价信息：图标按钮用alt="删除订单"，数据图表用alt="2025年Q2销售额环比增长12%，柱状图"；纯装饰图用alt=""（空字符串，不是空格） -
<video>内部必须包含至少一段文本 fallback：<p>视频无法播放，请<a href="/videos/report.mp4">下载原始文件</a></p> -
<noscript>要提供核心功能替代路径：表单提交失败时显示静态联系方式，动态列表失效时渲染静态 HTML 表格 - 用 Puppeteer 或 Playwright 在 CI 中启动无 JS 模式访问关键页面，断言
<noscript>内容是否可见、alt文本是否非空且非泛化
为什么 @supports 比 UA 判断更适合渐进增强
用 navigator.userAgent 或条件注释判断 IE 就停更，本质是放弃维护——它堵死了后续兼容路径。真正的平滑控制，是让新特性“可选加载”，旧环境自动降级到已验证的基线。
立即学习“前端免费学习笔记（深入）”；
- CSS 层面：先写 Flexbox 布局，再用
@supports (display: grid)覆盖为 Grid；但必须保证未命中@supports的浏览器仍能用 Flex 正常渲染 - JS 层面：不用
if (isIE)，改用特性检测：if ('IntersectionObserver' in window)，否则加载 polyfill 或降级为 scroll event + offsetTop 计算 - 避免在 HTML 中硬编码 class 控制样式分支（如
class="grid-supported"），应由 JS 动态添加，确保初始 HTML 只含语义结构 - 构建工具（如 Webpack/Vite）配置
target: ['chrome87', 'edge90', 'firefox85']，让 Babel 自动注入必要 polyfill，而非手动 patch
CI 中如何低成本拦截 HTML 退化行为
靠人眼扫 PR diff 发现 <div> 替代 <header> 效率极低。真正有效的拦截，是把 HTML 质量检查变成“提交即失败”的门禁。
- 引入
html-validate（比 W3C validator 更适合工程化），配置规则集强制校验："valid-role"、"require-skip-link"、"no-inline-style" - 将
html-validate集成进 husky pre-commit hook，本地就能拦截基础问题；再在 GitHub Actions 中跑全量检查，失败则阻断 PR 合并 - 对历史存量页面，用
jest-puppeteer写快照测试：抓取 DOM 结构快照，对比document.querySelectorAll('article').length是否下降、document.querySelectorAll('[role]').length是否异常上升 - 禁止在模板中使用
v-html/dangerouslySetInnerHTML直接插入未过滤 HTML，必须经DOMPurify.sanitize()处理后才渲染
HTML 退化最难察觉的点，是它从不抛错——它只是悄悄让屏幕阅读器读错、让搜索引擎漏掉关键区块、让 JS 的 querySelector('main') 返回 null。平滑控制的本质，是把“应该写对”变成“写错就过不了 CI”，把语义约束变成和缩进风格一样基础的工程纪律。
