-
<kbd>必须拆开写、不能监听、默认样式不可靠——三点缺一不可。组合键需多个<kbd>标签外加分隔符，修饰键须独立包裹；须重置字体、内边距、圆角、背景色；其仅作语义展示，快捷键逻辑须JS手动实现。
-
initial-scale=1失效主因是viewport标签未在<head>最开头声明、被重复或动态插入覆盖、或内容溢出撑开视口；必须写width=device-width,initial-scale=1.0，且置于所有其他meta和title之前。
-
纯CSS深度按钮靠多层linear-gradient叠加实现明暗错觉：第一层tobottom垂直高光渐变，第二层toright水平阴影渐变，顺序不可颠倒，用background-size/position精准控光效；stop-color是SVG属性，CSS中应写#fff0%；:active时位移各层background-position增强按压感；IE11等旧环境用@supports降级单层渐变。
-
最常见的现象是SVG<symbol>定义了、<use>也写了但页面空白，根本原因是<use>的href必须指向同文档内已解析的<symbol>ID，且该<symbol>必须在DOM中提前存在（不能动态插入或藏于未加载的外部文件），ID需严格匹配、区分大小写，<symbol>还必须显式声明viewBox以确保正确缩放和渲染。
-
Vue3的reactive通过Proxy实现响应式，支持深层监听、动态增删属性、数组索引赋值及Map/Set等结构，采用懒代理、依赖收集与触发更新闭环机制。
-
用--radius自定义属性统一管理圆角是最轻量易维护的方式，需全局引用、避免硬编码，并通过calc()或分层变量（如--radius-btn）应对差异化需求，同时注意Safari兼容性及响应式缩放问题。
-
JavaScript动画通过动态修改样式属性实现视觉效果，核心是使用requestAnimationFrame优化渲染，1.利用rAF创建流畅动画，如递归调用step函数控制元素位移；2.实现淡入淡出与缩放，通过逐步调整opacity或transform属性达成基础动效；3.引入缓动函数模拟真实运动，如用数学公式控制减速移动提升自然感；4.支持多元素序列动画与交互响应，可遍历元素并绑定事件实现鼠标触发的节奏化动画。
-
metacharset和http-equiv的顺序会影响浏览器解析吗会，而且影响很实际：如果不在文档前1024字节内，某些旧版IE或移动端WebView可能按默认编码（如ISO-8859-1）解码后续HTML，导致中文乱码或脚本加载失败。实操建议：必须放在最开头，紧随标签之后，前面不能有注释、空格或任何其他标签等兼容性声明可以放它后面，但不要前置避免用http-equiv="Content-Type"替代charset——它已被废弃，且不被所有
-
createContextualFragment是Range对象的方法，用于安全高效解析HTML字符串为DocumentFragment，不执行脚本、不触发回流；须通过document.createRange()调用，返回未挂载的轻量片段，支持多节点插入。
-
SVG路径无法用CSS定位是因为其坐标系与CSS盒模型分离，需对<svg>外层容器定位而非<path>；装饰器贴合需同步坐标系与宿主边界；absolute定位后点击失效需设pointer-events和z-index；CSS仅安全动画stroke属性，d属性不支持过渡。
-
SSR的核心是在Node.js中执行组件并生成带数据的HTML字符串，而非直接返回静态index.html；必须包含组件执行、数据注入、HTML合成三环节，且需规避浏览器API、保证同构、严格对齐客户端水合。
-
position:absolute容易让数字提示“飘走”是因为未给父容器设position:relative，导致绝对定位元素向上回溯至body定位；需确保头像外层容器设relative，数字元素用absolute配合top/right或transform微调，并注意overflow和z-index影响。
-
变量提升是JavaScript中var声明被提升并初始化为undefined，而let/const声明虽被提升但不初始化，访问会触发ReferenceError，该区域称暂时性死区（TDZ）。
-
正则表达式可通过捕获组与反向引用（如(.))\1{3,}）识别连续重复字符以拦截垃圾输入，但不支持全局频率统计；需限定字符类型、前后处理空格，并在服务端复核。
-
flex-direction在媒体查询中失效的主因是父容器未声明display:flex，或@media未正确作用于目标元素；需基础样式设column，再用min-width断点切row，并同步处理order值。
