-
:nth-last-child(2)选中所有同级子元素中倒数第二个且类型完全匹配的元素，因受空白文本节点、注释、混杂标签等DOM结构影响常失效；:nth-last-of-type(2)仅按同类型元素倒数计数，更稳定。
-
HTML多选框用<inputtype="checkbox">实现，需统一name值分组、设value区分选项、禁用ID重复；JS通过querySelectorAll获取全部并手动同步checked/indeterminate状态。
-
固定导航条导致内容被遮挡，应通过padding-top为内容区预留高度；响应式可用CSS变量联动；慎用margin-top；滚动条宽度变化可用scrollbar-gutter或强制显示解决；需确保导航条定位、尺寸设置正确。
-
使用状态机管理UI组件生命周期可提升可维护性。通过定义明确的状态（如空闲、上传中）与事件（如开始、暂停），利用状态转移表控制状态切换，结合UI框架监听状态变化更新视图，并在状态变更时处理异步操作与副作用，实现逻辑与视图分离，降低复杂度。
-
直接在浏览器中打开HTML5文件最简单，双击即可用默认浏览器查看，适合静态页面测试；通过浏览器菜单打开可方便进行多浏览器兼容性测试；若涉及JavaScript异步加载或API请求，推荐使用本地服务器运行，如VSCode的LiveServer插件、Node.js的http-server或Python的http.server模块，能避免跨域和路径问题，更贴近真实线上环境。
-
优酷网页版无HTML5开关，其自动播放由浏览器策略决定；可通过插件DisableHTML5Autoplay+chrome://settings/content/sound禁用youku.com声音实现拦截。
-
本文介绍如何使用纯CSS实现按钮内嵌箭头图标，并配合平滑悬停动画（右向箭头滑入效果），提升用户体验与界面引导性，无需额外JavaScript或图标字体库。
-
直接用transform做变形动画完全可行，但必须配合transition或@keyframes才能动起来；单独写transform只是“定格变形”，不是动画。transition至少需指定transition-property:transform、transition-duration（如0.3s）和transition-timing-function（如ease-out），缺一不可；@keyframes定义后须通过animation属性显式绑定，且注意animation-fill-mode:forwa
-
直接用::before和::after写tooltip易错位，因top/left等定位值未与方向解耦，硬编码导致改方向需手动调所有偏移；正确做法是用Lessmixin封装方向参数，通过条件分支控制transform、margin及border组合，并确保父容器设position:relative。
-
用CSSGrid实现勋章墙需设display:grid、grid-template-columns:repeat(auto-fill,minmax(120px,1fr))、gap:12px；勋章容器用flexcolumn居中内容；遮罩须挂body下并合理设置z-index；动态加载后需强制重排。
-
本文介绍如何使用现代HTML/CSS/JavaScript构建可拖拽、自动吸附到棋盘格的国际象棋界面，摒弃传统<table>布局，采用语义化<div>结构配合原生drag-and-dropAPI与坐标计算逻辑，实现流畅、可控的棋子移动体验。
-
必须加preload="auto"，因浏览器默认preload="metadata"只加载元数据，导致全屏背景视频首帧延迟渲染；需搭配muted、autoplay、loop、object-fit:cover、playsinline及正确编码格式。
-
id是唯一标识，class是复用标签；id用于锚点、label绑定和高频JS访问，class适用于样式复用、组件化开发及行为解耦，重复id会导致getElementById返回首个匹配元素且难以排查。
-
WebSockets适用于客户端与服务器间的实时文本通信，如聊天室；WebRTC用于点对点音视频通话和低延迟数据传输，需WebSocket辅助信令交换。
-
小屏通知浮窗被截断应通过媒体查询动态调整fixed定位偏移和宽度：在768px及480px断点下调小top/right值，480px下设width:calc(100vw-16px)并显式left:auto，禁用transform替代定位，键盘弹出时需JS配合处理。
