-
HTML中不能直接标注热度数据，必须使用data-前缀的自定义属性（如data-views="248"）存储数值，供JS读取或工具解析；搜索引擎不索引data-*内容，SEO需依赖JSON-LD等结构化数据。
-
Flexbox通过flex-grow、flex-shrink和flex-basis控制子元素伸缩行为，实现响应式布局：flex:1常用于均分空间，结合媒体查询可调整不同屏幕下的布局表现，如等宽分布、固定与自适应组合、移动端堆叠等；需注意父容器设display:flex，避免width与flex-basis冲突，并用min-width防止内容重叠，提升布局灵活性。
-
<p>能，但需正确使用HTML属性作为JS交互契约：data-*提供安全钩子；disabled/checked等布尔属性须区分attribute与property；formaction等可减少冗余JS绑定。</p>
-
不可变数据结构指创建后无法修改的数据，其核心优势包括避免副作用、简化状态管理、提升代码可预测性与调试效率，并支持函数式编程。在JavaScript中，直接修改对象可能导致意外变更，而通过扩展运算符等技术实现不可变更新，则能保留原始数据完整性。例如，使用{...obj}创建新对象而非修改原对象，确保状态变化可追踪。在React和Redux中，不可变性使浅比较有效，优化渲染性能。尽管频繁生成新对象可能带来性能开销，但结构共享（如Immer或Immutable.js）可缓解此问题。总体而言，不可变性增强了程序的
-
HTML5本身不提供高斯模糊原生API，需依赖CSSfilter:blur()（快捷但粒度粗、近似模拟）或Canvas手动实现（可控但开销大），二者均受限于性能、跨域、精度与导出质量。
-
深层嵌套DOM拖慢渲染，因样式计算、布局开销倍增，CSS选择器匹配变慢，冗余wrapper增加DOM节点与内存负担；应优先用CSS实现布局效果、slot/属性替代逻辑嵌套、DocumentFragment批量插入来扁平化结构。
-
使用CSS的scroll-behavior:smooth可实现全局平滑滚动，JavaScript则通过scrollIntoView或scrollTo方法精确控制滚动行为，适配复杂交互。
-
steps()动画不能直接用CSS变量控制，因为浏览器无法在animation-timing-function的函数参数中解析var()为有效数值，导致退化为ease或失效；需通过@property（Chrome103+/Safari16.4+）间接调控或JS动态重写animation字符串实现真正动态调速。
-
HTML中输入真正空格需用 （不间断空格）或CSS的white-space:pre-wrap属性，前者适合单个空格控制，后者能完整保留空格、换行和制表符并允许折行。
-
history.scrollRestoration='manual'用于禁用浏览器在前进/后退和刷新时自动恢复滚动位置，默认为'auto'；设为'manual'后需配合beforeunload和pageshow事件手动调用scrollTo(0,0)确保置顶。
-
断点失效主因是视口宽度≠设备物理宽度，须配<metaname="viewport"content="width=device-width,initial-scale=1">；推荐移动优先用min-width；媒体查询禁用em/rem断点；JS检测宽应以CSS类名为唯一事实源。
-
子菜单撑不开父容器的根本原因是父级flex容器默认flex-shrink:1且子菜单无明确尺寸；解决需设.menu-item为relative定位，.submenu显式设min-width或width，并按布局需求配置flex-wrap或flex-direction。
-
Vue3的<scriptsetup>中，useRouter和useStore（Pinia/Vuex）可直接调用实现路由与状态管理；useRouter用于导航和获取路由实例，当前路由需用useRoute；Pinia的useStore返回响应式store，Vuex的useStore需配合computed保持响应式。
-
HTMLPWA与原生App是平行技术路径，无法自动兼容或打通；ServiceWorker仅作用于WebView内请求，不劫持原生网络栈，需桥接实现缓存共享与权限调用。
-
函数声明和函数表达式最核心区别在于提升行为与语法位置约束：前者全量提升且只能出现在顶层或函数体，后者仅变量名提升、可置于任意表达式位置，并支持命名但名称仅内部有效。
