-
本文详解为何onclick在表单元素上仅触发一次，并提供基于change事件、语义化HTML和现代DOM操作的最佳实践方案，确保字体可访问性切换功能稳定响应。
-
必须在服务端HTML中静态写入OG标签，因社交平台爬虫不执行JS；微信要求og:image为HTTPS绝对URL且≥300×300px；Facebook、微信、微博、Twitter对OG支持差异大，需按平台适配。
-
全屏布局需重置html/body的margin和padding、设100vw/100dvh、加overflow:hidden，并配viewport标签；iOSSafari中100vh不稳，应优先用100dvh并降级处理。
-
fetch不抛HTTP错误，必须手动检查response.ok并处理response.json()可能的reject；POST需配对JSON.stringify与Content-Type；跨域带cookie需前后端CORS头配合；超时需AbortController；空响应或非法JSON易致脚本崩溃。
-
BEM通过.block__element--modifier命名规范显性化样式作用域，解决通用类滥用导致的覆盖混乱；改造需收口孤立样式类、扁平化嵌套、校验修饰符与元素命名，并用postcss-bem-linter自动约束。
-
counter-increment必须配合::before或::after的content属性才能显示编号，仅设置counter-increment仅在后台计数；content必须使用counter()或counters()函数，后者需带引号的分隔符字符串，如"."，且作用域受counter-reset限制。
-
PurgeCSS删掉已用class的根本原因是它仅识别静态字符串字面量，无法处理动态拼接、JS注入或模板字符串中的类名；必须通过safelist显式声明动态类模式或确保源码中完整出现。
-
Canvas实现手势密码需手动处理坐标映射、点选判定等，因浏览器无原生组件；touchmove易漏点是因采样不均，手指滑过两点间若未落入任一点半径R内，则无法触发选中，须用欧氏距离遍历判定点。
-
在Angular16中，父组件通过@Input()向子组件传递数据时，若属性绑定语法错误（如将绑定表达式写在标签外部），会导致子组件接收到默认值（如0或空字符串），而非父组件的实际数据。
-
BEM表格结构应以业务功能为Block（如user-list-table），行、单元格作为Element，列职责用Modifier标识；禁用colgroup，列宽/对齐/响应式均通过ElementModifier控制；原生标签仅保语义，样式全由BEM类接管；Modifier需分层：职责类必选、状态类可选、交互类严格限定。
-
剩余参数（...）允许函数接收不定数量实参并自动封装为真数组，必须位于形参末位，可与普通参数共存，替代了arguments类数组对象，支持直接调用数组方法且兼容箭头函数。
-
CSSGrid中“置顶”需用z-index配合position（如relative），而非grid-row或order；grid-row仅控制行轨道位置，order会破坏可访问性与布局稳定性；绝对定位适用于悬浮元素，但需确保父容器有position:relative。
-
history.pushState不触发页面跳转，因其仅修改URL和历史记录；需手动监听popstate事件并更新视图，且首次加载须主动读取location.pathname渲染。
-
align-content为什么没生效？检查是否有多行弹性容器只有当弹性容器中存在多行（即flex-wrap:wrap或wrap-reverse）且总高度/宽度超出容器时，align-content才起作用。单行flex容器里设align-content:flex-start完全无效——这是最常踩的坑。确认父容器设置了display:flex且flex-wrap:wrap确保子项总尺寸超出了容器主轴方向的可用空间（比如横向换行需宽度超限，纵向换行需高度超限）用浏览
-
outline不占布局空间且环绕元素绘制，常用于焦点提示；通过outline-color、style、width设置样式，配合outline-offset控制偏移，提升可访问性。
