-
用opacity和visibility组合配合transition实现自然淡入淡出，避免display切换；定义fade-in动画并设置transition时序，确保进出动效平滑，辅以position:absolute或固定高度防抖动。
-
HTML5允许省略引号的属性值需满足：无空格、无特殊字符、不以数字开头、不含=<>'"`等；否则必须加引号；布尔属性如disabled可写为disabled、disabled=""或disabled="disabled"，但disabled=false仍为禁用。
-
单例模式确保全局唯一实例，如配置对象；观察者模式实现组件解耦通信，通过事件总线通知状态变化；工厂模式统一创建相似对象，按角色生成按钮；装饰器模式动态扩展功能，如为方法添加日志和性能监控。
-
闭包不直接提供调用链路可视化，但通过状态封装、上下文捕获和链式组织为诊断中心奠基；其核心作用是让业务操作自带可追溯元信息，可视化由外部工具完成。
-
用CSSGrid搭响应式仪表板骨架应优先使用grid-template-areas语义化定义区域，配合grid-area实现清晰布局；移动端通过媒体查询覆盖为单列；卡片等高靠flex-column+flex:1+min-height:0+margin-top:auto；图表容器需显式设宽高；深色模式用分层CSS变量管理颜色。
-
最常用方式是通过<link>引入CDN版Icon集，需确保URL正确且加载顺序在使用图标前；本地引入需注意路径与MIME类型；Iconify则通过API动态加载SVG图标。
-
直接修改element.style只影响行内样式，无法覆盖CSS文件或style块中的规则（除非无!important且优先级更低）；需用驼峰命名、带单位赋值；读取时仅返回行内值，查最终样式须用getComputedStyle。
-
使用[attr$="val"]选择器可匹配属性值以指定字符串结尾的元素，如a[href$=".pdf"]{color:red;}使PDF链接变红加粗，[class$="btn"]仅匹配class属性值整体以btn结尾的元素，需注意大小写敏感及多类名限制。
-
DOM操作核心在于节点关系与执行时机：脚本需在DOM就绪后执行，innerHTML是赋值非追加，removeChild需确保节点存在且为直属子节点，style仅操作内联样式，节点存在性与引用管理是关键。
-
ruby必须与rt、rb成对嵌套使用，缺一不可；正确结构为<ruby><rb>字</rb><rt>音</rt><rp>(</rp><rp>)</rp></ruby>，rp保障降级兼容，CSS仅能调节字体大小与行高。
-
IntersectionObserverAPI通过异步监听元素与视口的交叉状态实现图片懒加载，避免频繁计算性能损耗。1.设置data-src存储真实图片地址；2.创建IntersectionObserver实例，回调中判断entry.isIntersecting；3.将data-src赋值给src触发加载；4.可选配置rootMargin提前加载。示例：{rootMargin:'100px'}使图片提前100px加载，提升用户体验。
-
HTML图标实现有四种主流方案：一、图标字体（如FontAwesome），通过CSS调用Unicode码点；二、内联SVG，直接嵌入HTML并用CSS控制；三、SVGsprite，集中管理多图标并按需引用；四、CSS伪元素+SVG数据URI，避免额外请求。
-
HTML页面内存占用主要由资源加载、JavaScript运行、DOM节点和渲染行为决定；全局变量和window对象易致泄漏，因未清理的引用会阻止垃圾回收；应使用WeakMap/WeakRef、显式清理定时器与监听器、避免闭包捕获大对象；innerHTML批量插入比document.createElement+DocumentFragment内存开销更大；ChromeDevTools需用堆快照和分配采样定位问题，而非仅看任务管理器内存数值。
-
HTML中应使用两个语义化并排的input框：卡号用inputmode="numeric"、pattern="[0-9]*"，PIN用type="password"、inputmode="text"；外层用<divrole="group"aria-label="礼品卡信息">包裹，确保tabindex顺序、无障碍识别与移动端键盘适配。
-
HTML修改后断点失效的主因是DOM状态与JS执行时机不匹配：如DOM未加载完就查询元素、框架动态渲染导致源码映射断裂、未启用sourcemap或HMR失效，致使断点位置无法执行或无法映射。
