<noscript>仅在浏览器禁用或不支持JavaScript时生效，须置于<body>顶层且内容需原生可用、语义清晰；现代框架中常失效，验证必须手动关闭JS设置。
<noscript> 标签不是“JS 加载失败提示”，也不是“运行时报错兜底”——它只在浏览器明确禁用 JavaScript 或完全不支持脚本时才渲染内容。其他所有情况，包括 404、CSP 拦截、语法错误、fetch 超时、React hydrate 失败，它都完全无感。
什么时候 <noscript> 真正生效
它只响应两种静态、确定性的环境状态：
- 用户在浏览器设置中手动关闭了 JS（如 Chrome 的
chrome://settings/content/javascript，Firefox 的javascript.enabled = false） - 浏览器本身不执行脚本：CLI 浏览器（
lynx）、部分无障碍阅读器、或某些爬虫直读 HTML 且跳过所有<script>解析
只要 JS 引擎存在且启用，哪怕页面里一个 <script src="broken.js"></script> 返回 404，其余脚本也未加载，<noscript> 也不会出现——因为浏览器仍在尝试解析脚本，只是失败了。
<noscript> 必须放在 <body> 顶层才能被用户看到
HTML5 允许它出现在 <head> 和 <body>，但行为天差地别：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中：只能包含<link>、<style>、<meta>；放<p>、<img>或纯文本会触发解析忽略，用户根本看不到 - 在
<body>中：必须是直接子元素（即不能嵌套在<div>、<section>或框架容器里），否则 Chrome/Firefox 可能直接跳过整个标签 - 常见错误：
<noscript><p>请启用 JavaScript</p></noscript>写在<head>，或包在<div id="app">里——JS 禁用后整个div不渲染，<noscript>自然消失
真正有用的降级内容长什么样
写“请启用 JavaScript”等于放弃用户。有效降级必须「原生可用」：
- 表单用
<form method="post" action="/login">替代event.preventDefault() + fetch() - 链接带真实
href，不靠onclick模拟跳转 - 关键信息内联直出：文章正文、产品参数、联系方式等，不能依赖 JS 动态拉取
- 地图组件失效？放地址文本 +
<a href="https://www.google.com/maps?q=xxx"> -
<img>可安全使用，但必须带alt；避免空<button>或无语义图标
最易被忽略的是：<noscript> 内容不参与 DOM 构建、不触发事件、不计算外部 CSS——它就是一块静态 HTML 片段，写得再花哨，没语义、没键盘导航、没 alt，对屏幕阅读器反而更难理解。
现代框架项目里 <noscript> 基本形同虚设
React/Vue 默认 CSR（客户端渲染），<body> 初始为空，全靠 JS 注入 DOM。JS 被禁用 → 页面白屏 → <noscript> 即使写了也常被框架模板覆盖或根本没机会解析。
-
create-react-app默认模式下，<noscript>是纯装饰，服务端不“禁用 JS”，SSR 模板里硬塞的它不会被服务端渲染 - Next.js/Nuxt 等 SSR 框架虽能输出首屏 HTML，但 hydration 后
<noscript>节点不参与 VDOM 管理，导致冗余残留或数据不可读 - 验证是否真生效，唯一方式是手动关闭浏览器 JS 设置后刷新页面——别信本地开发预览或模拟工具
真正复杂的地方在于：你写的每行 <noscript> 内容，都得单独考虑可访问性、语义结构、键盘导航路径和 SEO 抓取逻辑，而不是把它当成一个“加了就安心”的开关。
