-
JavaScript表单验证前端仅辅助体验，后端强制验证才有效；onsubmit绑定需确保是submit事件而非click，preventDefault()仅在失败时调用；checkValidity()和reportValidity()局限明显，复杂规则须自定义；验证时机应分层：blur验格式、input轻量标记、submit统一对异步等场景处理。
-
可在HTML5中用<strong>（语义加粗）、<b>（纯视觉加粗）或CSSfont-weight（精细控制）实现文字加粗，优先推荐语义化标签，并避免使用已废弃的<font>标签。
-
iOS上DeviceOrientation不准的主因是未开启“MotionCalibration&Distance”系统服务，而非陀螺仪硬件故障；该服务默认常关闭，需手动启用，并配合平放静止、缓慢旋转等动作诱导系统重融合，且CIT校准后须重启Safari才生效。
-
drop事件未触发的根本原因是dragover默认被浏览器阻止，必须在dragover回调中调用event.preventDefault()；需用Array.from转换dataTransfer.files为数组，校验应结合name后缀与type，跨iframe或ShadowDOM需分别在对应上下文绑定事件。
-
MutationObserver是监听DOM变化的高效方案，可精准捕获属性、文本、节点增删等变化。通过实例化并配置childList、attributes、characterData、subtree等选项，指定目标节点开始监听；需监听文本变化时启用characterData与characterDataOldValue；使用observer.disconnect()停止监听以避免内存泄漏，结合takeRecords()处理未完成记录，适用于组件卸载等场景。
-
Vite需手动安装sass/less等预处理器包并配置css.preprocessorOptions，全局变量用additionalData注入，全局CSS需显式import，构建时CSS顺序问题需统一入口SCSS文件。
-
::after伪元素本身不真正清除浮动，而是通过content:""创建占位块并配合clear:both强制下压，使父容器包裹浮动子项；真正起作用的是clear属性。
-
跨页面传数据需依场景选择机制：iframe用postMessage（父发子收，校验origin/source）；同源标签页用BroadcastChannel或localStorage+storage事件；跳转用URL参数、sessionStorage或history.pushState。
-
HTML5页面只需DOCTYPE声明及html、head、body基本结构；关键在于metacharset、viewport、title等标签的正确配置，而非所谓“框架”。
-
应避免在循环中重复计算数组长度、滥用事件监听器、用try...catch包裹高频代码：需缓存length、用事件委托替代单元素绑定、移除非必要try...catch以提升V8性能。
-
使用transform和animation可实现高性能平滑平移动画。1.translate()位移不触发重排，优于left/margin；2.@keyframes定义动画关键帧，支持from/to或百分比；3.animation属性绑定动画，设置时长、缓动、循环等；4.示例中alternate实现往返移动。推荐用于按钮、加载、轮播等场景。
-
按钮点击后文字消失但loader不显示，根本原因是DOM渲染与CSSdisplay切换不同步；应改用CSS类控制可见性、确保loader为按钮子元素且正确对齐，并通过disabled属性防重复提交。
-
JavaScript继承无统一标准，ES6class+extends最常用且推荐；手动原型链适用于老环境；组合继承最稳妥但有冗余；应优先考虑组合而非过度继承。
-
:disabled伪类仅匹配原生表单控件的disabled属性，不支持div等非表单元素或aria-disabled；需用class模拟非表单禁用，并配合tabindex="-1"和aria-disabled="true"保障可访问性。
-
<p>推荐使用box-sizing:border-box，因为它使元素宽高符合视觉直觉——设置width:300px即实际占用300px水平空间，避免padding和border导致宽度意外增加、溢出或布局错位，且一行*{box-sizing:border-box;}即可全局生效。</p>
