-
transition仅适用于状态变化，无法实现循环动效；持续自动动画必须用@keyframes配合animation属性，通过定义关键帧、设置animation-name、duration、iteration-count等控制循环播放。
-
本文详解如何在前端DataTable交互中，通过跟踪数据状态变化（新增选中、取消选中），精准生成符合API规范的结构化请求对象，包含id和对应enable布尔值，并实时更新length字段。
-
使用nav标签结合ul和li创建语义化导航栏，提升可访问性和SEO，通过aria-label区分多个导航区域，并确保链接文字描述清晰，便于维护与样式控制。
-
CSS的:hover在触屏设备上不可靠，因其依赖指针移入事件而触屏无持续悬停状态；应使用@media(hover:hover)媒体查询精准判断设备是否支持hover，并搭配:focus和:active保障触屏体验。
-
最常用方式是用linear-gradient与url()多层背景叠加，渐变写前、图片写后；可分离background-image精细控制各层，并注意background-size等属性需按图层顺序逗号分隔。
-
本文介绍使用HTML5的srcdoc属性，将本地或未托管的完整HTML代码直接嵌入<iframe>中渲染，适用于Squarespace、Notion导出页嵌入等无文件上传权限的场景。
-
禁用date输入框原生校验的两种可靠方式是：①将type="date"改为type="text"并用JS接入第三方日期选择器；②保留type="date"但在表单上添加novalidate属性，同时需自行补全JS验证。
-
::after伪元素通过content属性在元素后插入装饰性内容，常用于添加图标、动画下划线、气泡三角等视觉效果，提升页面美观与可维护性。
-
给ul设置display:flex并配合justify-content、gap和flex-wrap等属性实现li横排与响应式布局，避免使用float、inline-block等过时或易出错方式。
-
一维布局用Flex，二维布局用Grid，混合使用最合理：Flex处理行或列内对齐，Grid划分行列交叉结构，二者分层协作可提升可维护性与兼容性。
-
水波纹动画未触发的主因是元素不可聚焦或:active状态失效；需确保button等可聚焦，div加tabindex="0"，避免pointer-events:none和display:none，父容器设position:relative+z-index解决溢出，用transform+opacity实现GPU加速动画，并添加touch-action:manipulation优化移动端响应。
-
模板字符串不仅用于拼接变量，还支持嵌套生成动态内容、标签函数自定义处理、内嵌表达式实现条件逻辑、以及天然多行字符串保留格式，广泛应用于HTML构建、XSS防护、国际化和SQL编写等场景。
-
用scroll事件无法直接触发@keyframes动画，应通过JS切换CSS类名（如.fade-in）来控制；推荐使用IntersectionObserver替代scroll监听，提升性能与兼容性，并注意动画重播、初始状态和fill-mode等细节。
-
提升页面渲染性能需优化CSS选择器，首选类名和ID作为关键选择器，避免过度嵌套与通配符。①使用简洁类名如.nav-link替代div.contentullia.nav-link；②用具体类名.btn-primary替代属性选择器[class*="btn-"]；③限制嵌套层级不超过3层，改用BEM命名法提高独立性；④避免深层结构.sidebar.widget>ul>li>a，采用.widget-link等语义化类名；⑤合理使用#id提升匹配效率，但不滥用以保组件化可维护性。选择器越简单明确
-
position:sticky是实现导航栏固定的首选方案，需满足设置top值、父容器无overflow截断、页面有足够滚动空间三条件；常见失效源于transform、flex/grid对齐或行内元素未设display；优势是零性能开销、天然平滑、自动响应。
