-
HTML5的FileReaderAPI支持读取本地文件内容及获取基本信息：一、通过inputtype="file"获取File对象；二、用readAsText读取文本；三、用readAsDataURL生成DataURL预览资源；四、用readAsArrayBuffer读取二进制数据；五、直接访问File属性获取元数据。
-
Hoisting是指变量和函数声明被提升到作用域顶部：var声明提升并初始化为undefined，let/const声明提升但处于暂时性死区，函数声明完全提升而函数表达式不提升。
-
纯CSS实现按钮加载旋转菊花图：通过0宽高元素+三边实色一边透明的border配合border-radius:50%形成圆环，再用@keyframes定义rotate(360deg)动画实现旋转，结合display切换控制显隐，轻量易复用。
-
<p>使用calc()可实现动态响应式布局，通过数学运算混合单位如%、px、vw等。例如width:calc(100%-40px)可让元素宽度自适应并留边距；font-size:calc(16px+0.5vw)实现字体平滑缩放；在Flexbox或Grid中，结合固定宽度与calc()可使主内容区自动填充剩余空间，如width:calc(100%-200px)；需注意运算符两侧加空格、避免嵌套及不支持负单位直接写法，现代浏览器兼容性良好，合理使用可减少媒体查询，提升布局灵活性。</p>
-
flex子项宽度被百分比干扰的典型表现是渲染偏差、缩放错位和跨浏览器不一致，根本原因在于width与flex-basis隐式冲突导致两次计算叠加。
-
弹性盒子通过flex-grow、flex-shrink和flex-basis实现内容动态增减时的自动空间分配与收缩，无需手动调整尺寸；其中flex-grow控制剩余空间放大比例，flex-shrink决定空间不足时的收缩程度，flex-basis设定初始大小，三者配合可精准控制响应式布局行为。
-
按Ctrl+Shift+M（Win/Linux）或Cmd+Shift+M（Mac）可开启ChromeDevTools响应式调试视图，点击左上角手机图标进入，支持预设设备、横竖屏切换及DPR模拟；媒体查询断点在Elements面板Styles侧栏中通过?图标跳转源码，支持禁用验证；需用matchMedia而非resize监听断点变化。
-
opacity作用于整个渲染层，使子元素一同变透明；应改用rgba()控制背景透明，或用伪元素隔离图层实现背景与内容分层。
-
CSSGrid布局分页组件可实现居中对齐、响应式与结构清晰。1.使用place-content:center居中按钮，auto-fit自动换行；2.网格线命名固定首页末页，1fr列弹性填充中间页码；3.媒体查询控制小屏下页码显示，隐藏非关键项并用“...”占位；4.当前页高亮结合tabindex支持键盘导航，提升可访问性。Grid减少嵌套，提升维护效率。
-
fetch返回Promise，网络异常（如断网）会触发catch，但HTTP状态码错误（如500、404）仍返回Response对象，需手动检查response.ok或response.status；直接用.then().catch()无法捕获网络失败，而try/catch配合await才能统一处理异步错误流。
-
本文介绍如何让<label>中的图标元素不触发关联输入框的聚焦行为，同时保留鼠标悬停显示提示、触屏点击弹出浮层的功能，通过事件阻止与合理DOM结构实现精准交互控制。
-
align-items:stretch失效主因是子项存在height/min-height/max-height、align-self非stretch、flex:none或替换元素未处理；解决需统一设min-height:0并调整img/button等显示与对齐。
-
AJAX是浏览器原生能力组合，本质为XMLHttpRequest或fetch异步通信；“无刷新”指局部DOM更新而非整页重载；fetch推荐但需手动判response.ok、注意cookie与JSON解析；XMLHttpRequest仍适用于进度监听等场景；须防卡顿、XSS、竞态等问题。
-
应使用<mark>标记当前上下文中具有相关性或需视觉突出的文本，如搜索关键词、引用条款；它专为“高亮”设计，语义区别于强调重要性的<strong>和无语义的<span>。
-
JavaScript状态管理核心是集中存储、统一更新、自动响应变化；小型项目可用Proxy+订阅的原生方案，中大型项目推荐ReduxToolkit、Zustand、Jotai等React生态库，或Pinia、Valtio、Signals等跨框架方案，选型需兼顾团队熟悉度与项目需求。
