-
小屏段落密集需用媒体查询优化：屏幕≤768px时设line-height为1.8、margin-bottom为1.4rem，字号不低于16px，慎用letter-spacing负值，添加max-width控制行长。
-
opacity动画需配合transition才能平滑，仅改opacity值无效；推荐transition:opacity0.3sease并置于初始类中，避免用all；@keyframes适用于精细控制但需加forwards；opacity=0仍可交互，应配pointer-events:none和visibility:hidden；组合transform可提升性能。
-
loop属性用于实现视频自动循环播放，只需在video标签中添加loop即可；常与autoplay、muted和controls配合使用，适用于背景视频等场景；需注意浏览器兼容性、移动端限制及性能影响；也可通过JavaScript监听ended事件实现更灵活的循环控制。
-
移动端Grid列数不对因repeat(3,1fr)不响应容器宽度，应改用repeat(auto-fit,minmax(280px,1fr)))；gap失效多因Safari旧版兼容性或overflow:hidden裁剪；卡片高度不一致需设align-items:start和min-height；断点推荐min-width而非max-width，优先用containerqueries。
-
@import可用于引入CSS文件并支持媒体查询，但会阻塞渲染、串行加载且不利缓存，建议优先使用link标签或构建工具优化性能。
-
HTML5搜索框提示可通过四种方式实现：一、用title属性最简；二、用data-tooltip加CSS自定义样式；三、用JavaScript动态控制显示隐藏；四、用aria-label和aria-describedby增强无障碍支持。
-
webkit-playsinline是iOS10前私有属性，playsinline是标准属性，需同时设置才能兼容各版本；未静音、无用户交互、CSS变换、编码不支持等会导致内联失效；禁用全屏需监听webkitbeginfullscreen和fullscreenchange并调用对应退出方法。
-
批量提交多个表单数据可通过三种方式实现：一是使用JavaScript收集各表单数据并合并为FormData对象，通过fetch统一发送；二是将多个表单合并为一个大表单，直接提交避免嵌套；三是通过AJAX逐个异步提交各表单，利用Promise.all统一处理结果。选择方案需根据页面结构和业务需求权衡灵活性与复杂度。
-
柯里化是将多参函数转换为单参函数链的技术，核心在于分步传参而非一次性传递；它改变调用节奏但不改变逻辑，需手动实现或使用Lodash等库以应对占位符、rest参数等复杂场景。
-
Date对象是JavaScript处理时间的核心工具，基于Unix时间戳，支持本地和UTC时间操作，提供创建、读取、设置及格式化日期时间的多种方法。
-
JavaScript内存泄漏检测主要靠ChromeDevTools的Memory和Performance面板配合人工分析，核心是“对比变化、定位异常、追溯引用”，常见于未解绑事件监听器、未清除定时器、意外全局变量、闭包长期持有大对象、DOM被JS强引用五类高频场景。
-
rem布局本质是动态设置html根元素font-size，需JS监听DOM加载和屏幕变化实时计算并更新；须禁用用户缩放、避免CSS覆盖、用PostCSS自动转换px为rem，并统一flex属性单位。
-
video元素默认控制条无法换肤，必须禁用原生controls属性，通过HTML+CSS绘制控件并用JavaScript绑定播放、暂停、进度拖动等行为，同时注意跨浏览器兼容性与移动端交互细节。
-
苹果设备HTML5开发需兼顾Safari调试与XcodeWebView集成：一、启用SafariWebInspector远程调试iOS页面；二、Xcode中用WKWebView加载本地/远程HTML资源并调试；三、优化viewport、媒体内联播放、触摸事件及Webkit特性适配。
-
宽屏下内容太散的根本原因是容器默认随视口拉伸导致阅读动线过长；解决方法是用max-width限制主体宽度（如1024px）并配合margin:0auto居中，小屏不设、大屏分级控制，避免父容器flex/absolute/高优先级width干扰。
