-
使用prefers-color-scheme媒体查询可实现滚动条随系统主题自动切换，通过为深色和浅色模式分别设置::-webkit-scrollbar样式，并结合系统颜色变量以提升兼容性，适用于WebKit内核浏览器。
-
JavaScript拖放功能分原生DragandDropAPI（需draggable="true"，监听dragstart/dragover/drop）和手动鼠标/触摸事件实现（mousedown→mousemove→mouseup，用transform位移），前者语义强适合文件上传，后者灵活兼容好适用于自由拖动。
-
可使用CSS多列、Flexbox、Grid、float或inline-block实现列表项并行显示：columns按列流式填充；flexbox支持横向排列与换行；grid提供二维精确控制；float兼容旧版但已不推荐；inline-block简易但需处理空白间隙。
-
absolute元素百分比宽度失效的根本原因是包含块无明确宽度；其宽度需相对于最近非static定位祖先计算，若该祖先宽度为auto则百分比无法解析。
-
Symbol是JavaScript中用于创建唯一值的原始类型，常用于避免对象属性命名冲突；每次调用Symbol()都会返回唯一值，即使描述相同，因此sym1===sym2为false；用Symbol作属性名可使多个模块添加同名属性而不覆盖；Symbol属性不会被for...in、Object.keys()或JSON.stringify()遍历或包含，需通过Object.getOwnPropertySymbols()显式获取；Symbol适合添加私有或元信息属性，防止命名碰撞和意外修改。
-
本文讲解如何通过CSS定位与布局优化，解决移动端页面中分类栏目随键盘弹出而上移、元素堆叠错位的问题，确保分类区域（如Popular、Fantasy）垂直排列且底部固定，不随输入框聚焦或滚动而偏移。
-
JavaScript操作Cookie需手动字符串解析，存在容量小、自动携带、无结构化API等缺陷；现代存储方案更适合作前端数据容器，但Cookie在服务端会话管理中不可替代。
-
获取用户输入数值需按场景选择方法：一、getElementById+value；二、querySelector+value；三、form.elements+name/index；四、监听input事件实时获取；五、FormData批量提取。
-
运行HTML5文件需通过浏览器打开或本地服务器环境。1、将文件保存为.html格式，双击用浏览器打开，确保路径无中文且编码为UTF-8。2、在VSCode中安装LiveServer插件，右键选择“OpenwithLiveServer”启动实时预览。3、对于需HTTP协议的功能，安装Node.js后使用npm全局安装http-server，进入文件目录执行http-server命令，通过http://localhost:8080访问页面，以支持AJAX、Fetch等特性。
-
WebCryptoAPI可在浏览器中实现加密、解密、签名和哈希等功能，支持AES、RSA、SHA等算法，适用于数据保护与安全通信；需先检测环境支持并建议在HTTPS下使用；通过crypto.subtle.generateKey可生成AES或RSA密钥；AES-GCM模式结合IV实现对称加解密，需注意iv随机性与传输；RSA-OAEP用于非对称加密，适合小数据加密如密钥传输；SHA-256可通过crypto.subtle.digest计算数据哈希以校验完整性；实际应用中应结合后端设计安全协议，避免密钥泄露或
-
var声明变量会提升并初始化为undefined，let/const虽提升但处于暂时性死区（TDZ），声明前访问抛出ReferenceError；var是函数作用域，let/const是块级作用域；const必须初始化且不可重新赋值，但引用类型内部可变。
-
可通过浏览器开发者工具Network面板抓取XHR/Fetch请求数据，或重写XMLHttpRequest、fetch、WebSocket原型方法拦截请求与响应，还可利用PerformanceObserver监控资源加载。
-
侧边抽屉菜单可通过五种方式实现：一、CheckboxHack纯CSS控制；二、JS切换class；三、visibility+transform组合；四、CSS变量动态管理；五、IntersectionObserver滚动自动收起。
-
首先检查文件扩展名是否为.html或.htm，并确保保存时选择“所有文件”类型避免误存为.txt；确认代码包含<!DOCTYPEhtml>及完整的<html><head><body>结构；使用W3C验证器修正语法错误；对于需HTTP协议的功能，通过Python启动本地服务器访问；排除浏览器兼容性问题，尝试不同浏览器并添加viewport元标签；最后核对外部资源路径，利用开发者工具排查404错误。
-
使用position:sticky可使元素在滚动时吸附到视口指定位置，结合非fixed背景图实现自然滚动效果，通过半透明背景、backdrop-filter毛玻璃、阴影等样式让sticky元素与背景融合，避免父容器设置overflow:hidden以确保sticky生效，同时保证容器高度足够，最终实现导航栏等组件与页面内容协同滚动的视觉体验。
