-
复杂后台布局应优先使用grid-template-areas实现语义化分区，配合minmax()与fr控制弹性，通过媒体查询响应式切换模板，避免顶层全盘Grid和dense自动填充等陷阱。
-
Vue3的scriptsetup语法糖是编译时简化写法，自动暴露顶层声明，无需return；用defineProps接收props，defineEmits触发事件，配合ref、computed等组合式API使用。
-
全局变量污染是多脚本共享window作用域时无意覆盖彼此状态的必然结果；var声明会自动挂载到window，而let/const不会；模块脚本默认严格模式且不污染全局；检测可用ESLint、快照比对或IIFE隔离。
-
flex-wrap:nowrap仅禁止容器主动折行，不解决子元素内容溢出；需配合white-space:nowrap、min-width:0、明确父宽及overflow-x:auto才能实现横向滚动。
-
required仅触发空值校验，不校验内容合法性；对input取value.trim()===""，对select检查selectedIndex===0且首option无值或为空字符串；它不触发type内置格式校验，需提交或调用checkValidity()才执行。
-
Safari中overflow:hidden与border-radius+transition组合失效，需用-webkit-mask+SVG遮罩强制裁剪，并优先使用transform/opacity触发动画以避免重排导致的裁剪脱钩。
-
剩余参数和默认参数提升JavaScript函数灵活性：剩余参数（...args）收集多余参数为数组，必须位于参数列表末尾；默认参数为形参提供备用值，调用时未传参或为undefined则使用默认值，可依赖前置参数；二者可结合使用，适用于日志、配置等场景，减少冗余判断，增强代码可读性与健壮性。
-
CSS样式优先级按四元组（a,b,c,d）计算，内联样式＞ID＞类/伪类＞元素，!important覆盖同源无!important规则；可用开发者工具、getComputedStyle、Computed面板及禁用规则法排查。
-
grid-template-columns应设为“200px1fr”实现导航栏定宽、内容区自适应，配合grid-template-areas和grid-area精准定位nav与main，容器需加min-height:100vh防塌陷，移动端改用grid-template-areas:"nav""main"与grid-template-columns:1fr实现响应式。
-
HTML5的<video>标签支持五种嵌入方式：一、用相对/绝对路径引用本地视频；二、用HTTP/HTTPSURL引用网络视频，需注意跨域与preload；三、用多个<source>适配不同编码格式；四、用autoplay+muted实现静音自动播放；五、添加备用文本或图片及error事件处理加载失败。
-
JavaScript无法直接访问本地文件系统，需通过<inputtype="file">触发用户选择，利用FileList和FileReader读取文件内容，或用FormData+fetch上传文件；大文件可分片处理，注意安全限制与跨域配置。
-
通过CSS自定义属性实现动态主题切换，定义:root和[data-theme='dark']中的变量，利用JavaScript切换data-theme属性并结合localStorage持久化用户偏好，实现亮色、暗色主题的实时切换与记忆功能。
-
答案：通过CSS路径选择器结合a标签伪类，按LVHA顺序定义link、visited、hover、active状态，并利用后代、子等选择器实现导航、页脚等不同区域链接的精细化样式控制，同时确保focus状态和可访问性。
-
:nth-of-type(1)只匹配同标签名兄弟元素中第一个，不考虑其他类型节点或视觉顺序；如父元素内有p、div、p，则第二个p是:nth-of-type(2)，首个p才是:nth-of-type(1)。
-
<p>可嵌套<span>等行内元素，但<span>不能嵌<p>，因块级元素可含行内元素，反之浏览器会自动闭合导致DOM错乱、样式失效、SEO与无障碍问题。
