结论：<noscript> 标签必须置于 JS 可能失效的位置（如内联脚本上方、动态渲染区域内部）才能生效，因其仅在 HTML 解析阶段检查 JS 状态，且内容需处于当前文档流中、不被后续脚本移除。
直接说结论：用 <noscript> 标签包裹备选内容，但必须放在 HTML 文档中 JS 可能失效的位置（比如内联脚本上方、动态渲染区域内部），否则浏览器根本不会触发它。
为什么 <noscript> 有时完全不显示
常见错误是把 <noscript> 放在 <head> 里，或放在 JS 已经执行完并清空/替换了的 DOM 区域外。它的生效前提是：该标签被解析时，JS 确实被禁用（或加载失败），且它包裹的内容处于当前文档流中、未被后续脚本移除。
- 浏览器只在解析 HTML 阶段检查
<noscript>，不是运行时监听 JS 状态 - 如果页面用
document.write()或innerHTML覆盖了包含<noscript>的父容器，内容就永远消失了 - Vue/React 等框架组件内直接写
<noscript>通常无效——因为 SSR 渲染后 JS 启动会接管整个区域
在静态 HTML 中正确使用 <noscript>
最稳妥的用法是把它作为“降级占位符”，紧贴在依赖 JS 的功能区块旁。比如一个搜索框需要 JS 初始化：
<div id="search-container">
<noscript>
<p>您的浏览器未启用 JavaScript。请启用后使用搜索功能，或</p>
<p><a href="/search-fallback.html">访问纯 HTML 搜索页</a></p>
</noscript>
<input type="text" id="search-input" placeholder="输入关键词...">
</div>
- 不要只放提示文字，最好带可操作链接（如跳转到无 JS 版页面）
- 避免在
<noscript>里写<script>或依赖 JS 的属性（如onclick） - 如果页面有 CSP 策略禁止内联脚本，
<noscript>里的<a>仍可点击，这是它唯一可靠的作用
与现代前端框架共存的现实方案
在 React/Vue 中硬塞 <noscript> 基本无效。更实际的做法是：服务端判断 UA 或通过 <script> 注入标记，再控制初始 DOM 结构。
- SSR 渲染时，先输出含
<noscript>的降级内容，再让 JS 启动后替换为交互式组件 - 用
<script>document.documentElement.classList.add('js-enabled');</script>+ CSS 规则隐藏默认内容（如.js-enabled .fallback { display: none; }） - 对关键功能（如登录表单），保留一个无 JS 提交的
<form method="POST">，并在 JS 加载失败时显示它
真正难的不是写 <noscript> 标签，而是想清楚哪些内容必须可访问、哪些交互可以退化、以及服务器是否准备好兜底路由和模板——这些细节比标签本身更容易被忽略。
