-
getImageData非万能,需同源、坐标合法、画布已渲染;跨域图须设img.crossOrigin='anonymous'且服务端配CORS;空白画布返回全黑数据;ImageData.data是Uint8ClampedArray,按R-G-B-A每像素4字节布局,修改后需putImageData生效;参数须为非负整数,越界易报错;大图处理宜用OffscreenCanvas或WebWorker。
-
绝大多数情况下不值得用浮动布局,因其本为文字环绕设计,强行用于多列会引发清除浮动、父容器塌陷等问题;现代开发应优先选用Flex或Grid。
-
srcset属性在linkrel="icon"标签中不被任何主流浏览器支持;浏览器会忽略srcset和sizes,仅加载href指定的图标,必须用多个link标签分别声明不同尺寸和type的图标。
-
flex-direction:row-reverse用于使视觉顺序与DOM顺序相反,确保~兄弟选择器能匹配“当前及左侧”元素;DOM必须倒序排列(star5→star1),再通过row-reverse翻转视觉顺序,才能实现悬停第3颗时前3颗高亮的交互逻辑。
-
不能。:invalid仅标记校验失败状态,不自动显示提示;需配合兄弟选择器(如+或~)控制同级隐藏元素显隐,或用:user-invalid实现用户交互后提示,但无法动态输出错误文案或响应后端校验。
-
HTML5响应式布局核心是@media媒体查询配合viewportmeta标签、相对单位和Flex/Grid布局。必须写对<metaname="viewport"content="width=device-width,initial-scale=1.0">,断点按内容而非设备设定,容器用%或max-width,字体用rem/em,图片设max-width:100%,优先使用flexbox和grid。
-
inputmode是提示虚拟键盘布局的属性,不强制、不校验、不改变输入能力;其值需按实际输入内容选择:decimal适用于带小数点或负号的数值,numeric适用于纯数字如验证码;应避免混用type="number"与inputmode,推荐type="text"配合inputmode和JS校验。
-
HTML标签与属性拼写须严格遵循W3C小写规范,可通过W3C验证器、编辑器语法校验、速查表及浏览器开发者工具四步法精准识别并修正,如inputt→input、hreff→href、clas→class。
-
不能。aspect-ratio仅维持容器宽高比,不触发内容等比缩放;需配合width:100%、相对单位或object-fit等实现整体自适应,并注意旧版Safari兼容性及内容裁剪问题。
-
rel="dns-prefetch"仅提前解析DNS,不发起请求、不下载资源;适用于明确将访问且未缓存的跨域域名,如CDN、统计脚本、字体服务等。
-
object-fit-images现在仍值得用,因为旧版Edge(12–18)和IE全系完全不支持object-fit,会直接退化为拉伸失真;它是轻量、低侵入的polyfill,仅补能力、不改DOM、无需改用background-image。
-
优先用getElementById(性能好、语义清),无id时用querySelector;textContent仅设纯文本并自动转义,innerHTML解析HTML但有XSS风险;批量操作用DocumentFragment减少重排;动态元素绑定事件应即时或用事件委托。
-
根本原因是字符编码未对齐,需确保HTML声明、HTTP头、文件保存、传输编码均为UTF-8;innerHTML插入时避免双重转义;HTML转义与URL编码不可混用;零宽字符等需特殊处理。
-
邮件链接用mailto:协议,需紧接合法邮箱且无空格;电话链接用tel:协议,国际号码须+开头E.164格式;协议名全小写,移动端有效,微信内置浏览器有限制。
-
fill()无法生成独立引用矩阵,因它复制同一对象引用;正确做法是在map回调中每次新建对象,或用Array.from({length:n})替代以避免空位问题。