-
使用padding可解决内容贴边导致的视觉拥挤问题。通过在容器内添加内边距，如设置padding:16px或1rem，使文字与边框间留有空白，提升可读性与美观度；结合响应式设计，利用rem或媒体查询适配不同屏幕，让布局更具呼吸感，增强用户体验。
-
正则表达式可快速提取HTTP响应头Key-Value对，但仅适用于格式规范、无嵌套和换行折叠的原始头；需先切出头部块、逐行匹配并转小写存储key，或用字符串方法替代以提升鲁棒性。
-
应使用<figure><figcaption>组合实现图文语义关联，而非div+p模拟；figcaption须为figure首个或最后一个子元素，alt与figcaption分工明确，装饰性或内联图片不应滥用figure。
-
引入Animate.css可通过CDN添加animate__animated与具体效果类实现动画，如按钮弹跳；支持通过样式控制重复、延迟、速度，结合JS动态触发更佳。
-
将扁平菜单转为树形结构需两次遍历：首次用对象缓存节点并初始化children，识别根节点；第二次将非根节点挂载到父节点children下，时间复杂度O(n)。
-
需在input和blur事件中调用checkValidity()触发红框和气泡，用setCustomValidity('')重置状态并自定义提示文案，禁用reportValidity()避免干扰，通过JS驱动验证状态确保:invalid生效。
-
跨域请求因浏览器同源策略被阻止，是安全机制而非bug；解决方式主要有CORS（服务端配置响应头）、JSONP（仅GET，已淘汰）和代理服务器（开发常用），推荐优先配置CORS。
-
aspect-ratio可在Chrome88+、Firefox89+、Safari15.4+、Edge101+中直接使用，但Safari15.0–15.3会静默忽略，IE、X5内核等完全不支持；需配合width/max-width使用，不可与height共存，且必须作用于块级或弹性/网格子项容器，搭配object-fit等控制内容填充。
-
Bootstrap5的断点是明确定义的六个min-width像素值：xs(0)、sm(576)、md(768)、lg(992)、xl(1200)、xxl(1400)，全部锚定在$grid-breakpoints变量上，媒体查询以min-width为唯一依据，且断点“向上生效”。
-
用<audio>标签实现多音频顺序播放需JavaScript监听ended事件，手动切换src并调用play()；须确保用户交互触发、每次切换前调用load()、重置currentTime=0，用数组管理路径；newAudio()不可直接播放，MediaSession需手动处理播放逻辑且兼容性有限；preload="metadata"不预加载音频主体，真预加载需fetch+createObjectURL。
-
轮播图的指示器和左右箭头必须共用同一BEM块名carousel，分别命名为carousel__indicator和carousel__control，后者用--prev/--next修饰符区分方向，禁用状态统一用--disabled修饰符，确保样式隔离、状态同步与事件委托一致。
-
该用article还是section的核心判断标准是：内容单独复制到新HTML文件中能否被完整理解；能则用article，不能则用section（或nav/aside/footer）；且每个section必须含h2–h6标题，否则语义失效。
-
summary标签本质是details的唯一交互锚点，必须为首个直接子元素；支持纯文本、内联元素（如<svg>）及emoji，但禁用块级元素；失效主因包括结构错位、CSS阻断（如pointer-events:none）或JS覆盖默认行为。
-
元素JavaScript控制：通过DOM操作获取元素并调用showPicker()方法示例代码
showPicker()仅在Chromium98+（Chrome、Edge、Opera）及AndroidWebView120+中稳定支持，Firefox、Safari和iOSWKWebView完全不支持；需运行时检测并满足DOM可交互、用户手势触发等条件。
-
最稳妥的做法是用rgba()或hsla()设置background-color实现背景半透明，避免使用opacity（会导致整个元素及子元素变透明）；现代浏览器均支持，可结合CSS自定义属性动态控制。
