-
按钮用%设置宽高无效是因为百分比依赖父容器尺寸，而父容器常无显式高度；vw/vh更可靠但需防小屏过小或大屏溢出；clamp()是兼顾响应与可用性的最佳方案。
-
HTML5拖拽上传必须在dragover事件中调用event.preventDefault()，否则drop事件不会触发；drop事件中通过e.dataTransfer.files获取文件列表，需转为数组处理，并校验files.length>0以区分文件与链接等非文件内容。
-
核心区别在于是否新增历史记录条目：pushState()添加新记录，replaceState()替换当前记录；参数相同且同源限制，需注意state大小、popstate兼容初始化、服务端fallback及视图同步。
-
响应式设计的核心是CSS媒体查询，通过合理设置断点实现多设备适配；推荐采用移动优先策略，以内容换行为依据设置断点，结合min-width、Flexbox、Grid及clamp()等现代CSS技术优化布局，提升可维护性与用户体验。
-
JavaScript前端数据安全需结合加密与哈希技术，1.使用WebCryptoAPI实现SHA-256哈希和AES-GCM对称加密；2.可借助crypto-js等库简化操作；3.前端仅作预处理，不可替代后端安全机制，须避免硬编码密钥、配合HTTPS与后端验证使用。
-
CSSGrid可高效实现响应式文章列表布局。通过grid-template-columns与minmax()结合auto-fit，可自动调整列数适配屏幕；使用gap控制间距，align-items统一对齐方式，提升排版一致性；通过grid-column:span让推荐文章跨列突出显示，实现灵活的不规则布局，无需媒体查询即可完成多设备适配。
-
可通过FileAPI读取HTML5文件内容与元数据：首先用FileReader读取文件文本，再访问File对象属性获取名称、大小、类型等基本信息，并利用DOMParser解析HTML文件内部的title、meta标签等自定义元数据。
-
<p>旧版Safari和IE不支持display:grid，需用flex降级并注意兼容细节：IE10需加-ms-前缀且不支持flex:1缩写，Safari6.1–8.0不支持align-content；推荐先写flex基础布局，再用@supports覆盖grid，避免混用导致冲突。</p>
-
用opacity和visibility组合配合transition实现自然淡入淡出，避免display切换；定义fade-in动画并设置transition时序，确保进出动效平滑，辅以position:absolute或固定高度防抖动。
-
实现HTML多文件上传需设置form的enctype="multipart/form-data"和method="post"，并在input标签添加multiple属性允许多选；通过name="files[]"将文件作为数组提交，便于后端处理，结合JavaScript可提升用户体验。
-
CSS变量是HTML5动态主题切换的核心机制，通过:root定义变量、class切换、媒体查询适配系统偏好、localStorage持久化及var()回退值五步实现。
-
WebGL是基于OpenGLES的JavaScriptAPI，通过HTML5<canvas>调用GPU实现3D渲染；它提供低阶接口需手动管理着色器、缓冲区等，而Three.js等库在其上封装以提升开发效率。
-
从IIFE到ESModules，JavaScript模块化历经全局污染、依赖混乱的早期困境，先后诞生命名空间、CommonJS、AMD等方案，最终通过ES6原生支持实现统一，带来静态分析、Tree-shaking和浏览器原生支持，奠定现代前端工程化基础。
-
HTML中无透明颜色代码，实现半透侧边栏需用rgba()设置alpha通道（0~1），推荐0.7~0.9；兼容IE8需先写hex再覆盖rgba()；追求毛玻璃效果须叠加backdrop-filter:blur()并加浏览器前缀。
-
JavaScriptServerless指用JS/TS编写运行于无服务器平台的函数，由事件触发、自动伸缩，适合API、定时任务等场景，优势包括全栈统一、快速部署、低成本运维，常见平台有AWSLambda、Vercel、CloudflareWorkers，需注意轻量设计、状态外置、错误监控与本地调试，结合ServerlessFramework等工具提升开发效率。
