-
微信AndroidX5内核主动限制密码框focus事件，需避免自动聚焦、显式设置inputmode="text"、固定height并用flex布局、按钮用button标签且z-index>1，遵循X5特有规则而非标准浏览器逻辑。
-
后代选择器“抓太多”因匹配任意嵌套层级的元素；应优先用子选择器>限定直接子级，再结合语义化类名（如.card>.card-title）实现精准控制。
-
HTML5对移动端适配更强，因其原生支持viewport、flexbox/grid及媒体查询等响应式底层能力；而HTML4/XHTML需外部补丁，且在非HTML5doctype下viewport常失效、flex/Grid错位、媒体查询基准错误。
-
HTML可在嵌入式设备上通过三种方式实现轻量级UI：一、用lighttpd等微型Web服务器部署HTML文件；二、在Linux/RTOS中用WebView组件加载本地HTML并双向通信；三、在MCU上用Duktape等JS引擎解析HTML片段直驱硬件。
-
本文介绍如何遍历JavaScript对象，精准筛选出值等于目标值的键值对，并将其以对象形式收集到新数组中，避免常见误操作（如错误地推入整个对象）。
-
Symbol是JavaScript中唯一且不可枚举的键类型，用于防冲突和隐匿属性；Symbol()每次返回新值，Symbol.for()实现全局共享；Symbol属性不参与for...in、Object.keys()或JSON.stringify()。
-
优先使用原生loading属性实现图片懒加载，现代浏览器中只需添加loading="lazy"即可；对于旧浏览器则降级采用IntersectionObserverAPI监听视口，避免频繁scroll事件导致的性能问题；通过预加载、低质量占位图和CSS过渡优化视觉体验，减少空白感；将懒加载逻辑封装为模块化组件，支持按需引入与配置扩展，兼顾兼容性、性能与用户体验，形成完整的懒加载解决方案。
-
HTML表单本身不支持分页，必须靠后端或JavaScript控制HTML只是数据容器和提交通道，没有内置分页逻辑。所谓“表单分页”，实际是把一个长表单拆成多步，每次只展示部分字段，用户点击“下一步”才加载/显示下一部分——这本质是UI状态管理，不是HTML自带能力。常见错误现象：TypeError:Cannotreadproperty'next'ofundefined（JS分页逻辑没初始化好）、表单提交后只拿到最后一步的数据（没合并各步input值）、回退时输入内容
-
flex-direction:column不能实现瀑布流，因其子项垂直堆叠、无法回填空白，且flex-wrap在column下无效；纯CSS瀑布流唯一可靠方案是columns属性。
-
掌握JavaScript需循序渐进：1.夯实基础语法，包括变量、函数、DOM操作；2.深入执行上下文、闭包、原型链等运行机制；3.熟练ES6+语法与模块化；4.学习主流框架与工程化工具；5.攻克设计模式、源码实现与性能优化，结合实战持续提升。
-
本文详解background-image动态修改导致CSStransition失效的根本原因，并提供无需@keyframes的纯CSS+JS清洁方案，确保按钮在状态切换（如播放/暂停）时，背景色与旋转动画均能平滑过渡。
-
根本原因是transform、opacity等属性触发合成并创建新层叠上下文，使子元素z-index仅在内部生效；修复方式是给父容器添加transform:translateZ(0)或will-change:transform以创建更高阶层叠上下文。
-
text-stroke无效果因非标准属性，须用-webkit-text-stroke（Chrome/Safari/新版Edge支持，Firefox完全不支持）；需配合-webkit-text-fill-color:transparent显形，宽度只认px等绝对单位，多色依赖CSS变量或JS动态设置；text-shadow可模拟多色描边但性能开销大。
-
用display:flex实现响应式导航栏核心是断点控制与可访问性保留：主容器设flex，子项用flex:11auto并加min-width:0；移动端用aria-controls和role="menu"配合JS焦点管理，避免display:none或transform隐藏。
-
注入数据找不到来源的根本原因是provide未在inject组件的同步祖先链中正确执行。需检查provide是否被条件逻辑跳过、是否在异步钩子中调用、组件是否被Teleport或高阶封装断开继承链、key是否大小写/符号一致、Symbol是否共享，以及inject是否在setup中正确调用并确保响应性。
