-
HTML中实现内容折叠最简单的方法是使用<details>和<summary>标签，无需JavaScript即可原生支持展开/收起，语义清晰、键盘可访问且屏幕阅读器友好；若需平滑动画，则用max-height配合transition，避免使用不可过渡的display属性。
-
最可靠的响应式页码器方案是用@media配合display:none隐藏冗余页码；保留当前页、前后1–2页及首末页，中间页统一加.page-omit类并批量隐藏，省略号需设固定宽高防布局跳动。
-
怎么用data-*属性实现维度切换而不刷新页面靠location.hash或URL参数做切换最省事，但容易和路由冲突；用data-属性配合JS控制更轻量、更可控。关键是把维度状态存在元素上，而不是靠DOM位置或class名硬编码。data-dimension="time"、data-dimension="type"、data-dimension="hot"统一作为触发器的识别依据点击按钮时只改data-active-dimension在容器上的值，不删增class，避免
-
<trackkind="chapters">必须为<video>直接子元素且紧随<source>，仅Chromev70+和Safari16.4+/Ventura13.3+原生支持UI渲染，VTT需严格符合WEBVTT格式、毫秒三位、同源或CORS，Firefox无原生章节菜单。
-
使用clamp()控制vw字体和间距可避免过激响应，如font-size:clamp(1rem,4vw,2.5rem)；line-height应用无单位值（如1.4）以同步缩放；推荐rem+vw混合方案提升兼容性与可控性。
-
flatMap在JavaScript中就是map操作后紧跟flat(1)的结合体，能同时对数组元素进行映射并自动扁平化一层，使代码更简洁且意图更明确。1.它的核心优势在于语义清晰，直接表明“转换+扁平化”的意图；2.性能上优于map().flat()，因避免了中间数组的创建；3.适用于处理嵌套数据提取、生成多条记录、数据过滤与解析等场景；4.需注意它仅扁平化一层，无法处理深层嵌套；5.回调函数必须返回数组，否则非数组返回值会被包装成单元素数组导致潜在错误；6.this上下文需通过箭头函数或thisArg正
-
盒模型是元素固有结构基础，flex布局是在其上定义子元素排列方式；flex项目仍遵循完整盒模型，box-sizing决定尺寸计算逻辑，flex属性仅影响content区拉伸收缩，容器自身也遵守盒模型规则。
-
Fetch请求无法设置User-Agent，因浏览器安全策略禁止JavaScript修改该敏感请求头；可行方案包括后端代理、浏览器扩展或本地工具，而X-Client-Version等自定义头可正常发送。
-
无法真正禁用右键菜单或F12开发者工具，因浏览器原生调试功能运行在JS之上，所有前端拦截（如preventDefault）仅能干扰体验，无法阻止有经验用户绕过；关键安全必须依赖后端校验与加密。
-
usemap属性必须带#前缀且严格匹配<map>的name值，大小写敏感；area的shape和coords需按格式书写；响应式下需JS重算坐标或改用SVG。
-
预加载（preload）是高优先级、立即下载当前导航必需资源，预取（prefetch）是低优先级、空闲时下载未来可能使用的资源；前者提升首屏确定性，后者优化后续交互速度。
-
IE6下float元素的margin双倍计算是其特有渲染缺陷：当float元素某侧边距紧邻父容器边缘时，该边距被错误计算两次；display:inline可临时修复，因触发hasLayout子状态绕过bug路径。
-
使用position:fixed和transition可创建平滑动画的固定弹出框。1.用position:fixed将弹出框固定在视口，配合top、left和transform居中，z-index确保层级，叠加遮罩层；2.通过opacity、visibility和transform设置初始状态，利用transition定义动画效果，添加active类触发动画；3.使用JavaScript切换类名控制显隐，可监听transitionend事件优化移除时机；4.注意避免overflow裁剪、移动端兼容性问题，
-
用minmax()与auto-fit组合实现列数自适应：grid-template-columns:repeat(auto-fit,minmax(300px,1fr)))；文字用clamp(1rem,2.5vw,1.5rem)防溢出；图片容器设aspect-ratio+object-fit:cover防变形；打印时显式定义grid-auto-rows或回退为block。
-
现代三栏等高布局首选Flex或Grid：Flex通过display:flex与align-items:stretch自动等高，子项用flex:00200px（侧栏）和flex:1（主栏）；Grid通过grid-template-columns:200px1fr200px天然等高，二者均语义正确、响应式稳健，避免float/table-cell等易塌陷、难维护的旧方案。
