-
:nth-child匹配父元素下第N个子元素（不区分标签类型），:nth-of-type只匹配同标签的第N个元素；前者按位置，后者按类型分组编号。
-
应使用rgba()或hsla()设置面包屑背景透明度，因其仅作用于背景色；而opacity会令整个元素及子元素（含文字、图标）一同变透明，降低可读性、违反无障碍标准，且不可被子元素重置。
-
在React中，直接在onChange中实时校验输入值的范围会导致用户无法完整输入数字（如输入15时，首字符"1"就被拦截），正确做法是延迟校验——使用onBlur在输入完成后再验证，并对越界值自动修正或回退。
-
使用controlsList可隐藏进度条等控件，如controlsList="noprogress"；2.移除controls属性可完全隐藏控件，适合背景视频；3.高级用户可通过CSS和JavaScript自定义播放界面。需注意浏览器兼容性及用户体验。
-
本文介绍一种通过嵌套容器模拟“内嵌圆角边框”的CSS技巧，解决单元素无法直接创建内侧圆角边框的问题，利用父容器与子容器的同心圆角叠加，实现视觉上类似内凹圆角的边界效果。
-
<p>vertical-align对flex子项无效，应使用align-items（容器）或align-self（子项）控制交叉轴对齐；align-items:center失效常因父容器无高度、子元素有margin/padding或display不匹配；flex-direction:column时align-items控制水平对齐；baseline需子元素为inline-block；IE10–11需加-ms-前缀。</p>
-
hover动画跳帧因浏览器重置动画状态，应始终启用动画并用animation-play-state控制启停，配合transition处理视觉属性，必要时JS接管时序与清理。
-
transform导致点击区域偏移是因事件坐标基于原始布局盒而视觉已变形；解决原则是使渲染边界与交互边界对齐，方案包括用top/left替代translate、包裹无transform容器委托事件、调整transform-origin配合margin、检查父级transform影响等。
-
HTML4DOCTYPE必须带完整DTDURL，如Strict型为<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">，缺URL会触发怪异模式，导致盒模型、行高等渲染异常。
-
HTML5AppCache已废弃，必须迁移到ServiceWorker；因其设计缺陷（缓存不可控、白屏陷阱等）且被Chrome94+、Firefox85+、Safari16.4+彻底移除，manifest文件无效，需通过register()注册sw.js并手动管理缓存策略。
-
DOMJavaScript动态修改网页的核心是先获取元素再修改其内容、样式、结构或行为；常用方法包括getElementById、querySelector、querySelectorAll、parentElement/children；修改用textContent、innerHTML、classList等。
-
::selection伪元素可自定义用户选中文本的样式，如背景色、文字颜色和阴影效果。基本语法为::selection{background-color:#ff6347;color:white;}，可提升页面美观与体验。为兼容旧版浏览器，建议添加私有前缀：::-moz-selection{background:#00bcd4;color:#fff;}。支持的属性包括color、background-color、text-shadow和background（含渐变），但不支持边距、边框、字体大小等布局属性。
-
马赛克还原本质是不可逆的视觉欺骗，只能通过Canvas像素操作（getImageData/putImageData）对实时绘制的马赛克块进行插值或渐变过渡以削弱色块感，无法恢复原始像素。
-
transition通过状态变化触发动效，适用于简单交互反馈；2.animation基于@keyframes独立运行，支持复杂关键帧与循环，适合连续动画；3.推荐transition用于用户交互过渡，animation用于自动播放或精细控制，优先使用transform和opacity以优化性能。
-
JavaScript原生提供模板字符串（反引号包裹，支持${expression}插值），可嵌入变量、表达式、函数调用、多行文本及HTML片段，并可通过标签函数实现转义等高级功能。
