-
touchstart/touchmove/touchend需调用preventDefault()才能持续触发，否则浏览器优先执行原生滚动；应仅在目标容器绑定事件，touchstart阶段判断手势意图再阻止默认行为；多点触控须用targetTouches计算中心点和缩放比；CSStransform需配合will-change和translate3d启用硬件加速；调试需用ChromeSensors模拟触摸并启用移动设备模式；务必处理touchcancel以重置状态。
-
直接在HTML中用<style>标签写CSS最省事，适合快速验证样式；也可用JS动态插入或在开发者工具中实时编辑；但仅限调试，避免污染生产代码。
-
AppCache已被所有主流浏览器废弃，唯一可行的离线方案是ServiceWorker+CacheAPI；因其存在更新不可控、全站故障、不支持请求拦截等根本缺陷，W3C于2018年将其标记为obsolete。
-
函数式编程在JavaScript中通过纯函数、不可变数据和高阶函数提升代码可读性与可靠性。使用纯函数确保输入输出一致，避免副作用；采用扩展运算符或map、filter等方法维护数据不可变性；利用高阶函数如compose实现逻辑组合；结合柯里化与生成器支持惰性求值，增强复用性与性能。
-
ShadowDOM通过隔离DOM子树实现样式封装，内部样式不泄露、外部样式不穿透；推荐内联<style>，慎用!important和全局选择器，善用:host、::slotted和CSS自定义属性实现可控定制。
-
必须由用户手势（如点击）触发navigator.mediaDevices.getUserMedia()，否则Chrome会因安全策略拒绝调用并报NotAllowedError；需HTTPS（或localhost）、正确绑定video.srcObject、检查设备可用性并前置权限判断。
-
HTML标签未闭合或嵌套错位会导致浏览器自动纠错，使DOM结构与源码不一致，引发布局错乱、样式失效、JS获取元素失败；应通过开发者工具Elements面板查看真实DOM、编辑器插件辅助、W3C校验器验证来排查修正。
-
HTML中空格被合并是规范行为，应使用CSS的white-space属性控制空白显示，而非依赖 等实体或空格字符。
-
优酷不支持官方双开，所谓“双开”依赖第三方工具或系统分身；“关闭HTML5”概念错误，因HTML5是网页标准而非可开关功能，实际只能限制其自动播放、嵌入行为或绕过播放逻辑。
-
本文详解如何使用XPath基于前置文本内容精准选取紧邻的<p>元素，解决无HTML控制权场景下的动态定位难题，并提供健壮、可复用的表达式及关键注意事项。
-
实现卡片阴影渐变过渡需结合box-shadow与transition属性。1.构建基础卡片结构：使用div元素创建.card类容器；2.设置默认样式与过渡效果：定义card的尺寸、背景、圆角及初始阴影box-shadow:04px10pxrgba(0,0,0,0.1)，并通过transition:box-shadow0.3sease设定平滑动画；3.添加悬停增强效果：在.card:hover中修改box-shadow为012px24pxrgba(0,0,0,0.18)，增加偏移与模糊半径以模拟浮起感；4.
-
推荐使用transform+transition实现元素平滑移动，因性能更高、动画更流畅。首先通过position定位元素，再用transform:translate(x,y)进行位移，并配合transition设置过渡效果。相比直接修改top/left触发重排的方式，transform由GPU加速，避免页面重绘，尤其适合频繁动画和移动端。例如.movable{position:relative;transition:transform0.4scubic-bezier(0.25,0.8,0.25,1);}
-
float导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；需通过clearfix类（含*zoom:1、display:table和clear:both）或空元素清除法解决，但后者存在语义污染等问题。
-
width/height过渡卡顿因触发布局重排且无法GPU加速；transform:scale()仅重绘、支持硬件加速，更流畅。
-
多列布局列间距不均主因是gap与margin混用或未重置默认样式；CSSColumns需用column-gap而非gap，Grid/Flex可用gap；首尾不齐应加padding平衡；兼容旧浏览器时可用:not(:last-child)配margin模拟。
