<noscript> 标签仅在 JavaScript 被用户手动禁用或处于极简浏览器环境时生效，不处理运行时错误；必须作为 <body> 的直接子元素，且降级内容需真实可用、语义完整、功能可操作。
noscript 标签只在 JS 被明确禁用时才生效，不是错误兜底方案
它不捕获 ReferenceError、fetch() 失败、404 脚本加载、CSP 拦截或 React hydrate 崩溃。只要浏览器 JavaScript 引擎处于启用状态（哪怕只执行了一行 console.log），<noscript></noscript> 就不会渲染。
真正触发它的只有两类情况：
– 用户手动关闭 JS：Chrome 设置中禁用 chrome://settings/content/javascript，Firefox 配置项 javascript.enabled = false，或 NoScript 插件全局阻止
– 极简环境：Lynx 文本浏览器、部分爬虫直读 HTML、某些嵌入式终端
常见误用：
– 把 <noscript><p>JS 加载失败，请刷新</p></noscript> 放进页面，结果用户遇到白屏却看不到提示
– 用它替代 try/catch 或 loading 状态管理 —— 完全无效
必须放在 <body> 中且为直接子元素才能显示可见内容
<noscript></noscript> 允许出现在 <head> 和 <body>，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中只能放<link>、<style>、<meta>；放<p>或纯文本会被浏览器忽略，用户根本看不到 - 在
<body>中可放任意流式内容（<form>、<img>、<a>），但必须是<body>的直接子元素 - 嵌套在
<div id="app">或<main>里会失效：JS 禁用后整个容器不渲染，<noscript></noscript>也跟着消失
正确写法示例：<body><div id="search-widget"></div><noscript><form method="GET" action="/search"><input name="q" placeholder="搜索关键词"><button type="submit">搜索</button></form></noscript></body>
降级内容必须真实可用，不能只写“请启用 JavaScript”
<noscript></noscript> 不提供功能，只提供静态容器。如果里面的内容无法提交、跳转或阅读，再友好的提示也没意义。
有效做法包括：
– 表单用原生 method="post" + action，而非依赖 fetch() 的无刷新逻辑
– 链接带真实 href，不靠 onclick 模拟
– 关键信息内联直出：文章正文、产品参数、客服电话等别全靠 JS 动态拉取
– 地图组件不可用？放地址文本 + <a href="https://www.google.com/maps?q=xxx">
– 所有 <img> 必须带 alt，按钮必须是 <button type="submit"> 或语义化链接
注意：<noscript></noscript> 内容不参与 DOM 构建、不触发事件、不计算 CSS（除非显式写 style 属性），对屏幕阅读器也无额外帮助 —— 写得再花哨，没语义、没键盘导航、没 alt，反而更难理解。
现代框架项目中 <noscript></noscript> 基本形同虚设
React/Vue/Svelte 默认 CSR（客户端渲染），<body> 初始为空，全靠 JS 注入 DOM。JS 被禁用 → 页面白屏 → <noscript></noscript> 即使写了也常被框架模板覆盖或根本没机会解析。
只有 SSR 场景下它才有实际意义：
– Next.js/Nuxt 默认输出首屏 HTML，<noscript></noscript> 可随服务端 HTML 一起下发
– create-react-app 默认模式是纯 CSR，硬塞的 <noscript></noscript> 在服务端不渲染，JS 禁用后也看不到
构建流程中还要注意：
– Webpack/Vite 打包 JS 成单文件，HTML 在 JS 执行前就已解析完毕，<noscript></noscript> 可能被误判为“JS 失效”，导致降级内容常驻页面
– <noscript></noscript> 内部资源路径不能依赖打包产物（如 src="/assets/logo.svg"），得用内联 base64 或绝对路径
最易被忽略的是：你写的降级内容是否真能让禁用 JS 的人完成核心任务——比如查看文章、下载 PDF、联系客服。这点比标签本身的位置和语法更重要。
