<noscript>在<head>中仅允许<link><style><meta>，放文本或可见标签会解析错误；在<body>中可放任意流式内容，但<script><iframe>被忽略，且必须置于依赖JS的内容附近才能有效提示。
noscript 在 head 和 body 中的结构限制完全不同
<noscript> 能放的位置只有两个：<head> 和 <body>，但内部能写什么，完全取决于它在哪。这不是可选项，是 HTML5 解析器强制执行的规则。
在 <head> 里：<noscript> 只能包含 <link>、<style>、<meta> —— 放 <p>、纯文本、<img> 或任何可见内容，浏览器会直接报解析错误（比如 Chrome 显示 “noscript in head must not contain text content”）。
在 <body> 里：可以放任意流式内容（<p>、<ul>、<img src="...">），但注意：<script> 和 <iframe> 会被忽略（写了也白写）；它不会自动替换某个 DOM 节点，只是作为兄弟节点插入。
- 别把
<noscript>塞进<div id="app">里面指望“降级渲染”，它不会替代该<div> - 多个
<noscript>是合法的，可按功能区域分散放置（如表单区、商品列表区各一个） - XHTML 完全不支持
<noscript>，若项目需 XHTML 兼容，必须移除或改用服务端逻辑生成降级内容
为什么 noscript 里放文字提示经常失效
最常见的现象是：JS 因 CDN 故障 404 或 CSP 拦截没加载，页面白屏，但 <noscript> 里的“请启用 JavaScript”压根没显示——因为 JS 是启用的，只是没跑起来。<noscript> 只响应两种静态状态：用户手动禁用 JS（如 Firefox 设置 javascript.enabled = false），或浏览器根本不支持脚本（如 lynx、部分 CLI 工具）。
立即学习“前端免费学习笔记（深入）”；
它不处理任何运行时问题：加载失败、语法错误、type="module" 报错、import() 拒绝……这些都跟 <noscript> 无关。
- 捕获脚本加载失败：用
<script onerror="handleLoadFail()">或监听document.addEventListener('error', e => e.target.tagName === 'SCRIPT') - 捕获 JS 执行异常：必须在入口脚本里
try/catch，再手动document.body.append(...)插入提示 - 想覆盖 ES 模块加载失败场景：搭配
<script nomodule>提供降级 bundle，<noscript>仅兜底彻底无 JS 环境
noscript 内容的可访问性陷阱
<noscript> 本身不提升可访问性，它只提供一块静态 HTML 区域。这块区域是否对屏幕阅读器友好、能否被键盘导航、信息是否结构化，全看你写的 HTML 是否合规。
例如：<noscript><img src="icon.png"></noscript> 没有 alt，就等于向屏幕阅读器扔了个哑巴图标；<noscript>点击这里</noscript> 没包裹 <a href="...">，就只是不可操作的文本。
- 必须加语义化标签：用
<section aria-label="商品列表(JavaScript 已禁用)">替代裸<div> - 所有
<img>必须带alt，链接必须可聚焦、有明确目的 - 避免内联样式：禁用 JS 时，CSS 文件可能未加载，应依赖全局样式继承，或确保关键样式通过
<style>在<head>的<noscript>中注入
自定义 noscript 样式为什么总被覆盖
<noscript> 内容是普通 HTML，但它没有 class、id 或父容器约束，极易被全局 CSS 覆盖。比如页面写了 body * { font-size: 14px; }，你的提示文字就可能被强制缩小，甚至 display: inline 导致换行失效。
稳妥做法不是靠选择器权重，而是用内联样式或强上下文限定：
<noscript>
<div style="position: fixed; top: 0; left: 0; width: 100%; background: #fff0f0; color: #d32f2f; padding: 12px; text-align: center; z-index: 9999; font-weight: bold;">
（JavaScript 已禁用）当前功能受限，请启用 JavaScript 以获得完整体验
</div>
</noscript>- 不要依赖
!important，它在某些旧版浏览器中不稳定 - 如果必须用外部样式，用高优先级选择器如
body > noscript > div，而非泛泛的noscript div - 测试时务必在真实禁用 JS 的环境下验证（Chrome DevTools → Settings → Debugger → “Disable JavaScript”）
真正容易被忽略的是：<noscript> 不是兜底开关，它是环境快照——只在 JS 彻底缺席时亮起，而现代 Web 的大部分故障，恰恰发生在 JS “在场却失能” 的灰色地带。
