-
内联style和style标签适合极小项目或临时调试，常规开发强烈推荐link外链CSS文件；核心区别在于是否合适项目规模、可维护性、性能及协作需求。
-
JavaScript的class是原型机制的语法糖，本质仍基于prototype；它不可提升、方法不可枚举，继承需super()初始化this并确保__proto__链正确，new操作符遵循四步流程，误用会破坏原型链。
-
gap是Flexbox和Grid中统一控制列/行间距的最直接方式，仅在flex-wrap:wrap的flex容器和grid容器中生效，不支持IE，且与子项margin叠加而非覆盖。
-
响应式padding/margin需用rem/em+媒体查询+移动优先：设htmlfont-size基准，断点处统一调小根字号；聚焦卡片、表单等视觉节奏位；Flex/Grid中慎用margin:auto，改用margin-inline或justify-content。
-
优先调高HSL中的亮度（L）值可有效提升深色背景上按钮文字的可读性；L值设为82%–85%既保证对比度达标（≥4.5:1），又避免刺眼，比调整色相或饱和度更直接可控。
-
跨域错误因地图瓦片服务未返回Access-Control-Allow-Origin响应头所致；即使img设crossOrigin="anonymous"，若服务端无CORS支持仍无法读取像素，需代理或换用支持CORS的图源。
-
颜色深度优化关键在减少冗余声明而非缩写写法，应通过CSS自定义属性统一语义化管理颜色，禁用硬编码值，避免currentColor隐式膨胀，并依靠工程化规范而非PostCSS自动合并。
-
可通过本地计算机直接打开HTML文件，只需保存为.html格式并双击用默认浏览器运行；2.使用代码编辑器如VSCode安装LiveServer插件，实现浏览器实时预览；3.对需HTTP协议支持的功能，应部署至本地服务器如Apache或Node.js环境运行；4.利用JSFiddle、CodePen等在线平台粘贴代码即可即时渲染查看效果并分享链接。
-
SPA核心是不刷新页面动态更新内容，可用原生JS实现，但框架能降低复杂度；关键在权衡手写成本与项目需求，Vue适合中后台，React生态丰富适合复杂场景，Svelte性能优适合轻量级应用。
-
::first-line常无效因仅作用于块级容器中纯文本或纯内联元素的首行，受display类型、子元素类型及white-space等属性限制；仅支持color、font-size等文本属性，不支持margin、padding等布局属性。
-
父容器高度塌陷需触发BFC，如overflow:hidden；nav折行因总宽超限，应重置ul内外边距并检查box-sizing；IE兼容需设display:block；新项目优先用flex布局。
-
语义化HTML是无障碍访问的基础，应使用正确的HTML标签表达内容含义，如用<button>创建按钮、<h1>至<h6>表示标题层级、<nav>包裹导航、<main>标识主要内容区域，以便辅助技术构建可访问性树并帮助用户理解页面结构和交互方式；2.确保键盘可访问性，所有可交互元素必须能通过Tab键聚焦、Enter或空格键激活，自定义组件需通过tabindex="0"使其可聚焦并响应键盘事件，避免使用tabindex大于0以防打乱自然顺序；3.提供
-
底部导航栏用fixed定位导致内容被遮挡时，应在主容器设置padding-bottom（非margin-bottom），值为calc(var(--nav-height)+env(safe-area-inset-bottom))，并配合flex布局控制主体高度，避免将导航栏放入flex容器内；sticky不适用于底部固定，因其移动端兼容差、行为不可控；软键盘场景需监听focus/blur或visualViewport动态调整padding，微信WebView中需UA判断兜底。
-
适配器模式的核心思想是解决接口不匹配问题，通过创建一个适配器类，将一个对象的接口转换为客户端期望的另一个接口，从而让原本不兼容的对象能够协同工作；在JavaScript中，它常用于集成老旧API、统一不同服务接口、平滑替换模块或辅助测试，其本质是通过包装现有对象提供新的调用方式，而无需修改源代码；与外观模式（简化复杂系统接口）和装饰器模式（动态增强功能）不同，适配器模式专注于接口转换以实现兼容性，适用于需要复用但接口不匹配的场景，最终提升代码复用性和系统解耦程度。
-
本文讲解如何通过JavaScript动态识别当前页面URL，并自动为对应导航链接添加active类，从而实现页面跳转后导航项持续高亮的效果，无需修改HTML结构或阻止默认跳转行为。
