-
SublimeText正确识别.html文件需先手动设置语法为HTML（非模板方言），再在Settings–SyntaxSpecific中配置"syntax":"Packages/HTML/HTML.tmLanguage"实现永久关联。
-
transition-timing-function用于控制CSS过渡速度变化，支持ease、linear、ease-in、ease-out、ease-in-out等预设函数，也可通过cubic-bezier()自定义贝塞尔曲线实现弹性或回弹效果，配合steps()可创建分步动画，如数字翻牌，合理使用可提升界面动效的自然度与交互质感。
-
用class切换背景色应将颜色变量抽离到主题类名（如theme-light/theme-dark），通过CSS选择器层级或CSS变量统一控制，避免硬编码和!important；需同步设置HTML根元素class防FOUC，并显式重置表单控件及SVG等所有颜色上下文。
-
计算属性配合正则实现关键词高亮，核心是解耦匹配逻辑与渲染准备：computed返回带标签的安全片段，动态构造RegExp、空关键词防护、replace回调精准包裹、返回新数组不改原始数据，v-html仅用于highlightedTitle等可信字段，需转义用户输入、节流防卡顿、自动缓存，避免直接调方法、split+join及未转义特殊字符等坑。
-
flex-wrap:wrap实现自动换行，需配合flex-basis或width控制子项基础宽度，并注意flex-shrink默认值导致的压缩不换行问题及gap兼容性陷阱。
-
at()方法是ES2022引入的数组原生方法，专为支持负索引而设计，能直接、安全地访问末尾元素，无需手动计算length，且兼容类数组对象和字符串，性能优于slice(-1)[0]。
-
HTMLpopover无“加了就弹”属性，实际是两套不兼容机制：纯HTML属性联动（popovertarget+popover布尔值）与JS调用（showPopover+popover="manual"），需明确选型；控制粒度粗用前者，需精细控制用后者；popover="auto"已弃用；Safari仅支持popovertarget且要求同步渲染；Firefox全不支持；跨浏览器稳定方案仍是<dialog>。
-
复杂JS表达式不破坏语法，但干扰V8静态推断，导致跳过优化、回退解释执行；因嵌套三元、隐式转换、深层可选链、eval/with等使控制流不可预测、类型多态、IC失效、作用域污染。
-
JavaScript哈希路由是利用URL中#后hash值实现SPA导航的机制，不触发页面刷新，通过监听hashchange事件并解析location.hash来渲染对应视图，兼容IE8+且无需服务端配置，但SEO差、URL不美观。
-
transition在:focus/:active中不生效，主因是未声明属性初始值、:active持续时间过短、或使用了不可过渡属性（如visibility、display）；需显式设初始值、用max-height/opacity替代、添加tabindex支持键盘focus，并慎用transition-delay。
-
navigator.clipboard.writeText()报“Permissiondenied”主要因三类原因：一是在页面加载时自动执行（如DOMContentLoaded中调用）；二是运行在HTTP非localhost环境；三是在iframe中调用但未配置sandbox和allow权限。
-
地图标注需通过地图SDK（如高德AMap.Marker、LeafletL.marker）实现，HTML标签无法响应交互；坐标须按平台要求顺序传入（高德/Leaflet为[lat,lng]，百度为[lng,lat]），且必须初始化地图实例后添加标记，同时注意坐标系匹配与HTTPS环境。
-
直接用::before和::after写tooltip易错位，因top/left等定位值未与方向解耦，硬编码导致改方向需手动调所有偏移；正确做法是用Lessmixin封装方向参数，通过条件分支控制transform、margin及border组合，并确保父容器设position:relative。
-
用CSSGrid实现勋章墙需设display:grid、grid-template-columns:repeat(auto-fill,minmax(120px,1fr))、gap:12px；勋章容器用flexcolumn居中内容；遮罩须挂body下并合理设置z-index；动态加载后需强制重排。
-
事件委托高效是因为将多个子元素的事件监听集中到父元素，利用冒泡机制统一处理，节省内存、提升性能，且动态增删子元素时无需重新绑定或解绑。
