-
可利用HTML5的CanvasAPI和FileAPI实现本地图片裁剪：一、手动绘制裁剪区域；二、集成Cropper.js库；三、用clip()实现非矩形裁剪；四、结合createObjectURL优化大图预览与裁剪精度。
-
Promise.any返回首个成功结果，全失败才以AggregateError拒绝；Promise.race则谁先完成（无论成败）即结束，首个失败即整体失败。
-
content-box是什么？就是浏览器“默认怎么算宽高”当你没写box-sizing，浏览器就用content-box——这不是某种特殊模式，而是CSS的原始设定。它意味着：你写的width:200px，只管内容区那块空白，不管padding和border。哪怕加了padding:10px和border:3px，元素在页面上实际占的宽度还是：200+10×2+3×2=226px。为什么content-box容易导致布局错乱？常见错误现象：设了
-
标准HTML文档开头必须为<!DOCTYPEhtml>、<htmllang="zh-CN">、<head><metacharset="UTF-8"><title>页面标题</title></head>、<body>。
-
querySelector和querySelectorAll支持完整CSS选择器语法，前者返回首个匹配元素（无匹配时为null），后者返回静态NodeList；需转数组才能用map/forEach；不支持伪元素，仅支持伪类；作用域限于调用对象，不解析未挂载的HTML字符串。
-
Spread语法可合并数组但有局限：仅浅拷贝、不支持类数组直接展开、大数组内存开销大；concat()更兼容且性能优；超大数组宜用循环push；去重或深度合并需额外逻辑。
-
使用Flexbox实现两栏居中对齐最有效，1.整体居中：父容器设display:flex，justify-content:center实现水平居中，align-items:center实现垂直居中；2.仅水平居中：使用justify-content:center配合gap设置间距，flex:0045%控制列宽；3.响应式堆叠：屏幕小于768px时，flex-direction:column使两栏垂直排列，align-items:center保持居中，width:80%和text-align:center适
-
JavaScript函数默认参数语法为param=defaultValue，ES6原生支持，仅当参数为undefined时触发，默认值表达式每次调用重新求值，可访问前序参数及外层变量，但不可反向引用或访问函数体内let/const声明。
-
for循环在大多数场景下比forEach快2–5倍，尤其数组长度超1000时更明显；因forEach每次迭代创建新函数作用域、隐式调用回调且无法用break中断，而for是原生指令级控制。
-
本文详解为何直接对<spanid="hint-ru">添加blur-filter-off类无效，并提供基于CSS层级选择器（>*）与DOM结构优化的可靠解决方案，确保仅目标文本解除模糊，其余内容保持.blur-filter-on效果。
-
:hover作用于父元素可样式化子元素，如.parent:hover.child；CSS无法反向选中父级，需调整结构或用JS；:hover为瞬态伪类，不支持悬停后保持状态，移动端慎用。
-
Flex布局对齐需先确认主轴方向：flex-direction决定主轴（row为水平，column为垂直），justify-content控制主轴对齐，align-items控制交叉轴对齐；主轴变化时二者作用方向同步改变。
-
transition-timing-function用于控制CSS过渡的速度曲线，不改变时长但影响快慢节奏。常用关键词包括ease（默认，先慢后快再慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（两端慢中间快）。还可使用cubic-bezier(x1,y1,x2,y2)自定义贝塞尔曲线实现弹性效果，如cubic-bezier(0.175,0.885,0.32,1.275)用于按钮缩放。此外，steps(n)可实现分步动画，如steps(8)用于精灵图帧
-
Object.seal禁止增删属性但可修改值，Object.freeze则完全锁定对象；两者均为浅冻结，嵌套对象需递归处理。
-
JavaScript表单验证需用addEventListener('submit')绑定form元素并调用preventDefault()，配合trim()、正则校验、insertAdjacentHTML插入精准错误提示，提交后须清除错误状态和监听器。
