-
使用text-transform:capitalize可实现每个单词首字母大写，如HelloWorld；用uppercase可全转大写，如WELCOME；通过p::first-letter{text-transform:uppercase;}仅首字母大写，如Helloworld。
-
图片悬停放大应使用transform:scale()而非width/height，避免重排、实现GPU加速；需设display:block、transition写在常态、合理设置transform-origin和overflow:hidden，并注意高清源图与高DPI兼容性。
-
一维布局用Flex，二维布局用Grid，混合使用最合理：Flex处理行或列内对齐，Grid划分行列交叉结构，二者分层协作可提升可维护性与兼容性。
-
localStorage和sessionStorage只能存储字符串，存对象需JSON.stringify()、读取需JSON.parse()并加try/catch防错，二者API相同但生命周期不同：localStorage持久化，sessionStorage仅限当前标签页。
-
HTML中普通空格不影响加载速度，解析器会自动合并空白字符；真正拖慢性能的是冗余缩进、未压缩脚本、滥用 及服务端模板低效输出。
-
video标签需用source多格式fallback（如mp4+webm）并设muted、playsinline才能移动端自动播放；poster失效常因路径错、尺寸不匹配或MIME类型错误；play()须在用户手势中调用且处理跨域与Promise异常。
-
边框闪烁主因是transition未覆盖border所有子属性或box-model突变；须同时过渡border-width、border-style、border-color，禁用none而用transparent+0宽度，并配合box-sizing:border-box或box-shadow避免重排。
-
<link>放在<head>仍会闪屏，因CSS加载延迟（如@import嵌套、网络慢、动态插入）导致FOUC；需内联关键样式、异步加载非关键样式，并配置font-display:swap等优化字体加载。
-
JavaScript数组高级操作核心是正确使用map、filter、reduce：reduce需严格匹配accumulator类型与初始值；map用于生成新数组，forEach仅用于副作用；filter须防御null/undefined；所有操作前应明确输入输出类型及边界情况。
-
判断JavaScript对象是否为空可以使用以下两种方法：1.isEmpty(obj)：使用Object.keys(obj).length===0，适用于需要简洁和可读性的场景。2.isEmptyFast(obj)：使用for...in循环和hasOwnProperty，适用于需要高性能和处理大型对象的场景。这两种方法各有优劣，选择时需考虑具体需求和性能。
-
Chrome和Edge强制将小于12px的font-size提升至12px以保障可访问性，Firefox无此限制但受用户级最小字号设置影响；可通过transform:scale()、SVG文字或图片替代等方法绕过，需注意布局补偿与兼容性。
-
Word不支持HTML渲染，<img>标签粘贴后仅显示为文本或空白；仅部分新版桌面版可通过剪贴板富文本协议解析Base64图片（≤2MB），Web版完全忽略HTML图片标签。
-
使用WebComponents可实现HTML组件化开发。1.通过CustomElements创建自定义标签如<user-card>，结合ShadowDOM隔离样式与结构；2.利用<template>定义可复用模板，配合JavaScript动态渲染；3.使用JS加载外部HTML片段实现静态复用；4.支持属性传值与Slot插槽进行内容分发。该方案无需框架依赖，适合轻量化项目。
-
使用Flexbox可高效实现复杂导航布局，尤其适用于响应式设计。通过设置nav为display:flex，可灵活控制对齐、方向与空间分配，轻松构建含多级菜单、居中标志及两侧按钮的导航结构。
-
JavaScript水印需动态创建透明覆盖层并多重防护：Canvas绘制防DOM删除，MutationObserver监听恢复，多实例+动态内容增强鲁棒性，调试干扰提升分析成本，本质是溯源威慑而非绝对安全。
