<noscript> 标签是 HTML5 中专为脚本被禁用或不支持 JavaScript 的环境设计的兜底方案，仅在 JavaScript 整体不可用时渲染内容，用于保障基础可用性而非增强功能。
noscript 标签是 HTML5 中专为脚本被禁用或不支持 JavaScript 的环境设计的“兜底方案”，它的作用不是增强功能，而是保障基础可用性。
noscript 标签的核心行为
浏览器只有在以下任一情况发生时，才会渲染 noscript 内容：
- 用户主动在浏览器设置中禁用了 JavaScript（如 Firefox 的
javascript.enabled = false） - 脚本因网络问题、语法错误或 CSP 策略被完全阻止执行（注意：仅加载失败 ≠ 触发 noscript）
- 极老旧或非标准浏览器根本不识别
<script>标签（现代浏览器已基本无此问题）
它不会在脚本执行出错、异步加载超时、或部分功能失效时自动激活——它只响应“脚本能力整体不可用”这一明确状态。
典型适用场景与写法
补救应聚焦于关键信息和基础操作，避免复杂交互。常见有效用法包括：
立即学习“前端免费学习笔记（深入）”；
- 关键内容降级显示：如动态加载的文章正文缺失时，在 noscript 中直接内联静态 HTML 版本
-
替代表单提交方式：当使用 JS 实现无刷新提交时，noscript 内提供传统
<form method="post" action="/submit">表单 - 引导手动操作：例如地图组件不可用时，显示地址文本 + 链接到 Google Maps 的静态 URL
- 提示启用脚本：简短友好提示（如“为获得完整体验，请启用 JavaScript”），并附带浏览器设置指引链接
容易被忽略的关键细节
noscript 必须是 <body> 或 <head> 的直接子元素（HTML5 允许在 head 中使用，但内容需为元数据相关，如 <meta> 或 <link>）；不能嵌套在 <div> 或其他容器中，否则无效。
它不支持任何事件绑定或内联样式逻辑，所有样式需通过外部 CSS 或 style 属性预设；其中的链接、按钮等元素必须具备原生可访问性（如 <a href> 和 <button type="submit">）。
若页面依赖模块化构建（如 Webpack），需确保 noscript 内容不依赖打包后的 JS 资源——它必须是纯 HTML/CSS 可独立呈现的内容。
不推荐的误用方式
以下做法无法达到补救目的，反而可能造成混乱：
- 把整个页面结构包裹在 noscript 里，指望它作为“备用模板”——这会导致脚本启用时内容完全消失
- 在 noscript 中放置
<script>标签或依赖 JS 初始化的组件（它本身就在无脚本环境下生效） - 仅放一句“请开启 JavaScript”，却不提供任何可用功能或信息——违背渐进增强原则
- 用它来隐藏敏感内容（如密码字段），认为禁用 JS 就能绕过校验——服务端仍需完整验证，前端防护不可靠
