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