<noscript>标签用于JS禁用时优雅降级，需合理放置、配CSS样式，并通过body类协同JS控制显隐，服务端渲染可进一步优化。
当页面 JavaScript 被禁用或加载失败时，可通过 <noscript> 标签优雅地提示用户，同时保持结构语义清晰、样式可控。
基础用法：直接包裹降级内容
<noscript> 是 HTML 原生标签，浏览器在 JS 不可用时才渲染其内部内容。它应放在文档流中合理位置（如主内容区上方或关键交互组件旁），而非仅塞在 <head> 里。
- 适合展示纯静态替代信息：如提示文字、静态链接、基础表单（
<form method="get">等无需 JS 即可提交） - 避免放复杂交互逻辑——毕竟此时 JS 不可用
- 示例：
<noscript><p class="warning">⚠️ 功能需要启用 JavaScript 才能正常使用</p></noscript>
样式控制：让提示不突兀但清晰可见
默认情况下 <noscript> 内容无样式，需配合 CSS 显式定义视觉表现。建议用轻量、非侵入式设计，兼顾可访问性。
- 添加语义类名（如
js-fallback），便于统一管理样式和 JS 移除逻辑 - 使用
color、background和padding而非大块阴影或动画（降级场景下应简洁） - 可配合
@supports (selector(:has(.js-enabled)))或 body 类做渐进增强（见下一点）
与 JS 协同：自动隐藏 + 增强体验
为避免 JS 启用后仍显示提示，推荐在 JS 加载成功后移除或隐藏 <noscript> 区域——更稳妥的做法是给 <body> 添加类名，用 CSS 控制显隐。
立即学习“前端免费学习笔记（深入）”；
- 在页面顶部内联一小段 JS：
<script>document.body.classList.add('js-enabled');</script> - 对应 CSS：
body:not(.js-enabled) .js-fallback { display: block; }
body.js-enabled .js-fallback { display: none; } - 这样即使 JS 异步加载延迟，也能自然过渡；且比依赖
DOMContentLoaded更早生效
进阶：服务端判断（可选）
若项目支持服务端渲染（如 SSR/SSG），可在响应头或 UA 中识别明确禁用 JS 的客户端（如某些爬虫、老旧终端），直接不输出依赖 JS 的 DOM 结构，而返回精简版 HTML —— 这比前端降级更彻底，但需后端配合，非通用方案。
