<noscript> 是浏览器原生的静态 fallback 机制，仅在 JS 被禁用、加载失败或不支持时渲染内容，不可用于主动检测或运行逻辑，须内联样式、具体提示操作步骤，并配合渐进增强确保核心功能可用。
noscript 标签只在 JS 被禁用时生效
<noscript> 不是“检测 JS 是否可用”的工具，而是浏览器原生的 fallback 机制：当用户关闭 JavaScript、脚本加载失败、或浏览器根本不支持 JS 时，它才渲染其中内容。它不会在 JS 正常运行时显示，也不触发任何事件或逻辑。
常见错误是把它和 document.write() 或 console.log() 混用，以为能“主动判断”——其实不行。它纯粹是静态 fallback，没有运行时能力。
- 必须放在
<head>或<body>内，不能嵌套在其他标签（如<div>）里再被 JS 控制显隐 - 如果页面用了模块化构建（如 Vite/Webpack），且入口 JS 文件因路径错误 404，
<noscript>仍会显示——这是它的正确行为，不是 bug - 部分企业内网环境或老旧终端（如某些银行定制浏览器）默认禁用 JS，这时
<noscript>是唯一可靠提示途径
写提示文案要具体，别只说“请开启 JavaScript”
用户看到“请开启 JavaScript”往往不知道怎么操作，尤其在移动端或系统级禁用场景下。直接给出可执行动作更有效。
- Chrome 桌面端：
设置 → 隐私设置和安全性 → 网站设置 → JavaScript → 允许 - iOS Safari：
设置 → Safari → 高级 → JavaScript → 开启 - 避免使用“启用”“激活”等模糊动词，统一用“开启”（iOS/Android 系统设置中实际用词）
- 如果应用依赖特定 API（如
fetch或localStorage），可在提示里点明：“本页面需要 JavaScript 来保存您的设置并加载内容”
样式要独立，别依赖外部 CSS
<noscript> 内容在 JS 关闭时，所有外部样式表、内联 style 标签、以及 JS 注入的 class 都不可用。必须用内联 style 属性或 <style> 标签包裹。
立即学习“Java免费学习笔记（深入）”；
<noscript>
<style>
.noscript-banner { background: #fee; color: #d32; padding: 1rem; text-align: center; }
</style>
<div class="noscript-banner">
您的浏览器已禁用 JavaScript。请开启以正常使用本页面。
</div>
</noscript>
- 不要用 CSS 类名依赖外部文件，比如
class="alert"却没定义.alert - 避免使用 Flex/Grid 布局——IE 和部分禁用 JS 的浏览器可能不解析这些声明
- 字体大小用
px或rem（前提是 root font-size 已在<html>上声明），别用em防止继承链断裂
别把它当兜底方案，优先考虑渐进增强
靠 <noscript> 提示只是补救，真正健壮的做法是让核心功能在无 JS 下仍可访问（比如表单提交走传统 POST，链接指向真实 URL）。否则提示再友好，用户也完不成关键操作。
- 登录页如果完全依赖 JS 渲染表单，
<noscript>提示后用户依然登不了——得先确保<form action="/login" method="post">能跑通 - 电商商品列表页，JS 关闭时至少应展示静态 HTML 列表，而不是空白页+提示
- SPA 应用无法避免 JS 依赖时，至少把
<noscript>放在<body>顶部，避免用户滚动半天才发现问题
最常被忽略的一点：很多团队只在开发环境测试 JS 开启状态，却从没真关掉浏览器 JS 去验证 <noscript> 是否可见、文案是否可读、链接是否能跳转——这一步必须手动测。
