-
应直接使用<picture>实现AVIF/WebP适配，因其无需JS、不发额外请求、SEO友好且原生支持；srcset不识别格式，必须依赖<sourcetype>做MIME类型匹配，顺序为AVIF→WebP→JPEG，并确保各格式尺寸与质量一致。
-
本文介绍如何在保留原有点击功能的前提下，实现点击<td>时高亮其所在<tr>行，并自动取消其他行的高亮，同时避免内联onclick属性带来的维护与作用域问题。
-
使用固定高度配合transition可实现简单展开收起；2.内容高度不确定时可用max-height模拟auto效果，结合overflow:hidden与过渡动画；3.精确动画可通过JS动态获取scrollHeight并设置height目标值；4.注意避免过大max-height、确保重排触发并优化缓动函数，提升流畅性。
-
box-sizing有两个取值：content-box（默认）指width/height仅内容区尺寸，padding和border额外增加总宽高；border-box指width/height包含内容、padding和border，三者之和恒等于设定值。
-
HTML内容居中需根据对象选择CSS方法：文本或内联元素用text-align:center；块级元素水平居中用margin:0auto（需设置宽度）；图片可设父元素text-align:center或自身display:block加margin:0auto；Flexbox通过justify-content和align-items实现灵活居中；Grid用place-items:center；绝对定位配合transform:translate(-50%,-50%)适用于脱离文档流的精确居中。
-
flat()能处理评论多层嵌套结构，因其可按深度剥开数组，比手写递归更简洁安全；Infinity参数用于不确定嵌套深度时全部扁平化，但需注意性能与数据预处理。
-
递归是函数调用自身解决问题的技巧，需满足基础情况（终止条件）和递归情况（规模递减），典型步骤为确定basecase、找出递推关系并编码实现，常见陷阱包括缺失basecase或未缩小问题规模。
-
面包屑结构化数据必须使用BreadcrumbList类型，JSON-LD中需严格满足@type:"BreadcrumbList"、itemListElement数组、每个ListItem含@type:"ListItem"、position从1连续递增、item为含@id（绝对URL）或name的对象；script须置于head或body顶部、type为"application/ld+json"、JSON正确转义；动态页面需服务端注入，多语言站点@id须与hreflang一致。
-
::marker不是list-style-type的替代品，而是补充，仅在需动态控制序号样式（如颜色、字体、图标、状态响应）时使用；它不支持修改序号内容、不作用于div等非原生列表项、仅兼容Chrome86+/Firefox89+/Safari15.4+，且受display:flex/grid/contents和有限CSS属性限制。
-
直接给.login-box容器设background-image最稳妥，需同时设置background-size:cover、background-position:center、background-repeat:no-repeat，并加background-color降级；配遮罩层::before提升文字可读性，用min-height:100vh保障响应式高度，高DPR屏需提供@2x图。
-
纯HTML+CSS旅行相册：用语义化<figure>+<figcaption>组织照片、地点、日期，配合srcset/sizes响应式图片、grid-template-columns:repeat(auto-fill,minmax(320px,1fr))自适应布局及打印优化，确保信息完整、多端清晰、无需JS。
-
BEM通过“块__元素--修饰符”命名法使class名语义清晰、无需上下文即可理解，如button__icon表示按钮的图标子元素，button--primary表示主色调修饰态，且禁止嵌套过深或跨块组合。
-
Date对象处理时区和国际化存在四大坑：1.不带时区的字符串解析为UTC，导致本地时间偏差；2.toLocaleString输出依赖系统环境，需显式指定locale；3.夏令时切换引发时间计算错误，建议用UTC运算；4.本地时间存储致跨时区混乱，应统一存UTC时间戳并按需格式化。复杂场景推荐使用luxon、dayjs插件或Temporal。
-
lang属性必须显式声明在<html>标签上，浏览器和屏幕阅读器依赖它识别语言；子语言切换需用lang而非CSS或HTTP头；语义标签需配合lang声明语言边界；dir与lang须组合使用；多语言导航需<nav>包裹并为每个链接设hreflang和lang。
-
语义优先选<strong>，纯样式需求可用<b>；<strong>表示重要性（屏幕阅读器加重），<b>仅视觉加粗；现代HTML5推荐<strong>，注意避免嵌套、块级误用和滥用样式。
