-
CSS未生效的五大原因：①preload/prefetch未配合JS注入导致白屏；②media属性不匹配使样式被屏蔽；③link标签误加defer/async属性无效且危险；④服务器未返回text/cssMIME类型；⑤构建工具配置错误混淆script与style处理逻辑。
-
eval是JavaScript中高危函数，将字符串作为代码执行，易导致XSS、性能差、调试难、作用域混乱；应禁用，改用JSON.parse、方括号访问、Reflect.apply等安全替代方案。
-
输入框获得焦点时样式不生效，需确保元素可聚焦（如加tabindex）、正确使用:focus伪类、避免:focus-visible误用，并注意outline覆盖、移动端兼容性及焦点被抢占问题。
-
懒加载的核心目的是提升网页初始加载速度和用户体验，减少不必要的资源消耗，其最推荐的实现方式是结合HTML的loading="lazy"属性和JavaScript的IntersectionObserverAPI。对于图片和iframe，可直接使用原生loading="lazy"实现高效懒加载；对于背景图、视频、自定义组件等复杂场景，则应采用IntersectionObserverAPI异步监听元素进入视口的时机，动态加载资源，避免主线程阻塞。懒加载解决了传统全量加载导致的首屏渲染慢、带宽浪费、服务器压力大等
-
<p>1、使用HTML注释<!---->包裹代码使其不被解析；2、通过CSS设置display:none隐藏元素但保留结构；3、利用JavaScript条件判断控制是否执行DOM操作。</p>
-
通过为容器添加/移除active类并配合CSS过渡，可实现单击按钮切换内容显示状态，无需悬停或长按，真正达成“按一次展开、再按一次收起”的交互效果。
-
图文紧密排列需调整图片默认inline行为：一、vertical-align控制对齐；二、display:block+float实现环绕；三、flex布局精准并排；四、font-size:0消除空白符间隙；五、line-height:0压缩行框再微调。
-
JavaScript单元测试核心是隔离验证函数输入输出，主流框架有Jest、Vitest及Mocha+Chai+Sinon；Jest开箱即用，Vitest适配Vite生态，Mocha组合灵活定制强。
-
安装ViewinBrowser插件可一键在默认浏览器预览HTML文件，打开命令面板搜索并安装插件后，右键HTML文件选择“ViewinBrowser”即可实时查看效果。
-
Symbol是JavaScript的第七种原始类型，每次调用Symbol()都返回独一无二、不可重复创建的值，核心用途是作为安全防冲突的对象属性键或内置方法钩子。
-
JavaScript变量是词法环境中的绑定名称；var具函数作用域、提升且初始化为undefined，let/const具块级作用域、提升但受TDZ限制，访问未初始化会抛ReferenceError，应默认用const、次选let、弃用var。
-
HTML5页面无法打开需按五步排查：一查浏览器兼容性，二验文件加载方式，三检HTML语法结构，四查JS及资源加载，五禁用扩展与安全策略干扰。
-
grid-template-areas通过命名区域直观定义网格布局，配合display:grid和grid-area实现元素定位，支持空单元格与响应式调整，使页面结构更易读和维护。
-
图标字体颜色可通过CSS变量统一管理，定义--icon-color等变量于:root，用color:var(--icon-color)应用至.icon或.fa类，并支持hover、disabled状态及深色模式动态切换，注意避免内联样式覆盖和fill属性误用。
-
清除浮动可解决父容器高度塌陷问题，常用方法包括clear属性和伪元素法。1.使用clear:both在浮动元素后添加空标签实现清除，但影响语义化；2.推荐使用伪元素::after结合clearfix类，通过content、display:block和clear:both清除浮动，无额外标签且兼容性好；3.其他方法如overflow:hidden触发BFC、采用Flex/Grid布局等也可闭合浮动，其中伪元素法为现代开发首选方案。
