-
本文详解为何在监听表单submit事件时直接读取form.value会返回undefined，并提供正确获取输入值的方法、完整可运行代码及关键注意事项。
-
使用order属性可改变Flex子元素显示顺序，数值小的优先排列，结合flex-direction可调整主轴方向，常用于响应式布局中不改变DOM结构的情况下调整视觉顺序。
-
调用setCustomValidity('错误信息')后必须配合reportValidity()或表单submit才触发原生红色气泡提示；传空字符串可清除错误；需结合:invalid:user-invalid控制样式，且确保用户已交互。
-
用object-fit:cover可强制图片等比缩放并填满容器，多余部分裁剪；需配合明确宽高和overflow:hidden，IE不支持。
-
使用HTML5的video标签可实现网页视频播放，支持controls控制、多格式兼容（MP4/WebM/Ogg）、autoplay静音自动播放、loop循环及JavaScript动态控制播放状态，推荐preload="metadata"优化加载，避免移动端自动播放大文件以提升体验。
-
@import不会直接拖慢首屏但默认阻塞串行加载，实际性能更差；PostCSS+postcss-import是最稳妥的静态切分方式；真按需加载需JS动态导入+样式注入；CSSModules仅解决作用域而非物理分离。
-
使用线性渐变结合background-position动画实现颜色流动；2.通过伪元素叠加与opacity过渡模拟渐变色变化；3.利用transform旋转或缩放伪元素创造动态遮罩效果。
-
应使用linear-gradient：金属质感需高光、过渡带、暗部三段式明暗变化，linear-gradient可精准控制方向与色标分布，模拟拉丝或冷轧效果；conic-gradient仅适用于旋转对称部件如螺丝头。
-
HTML的time元素不解析毫秒级时间戳，datetime属性仅接受ISO8601格式（如"2024-05-30T00:00:00Z"），需用newDate(timestamp).toISOString()手动转换，否则语义失效、辅助技术无法识别。
-
应使用<metaname="viewport"content="width=device-width,initial-scale=1.0">控制初始渲染，避免强制锁死缩放；禁用user-scalable=no和maximum-scale以保障可访问性；优先采用rem、clamp()等响应式字体方案替代zoom或transform:scale()。
-
URLAPI是浏览器和Node.js（v10.0.0+）原生支持的标准URL解析工具，需传入绝对URL或配合base参数使用；其属性只读，query操作应通过URLSearchParams，修改路径或协议须新建实例，并注意对不可信输入做try/catch和协议校验。
-
基础文本框应写为<inputtype="text"name="xxx"id="xxx">并配<labelfor="xxx">；value属性设初始值，.value读写运行时值；无name不提交，disabled不提交而readonly可提交。
-
延迟加载CSS可通过JavaScript动态控制样式表加载时机。1.动态创建link元素，页面加载完成后引入非关键CSS；2.结合用户行为或定时器延迟加载，如滚动或3秒后加载；3.使用rel="preload"预加载资源，再切换为stylesheet以优化优先级。需确保仅延迟非关键CSS，避免布局偏移，并注意浏览器兼容性。核心是通过JS按需插入link标签实现。
-
ArrayBuffer是二进制数据存储容器，需通过类型化数组或DataView读写；类型化数组以固定格式解释数据，适合高效操作；DataView支持指定字节序，适用于跨平台数据处理。
-
本文详解useState在API调用后看似“不更新”的根本原因，通过useEffect监听状态变化、确保路由跳转时机正确，并安全地将数据传递至Context消费组件，避免因状态滞后导致的渲染错误或undefined访问。
