仅在浏览器明确禁用JavaScript时渲染，必须置于内且紧随目标区块后；CSR项目中因初始HTML为空而失效，需SSR/SSG支持，并提供原生表单、绝对URL链接及语义化静态内容。
<noscript></noscript> 不是“JS 加载失败提示”，只在浏览器明确禁用 JavaScript 时才渲染；它不响应 CSP 拦截、404、超时或运行时错误，且必须放在 中才能显示可见内容。
为什么你的 <noscript></noscript> 在 Chrome 设置里关 JS 后仍不出现
常见原因不是写法错，而是它根本没机会进入 DOM 流：如果项目是纯 CSR（如默认 Create React App）， 初始为空，JS 一禁就白屏，<noscript></noscript> 标签甚至没被 HTML 解析器读到。另外，若把它嵌套在 <div id="app"> 内部，而该 <code><div> 又依赖 JS 注入，那整个结构在 JS 禁用时压根不生成——<code><noscript></noscript> 自然跟着消失。
- ✅ 正确位置：紧跟在目标功能区块之后，例如
<div id="search-results"></div> <noscript>...</noscript> - ❌ 错误位置：
<noscript><p>请启用 JS</p></noscript>（不渲染为可见内容） - ⚠️ 构建工具干扰：Vite/Webpack 模板中硬塞的
<noscript></noscript>，可能被 SSR/SSG 工具链覆盖，或在 HMR 热更新时被重写丢弃
<noscript></noscript> 里能写什么才真正可用
它只渲染静态 HTML，不执行任何逻辑，也不继承 CSS 类（除非显式内联 style）。所谓“降级”，不是提示用户去开 JS，而是提供一条不依赖 JS 的操作路径。
立即学习“前端免费学习笔记（深入）”；
- 表单必须用原生提交：
<form method="post" action="/login"> <input name="email"><button type="submit">登录</button> </form>，不能靠onclick或fetch() - 链接必须带真实
href：<a href="https://maps.google.com?q=xxx">查看地图</a>，而非onclick="openMap()" - 图片必须用绝对路径或
data:image/svg+xml;base64,内联；相对路径如src="/assets/logo.svg"在 Lynx 或 JS 禁用时大概率404 - 务必加语义属性：
aria-label="商品列表(JavaScript 已禁用)"，否则屏幕阅读器无法识别这是替代内容
现代框架项目中怎么让 <noscript></noscript> 真生效
它只在 SSR/SSG 输出首屏 HTML 的前提下才有意义。Next.js、Nuxt 默认行为可支撑；Create React App、Vue CLI 默认 CSR 模式下，<noscript></noscript> 基本无效。
- ✅ 有效做法：在服务端模板中直接输出降级内容，例如 Next.js 的
getStaticProps返回静态商品列表，再包裹<noscript></noscript> - ❌ 无效做法：在客户端 JS 里动态插入
<noscript></noscript>，或把它当“备用 DOM 模板”用于 hydration 失败兜底 - ⚠️ 资源路径陷阱：构建后
/assets/目录映射依赖 JS 运行时上下文，JS 禁用时浏览器不会执行重写规则，所以所有src、href必须是绝对 URL 或 base64 - ? 补充策略：用
<script nomodule></script>提供非模块化 fallback bundle，覆盖 ES module 加载失败场景；<noscript></noscript>仅负责彻底无 JS 的兜底
最易被忽略的一点：<noscript></noscript> 不参与 DOM 构建流程，不触发事件，不计算样式，也不自动提升可访问性——它只是块静态文本区域。写得再全，若没 alt、没 label、没键盘可聚焦的 <button type="submit"></button>，对真实用户仍是不可用的。
