<noscript>无法实现全站降级提示，因其仅在JS被明确禁用时生效，无法应对JS加载失败、执行错误等场景；它必须紧贴依赖区块、位于body直接子级、内容纯静态且自包含，否则在现代框架中极易失效。
<noscript> 标签无法实现“全站降级提示”——它只在 JS 被明确禁用时生效，且不能替代动态逻辑或覆盖整站结构。
为什么「全站降级提示」这个目标本身就不成立
<noscript> 不是错误兜底机制，它只响应一种确定性状态：浏览器设置中 javascript.enabled = false（如 Firefox 配置页关闭），或极简环境（Lynx、部分爬虫、无障碍阅读器）。只要 JS 引擎开着，哪怕 app.js 404、fetch 报错、React hydration 崩溃、CSP 拦截全部脚本，<noscript> 内容也完全不会渲染。
- 把
<noscript><p>请启用 JavaScript</p></noscript>放在页面顶部，结果用户因 CDN 故障白屏却看不到提示——因为 JS 是启用的，只是没加载成功 - 试图用
<noscript>包裹整个<main>，指望它作为“备用模板”，反而导致 JS 启用时内容彻底消失 - 在
<head>中放可见文案（如<p>），HTML 解析直接报错或静默忽略
真正能用的 noscript 写法：必须紧贴依赖区块 + 纯静态可用
它的作用不是“提示”，而是提供一段**原生可操作的 HTML 替代路径**。必须满足三个硬条件：写在 <body> 直接子级、紧跟对应功能区块、内容本身不依赖任何 JS。
- 表单场景：JS 版本是
<form id="search-form">...</form>，后面立刻跟<noscript><form method="get" action="/search"><input name="q"><button type="submit">搜索</button></form></noscript> - 列表/卡片组件：若用 JS 渲染商品列表，
<div id="product-list"></div><noscript><ul class="fallback-list"><li>商品 A</li><li>商品 B</li></ul></noscript> - 样式必须预设：
<noscript><style>.fallback-list { margin: 1rem 0; }</style></noscript>，不能靠外部 CSS 或媒体查询延迟加载 - 绝对路径优先：链接、图片
src必须用绝对 URL 或内联 data URI，避免相对路径在无 JS 时解析失败
嵌套、位置和 SSR 是最容易翻车的三个点
<noscript> 在现代框架项目里极易失效，不是标签写错了，而是环境不匹配。
立即学习“前端免费学习笔记（深入）”；
- 嵌套在
<div>或组件模板中（如<Card><noscript>...</noscript></Card>）—— Chrome/Firefox 会直接忽略，规范未禁止但解析器不认 - 放在
<body>开头但离实际功能区块很远——JS 禁用时 DOM 流式渲染可能卡住，<noscript>后的内容根本来不及输出 - 纯 CSR 应用（如默认 CRA）初始
<body>是空的，服务端没吐出任何 HTML，<noscript>根本没机会被解析 - SSG/SSR 是前提：只有服务端已渲染好带
<noscript>的 HTML，用户禁用 JS 才能看到；否则就是白屏
最常被忽略的是：你写的 <noscript> 内容本身是否真能用。一个没有 type="submit" 的 <button>、一个没写 action 的 <form>、一张没加 alt 的 <img>，在无 JS 环境下等于不存在。
