-
coords属性单位仅为像素，需按图像原始尺寸设定，不支持CSS单位或负数；shape决定coords格式：rect为“x1,y1,x2,y2”，circle为“x,y,r”，poly为“x1,y1,x2,y2,...”；错位常因CSS缩放未换算坐标或usemap不匹配导致。
-
安全使用env()需启用viewport-fit=cover元标签，配合calc()和max()/min()回退，优先适配top/bottom，安卓左右值不可靠，真机验证必不可少。
-
二级菜单错位的根本原因是position:absolute的定位基准错误，应给一级菜单项设position:relative作为锚点，并确保HTML嵌套正确、避免overflow隐藏和transform干扰，桌面端用@media(hover:hover)隔离hover，移动端必须用JS控制。
-
HTML中实现内容折叠最简单的方法是使用<details>和<summary>标签，无需JavaScript即可原生支持展开/收起，语义清晰、键盘可访问且屏幕阅读器友好；若需平滑动画，则用max-height配合transition，避免使用不可过渡的display属性。
-
hover:-translate-y-1需显式加transition-transform才生效，否则无动画；推荐组合transition-transformduration-300ease-out；阴影应自定义分层控制，避免shadow-xl发灰；布局错位时优先用scale或top替代translate；移动端须用focus-within或active降级。
-
HTML测试需分层验证语法、结构、语义、行为与可访问性，须组合W3C校验器（粘贴代码更准）、HTMLHint（需正确配置）、ChromeDevTools（查真实DOM）、Lighthouse（验lang等标准）等工具协同判断。
-
首先将图像绘制到canvas，通过getImageData获取像素数据，遍历修改RGBA值实现灰度、反色、亮度调节等效果，再用putImageData写回；需注意跨域限制和数组边界处理。
-
scroll-snap-type不生效最常见的原因是父容器未形成可滚动上下文：既无内容溢出，也未显式设置overflow（如overflow-y:auto）和确定的视口尺寸（如height:100vh），仅靠min-height或内容撑开无效；同时需确保scroll-snap-align与滚动方向、子元素盒模型及scroll-padding等严格匹配，否则吸附失败。
-
TrustedTypes不能彻底杜绝DOMXSS，但能从浏览器内核层面强制拦截绝大多数未经策略处理的危险操作，前提是CSP配置正确、策略覆盖完整且不绕过校验。
-
HTML导出不能提升Excel下载，反而导致格式错乱、公式丢失、中文乱码、安全警告等问题；可靠方案是前端用SheetJS生成标准.xlsx文件或后端用openpyxl等库构建二进制流并设置正确MIME类型。
-
HTML原生<textarea>不支持内联样式，无法单独高亮或下划线其中部分文字；正确方案是改用contenteditable="true"的<div>，结合DOM操作动态包裹错误单词并应用CSS样式。
-
flex-flow是flex-direction和flex-wrap的原子性简写，设了它两个属性都会被全量重置而非可选覆盖；必须写全如columnwrap，不可省略任一值，否则未显式指定的会回退到默认值（row/nowrap）。
-
纯CSS可实现DNA双螺旋动画：用--d控制偏移与延迟，transform-style:preserve-3d+perspective启用3D，伪元素镜像旋转（rotateY±360deg）模拟碱基对缠绕。
-
拖拽时需用event.target.closest('[data-project-id]')获取ID，dragover和drop中必须无条件preventDefault()，绑定后须存localStorage并页面加载时恢复。
-
CSRF防护需服务端动态生成、安全传输并严格校验；Token须绑定session、禁复用、禁硬编码，前端须从DOM安全提取并手动携带至AJAX请求头或表单字段。
