-
本文详解如何通过维护当前索引、重构数据结构与分离关注点，实现宝可梦图鉴中按需渲染单个条目（如初始显示妙蛙种子），而非一次性显示全部数据。
-
用div创建宽高盒子需同时设置width和height，并推荐添加background-color确认显示；常见不显示原因包括父容器无高度、display被修改、CSS权重不足、overflow裁剪等。
-
100vh在iOSSafari中“不够高”是因为其基于初始布局视口且不响应地址栏动态变化；应优先使用height:env(height)并fallback到-webkit-fill-available和100vh，复杂场景需JS监听visualViewport实时同步。
-
og:image必须在HTML的<head>中、<title>之后且<linkrel="canonical">之前硬编码为HTTPS绝对路径，配合显式宽高声明，并通过SSR动态生成，否则社交平台爬虫无法识别。
-
wbr是仅在容器宽度不足且CSS允许折行时才生效的语义断点标记，须插在URL斜杠后、驼峰大写字母前等逻辑分隔处，并配合max-width、overflow-wrap:break-word和white-space:normal才有效。
-
HTML无法真正加密文本，所有“HTML加密工具”实为前端JS实现的简单编码或混淆，密钥硬编码在页面中，开发者工具可直接查看，完全不安全。
-
路由跳转内存泄漏核心在于组件未真实卸载或资源未释放：一是框架复用组件导致生命周期钩子未触发，二是全局监听、定时器、订阅等外部引用未清理，需通过钩子打点和浏览器工具双重验证。
-
HTML表单通过form和input标签实现用户交互，使用action和method属性指定提交地址与方式，结合type类型与label标签可创建登录、注册等功能，合理设置required、name等属性提升可用性与数据准确性。
-
<kbd>标签用于语义化表示用户键盘输入，正确用法是将每个按键拆分为独立<kbd>元素并用文本连接（如<kbd>Ctrl</kbd><span>+</span><kbd>V</kbd>），避免<kbd>Ctrl+V</kbd>式嵌套；需CSS定制样式以模拟物理按键，并注意跨平台差异与使用边界。
-
CSSanimation与transform结合可实现高效流畅的动画效果。transform负责定义元素的形变方式（如位移、旋转、缩放），而animation控制动画的时间线（如持续时间、缓动曲线、重复次数）。通过将transform写入@keyframes中，由animation调度执行，既能利用GPU硬件加速提升性能，又能实现复杂动画逻辑。相比直接修改left、top等触发重排的属性，仅动画transform和opacity可避免频繁的布局重绘，显著提升渲染效率。实际开发中应避免动画非合成属性，合理使
-
JavaScript事件循环无法直接暂停观察，但可通过实验和工具推断其运行。1.利用console.log对比setTimeout、Promise.then、queueMicrotask等异步任务的执行顺序，可识别宏任务与微任务的优先级差异；2.使用浏览器开发者工具的Performance面板录制主线程活动，可视化事件循环调度结果；3.理解异步API在事件循环中的归属，如Promise属于微任务，setTimeout属于宏任务；4.在Node.js中，process.nextTick优先于微任务，setI
-
可通过window.matchMedia监听prefers-color-scheme实时切换主题：获取MediaQueryList对象，用.matches判断当前模式，addEventListener('change')响应系统变更，并首次加载及回调中同步更新DOM类名或CSS变量。
-
用rem+viewport缩放控制最稳妥，但必须禁用text-size-adjust，否则iOSSafari会强行放大小字号文本；根本原因是系统「可读性缩放」和浏览器对viewport解析差异，导致手机和平板文字表现不一致。
-
JavaScript不直接实现响应式设计，主要靠CSS完成；但可通过监听resize、matchMedia、按需加载资源及补足交互逻辑来增强响应行为，优先用CSS，JS仅作辅助。
-
YouTube官方嵌入代码因含临时参数（如?si=...）可能导致iframe无法加载视频，移除URL中的非标准查询参数并精简allow属性即可快速修复。YouTube官方嵌入代码因含临时参数（如`?si=...`）可能导致iframe无法加载视频，移除URL中的非标准查询参数并精简allow属性即可快速修复。在网页中嵌入YouTube视频时，直接复制YouTube分享面板中的“嵌入”代码看似可靠，但实际常因URL
