前端技术文章
-
本文详解如何在Nuxt3中绕过defineNuxtConfig的同步限制，通过插件+setLocaleMessage动态加载并注入远程locales和翻译资源，兼容路由国际化、语言切换与SSR/SSG场景。138 收藏 -
HTML5视频居中首选Flex布局：父容器设display:flex、justify-content:center、align-items:center及明确高度；次选绝对定位+transform；margin:0auto需配合display:block和固定宽度才生效。188 收藏 -
HTML5播放卡顿与html5play函数名无关，根源在于媒体加载、解码、渲染链路及调用时机；需检查preload设置、用户手势触发、seek事件监听、服务端Range支持及硬件适配。385 收藏 -
加了transform-style:preserve-3d仍无立体感，大概率是父容器漏设perspective，或perspective未作用于直接包含3D子元素的层级；perspective必须由上一级设置才能影响其直系子元素的3D投影计算。157 收藏 -
HTML中空格符号的正确写法是使用 ，它表示一个不可断行的空格。在面包屑导航（Breadcrumb）中，如果需要添加空格来分隔各个层级，可以使用 来确保空格不会被浏览器自动合并或省略。例如：首页 > 分类 > 当前页面这样在页面上会显示为：首页
首页 > 分类 > 当前页面这样在页面上会显示为：首页">
用 插入不被合并的空格，因其为不间断空格、宽度约等于一个英文字符，最常用；面包屑中>前后推荐写为“ > ”，并添加aria-hidden="true"避免读屏器误读。191 收藏 -
Canvas页面空白的主因是getContext调用过早或被忽略；需确保DOM加载完成、浏览器支持、canvas尺寸非零，且区分属性与CSS尺寸，避免预览缓存，并在动画中正确清屏和调用requestAnimationFrame。126 收藏 -
Canvas2D抗锯齿需对齐像素网格（如x+0.5）、禁用内部缩放而改用CSS缩放，WebGL需启用antialias:true并同步setPixelRatio与setSize，SVG则天然抗锯齿且应内联使用。153 收藏 -
Vue组件懒加载基于JavaScript动态导入import()语法，Vite自动识别并拆分为独立chunk，配合manualChunks分包、prefetch预取及长期缓存策略，实现按需加载与性能优化。112 收藏 -
crossorigin属性仅在需读取跨域资源原始内容时必需，如canvas操作、WebGL纹理绑定、AudioContext解码等；纯展示无需添加，且必须与服务端CORS响应头配合生效。121 收藏 -
nav和dropdown必须是两个独立block，因nav只管语义结构与布局，dropdown专责交互行为（显隐、定位、过渡），二者职责分离才能避免样式耦合与测试爆炸。373 收藏 -
一个文档中只能有一个main标签，它是语义化容器而非切换组件；应固定main元素并动态更新其子节点，配合aria-live、焦点管理和滚动恢复保障可访问性与SEO。179 收藏 -
HTML本身不参与SourceMap配置，因其无编译转换过程；真正需配置的是构建工具（如Vite、Webpack）对JS/CSS生成的SourceMap，HTML仅作为资源容器被动引用。306 收藏 -
Word加载本地HTML图片慢的根本原因是其逐个同步解析img标签src路径且不支持缓存或异步，相对路径基准目录为临时工作目录而非HTML所在目录；解决方法是将图片统一复制到HTML同级media子目录，并将所有src改为相对路径如"media/xxx.png"，避免file://或UNC路径。492 收藏 -
使用flex-wrap和gap可实现Flexbox布局中的自动换行与间距控制。1.设置flex-wrap:wrap允许子元素在空间不足时换行，避免溢出；2.使用gap统一设置子元素间的水平和垂直间距，简化样式管理；3.建议结合flex:11200px等弹性设置与媒体查询优化响应式效果，避免混用margin防止间距混乱，提升布局效率与可维护性。195 收藏 -
应优先使用HTML5原生属性（required、type、pattern）做基础校验兜底，再用JavaScript增强交互反馈、组合逻辑与异步校验；checkValidity()仅返回布尔值，reportValidity()才触发提示；异步校验需手动管理状态并防抖；复杂规则放JS，简单规则用pattern。387 收藏