noscript 标签只在 JS 被明确禁用时才显示，不是“加载失败”或“报错”的兜底
很多人加了 <noscript><p>请启用 JavaScript</p></noscript> 却发现页面从不显示它——根本原因在于：<noscript> 不响应脚本 404、CSP 拦截、fetch 报错、React hydrate 崩溃，甚至 IE11 渲染失败。它只认一个信号：浏览器底层 JS 引擎是否关闭（如 javascript.enabled === false）。Chrome 设置里关掉 JS 才真触发；DevTools 里临时禁用后必须刷新页面才生效。
必须放在 <body> 里，且不能嵌套在其他标签内
<noscript> 在 <head> 中只能放 <meta>、<link>、<style>；放 <p> 或 <button> 会被浏览器忽略，用户完全看不到。正确写法是直接塞进 <body>，最好紧贴它所替代的功能区块：
<div id="interactive-map"></div>
<noscript>
<section aria-label="地图（JavaScript 已禁用）">
<h3>门店地址</h3>
<p>北京市朝阳区建国路88号</p>
<a href="https://www.google.com/maps?q=北京市朝阳区建国路88号">在 Google 地图中查看</a>
</section>
</noscript>
- 别把它包在
<div>里，否则无效 - 务必加
aria-label，方便屏幕阅读器识别这是降级内容 - 所有链接必须是原生
<a href>，不能靠 JS 绑定跳转
提示语只是起点，真正要提供“能用”的替代路径
只写“请启用 JavaScript”等于放弃用户。真正有用的降级内容得让用户继续完成核心任务：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 表单用
<form method="post" action="/login">，而不是依赖fetch()的无刷新提交 - 动态文章正文缺失？直接内联静态 HTML 版本，不走任何 JS 加载逻辑
- 图标用内联
data:image/svg+xml;base64,...，避免 JS 禁用时/assets/logo.svg404 - 样式继承全局 CSS，不要在
<noscript>里写<style>—— 它可能被解析但不生效
纯 CSR 项目里硬加 noscript 基本没用
像 Create React App 默认输出的空 <body>，JS 一禁就是白屏，<noscript> 根本没机会解析或展示。它只在服务端生成首屏 HTML（SSR/SSG）的前提下才有效，比如 Next.js、Nuxt 默认行为。现代构建工具打包后还容易把相对路径资源（如图片、字体）搞成 404，所以：
立即学习“Java免费学习笔记（深入）”；
- 降级内容里的资源尽量用绝对路径或 base64 内联
- 别指望 Webpack/Vite 模板里塞一段
<noscript>就能兜住所有问题 - 如果业务强依赖交互，优先考虑 SSR + 渐进增强，而不是靠
<noscript>补救
最常被忽略的一点：它不解决兼容性问题。IE11 不支持 <dialog>？<noscript> 不管这事。检测新标签得用特性判断，比如 typeof HTMLDialogElement !== 'function'，再配 JS 动态降级。
