-
navigator.clipboard.read读不到图片和HTML是因为浏览器默认仅支持text/plain，其他类型需显式申请clipboard-read权限并用户授权；API返回ClipboardItem列表，须手动调用getType()解析，且各浏览器兼容性差异大（Chrome/Edge支持较全，Safari不支持图片，Firefox不支持read）。
-
JavaScript交互关键在DOM操作、事件响应、异步行为三链条：确保元素存在再操作，用addEventListener动态绑定事件，fetch需手动检查res.ok并捕获异常。
-
移动端垂直布局应使用flex容器+column方向+flex-grow实现弹性拉伸，而非height:100vh；因100vh在iOSSafari等浏览器中会包含地址栏高度且软键盘弹出时不重算，导致截断或错位。
-
hidden与断点前缀混用会失效，因hidden等价display:none且优先级更高，覆盖后续断点显示声明；正确做法是仅用断点控制显隐，如hiddenmd:blocklg:hidden。
-
直接用opacity动画切换背景图会闪屏，因background-image不支持透明度动画，单容器切换时新图未加载完即触发opacity变化，导致空白或残留；须用双层绝对定位容器预加载图片，通过opacity关键帧与z-index类控制实现平滑淡入淡出。
-
lang属性不是可有可无的装饰，它直接决定屏幕阅读器怎么读、浏览器要不要断字、拼写检查是否生效——设错或漏设，用户听到的就是一串发音错乱的语音。lang属性影响哪些具体行为它不控制翻译按钮是否出现，但会显著干扰浏览器对页面语言的判断逻辑。常见实际影响包括：屏幕阅读器（NVDA/VoiceOver）按lang值切换TTS引擎：若Bonjour没声明，可能用中文音念“Bon-jour”；hyphens:auto在CSS中仅当元素有合法lang且浏览器支持该语言时才
-
答案：使用Bulma框架可快速构建响应式导航栏，其Navbar组件通过navbar-brand、navbar-menu等语义化类实现桌面与移动端自适应布局；在小屏幕下默认折叠为汉堡按钮，需添加简单JavaScript控制is-active类以展开菜单；支持is-primary、is-dark等颜色定制及box-shadow增强视觉效果；可在navbar-end中嵌入搜索框或使用has-dropdown创建下拉菜单，实现丰富交互功能。
-
嵌套路由面包屑点击回退需还原完整路由状态，包括参数、查询、滚动及子模块状态；每项应为可恢复的“路由快照”，通过meta.breadcrumb标识层级，结合matched截取、参数继承、query过滤与router.replace实现精准复原，并配合keep-alive动态key与权限守卫处理异常场景。
-
直接cat合并HTML会破坏结构，正确做法是用BeautifulSoup提取首个文件的head和所有文件的body内容拼接，避免重复标签、ID冲突及JS/CSS路径错误。
-
:valid无法直接触发input的::after图标，因input是替换元素，不支持伪元素；需用label包裹并借助属性选择器联动状态。
-
align-items:stretch默认生效但需满足前提：容器交叉轴尺寸明确、子项未设固定高度或覆盖对齐方式、flex-direction为row时才实现列等高，IE11存在兼容性缺陷。
-
Redux中间件通过三层函数结构拦截action，在dispatch前后插入日志、异步等逻辑，利用compose形成洋葱模型，从左到右执行进入流程，再逆序返回，从而增强dispatch而不改变store本身。
-
JavaScript异步编程关键在理解回调的调用时机、执行主体和上下文；回调是被宿主环境主动调用的参数函数，需避免立即执行错误；回调地狱本质是控制流失控，应拆解为具名函数或升级为Promise/async-await；封装回调API为Promise是必备技能，须注意error-first约定和this绑定。
-
Bootstrap适合快速开发和组件统一，TailwindCSS提供高度定制和灵活构建，Foundation适用于传统企业项目；根据团队技能与项目需求选择。
-
mask-image失效主因是三方面：需检查图片加载与CORS、元素必须有可绘制内容、Firefox要求SVGmask内fill明确；渐变蒙版须用luminance模式并避免rgba；clip-path优先于mask-image执行。
