-
HTML5的Picture-in-PictureAPI允许网页视频以浮动小窗形式播放，实现多任务处理。1.核心用途是让用户在浏览其他内容时持续观看视频；2.实现依赖JavaScript接口，通过<video>元素与requestPictureInPicture()方法控制；3.适用于编程学习、在线课程、烹饪教程等场景提升效率；4.兼容性方面需检查document.pictureInPictureEnabled并确保用户手势触发；5.自定义仅限原始页面UI和MediaSessionAPI控制媒体
-
Promise.race在JavaScript中的作用是返回第一个确定状态的Promise结果，无论成功或失败。1.它适用于“只要最快结果”的场景，如实现超时机制或选择多个异步任务中最早完成的结果；2.与Promise.any不同，race对失败零容忍，只要有一个Promise状态确定即返回，而any会等待第一个成功结果或所有失败后返回AggregateError；3.使用时需注意race不会取消输掉的Promise，可能导致资源浪费或副作用，需手动管理取消逻辑；4.错误处理方面，race一旦遇到首个re
-
要实现基于BOM的页面拖放功能，核心在于监听并处理mousedown、mousemove和mouseup三个事件。具体步骤包括：1.设置可拖拽元素的CSS定位为absolute或fixed；2.在mousedown事件中记录初始鼠标与元素位置，并绑定mousemove和mouseup事件；3.在mousemove事件中计算位移并更新元素的left和top样式属性；4.在mouseup事件中清除拖拽状态并解绑相关事件监听器；5.通过设置isDragging标志控制拖拽流程，提升用户体验。
-
@media查询通过检测设备特性应用不同样式实现响应式布局。2.它常用屏幕宽度、高度、方向、分辨率及颜色方案等特性调整样式。3.移动优先策略优先为小屏幕设计基础样式，再逐步增强大屏适配。4.使用CSS预处理器嵌套、断点变量、模块化文件管理复杂规则。5.避免过多断点并保持逻辑统一以提升维护性和性能。
-
实现JavaScript进度条的核心是动态修改元素的width样式属性来反映任务完成百分比；2.需要HTML结构作为骨架，CSS定义样式和过渡动画，JavaScript通过updateProgress函数更新宽度和文本内容；3.结合实际业务时，可通过XMLHttpRequest的onprogress事件获取文件上传进度，或由后端通过轮询、WebSocket推送任务进度；4.优化体验需添加平滑过渡动画、处理不确定性进度（使用CSS动画模拟加载中）、增强可访问性（添加ARIA属性如role="progress
-
判断一个变量是否为数组最推荐的方法是使用Array.isArray()，因为它准确、可靠且能正确处理跨iframe等不同执行环境下的数组判断；2.typeof不能用于判断数组，因为它对所有对象（包括数组、普通对象、null）都返回"object"，无法区分具体类型；3.instanceofArray在跨执行环境（如多个iframe）时会失效，因为不同环境中的Array构造函数不相等，导致判断错误；4.Object.prototype.toString.call()也能正确判断数组且跨环境安全，但语法较冗长
-
定时器回调通常比I/O回调更早执行，因为事件循环中timers阶段在poll阶段之前；2.I/O操作完成后的回调必须等到poll阶段才会处理，即使它在timers阶段前就已完成；3.微任务（如Promise、nextTick）优先级最高，会在每个阶段间立即执行；4.实际开发中应避免阻塞事件循环，CPU密集任务用worker_threads；5.合理使用setTimeout(0)、setImmediate和process.nextTick可优化执行顺序，提升性能。
-
通过代码压缩（minification）去除HTML、CSS、JS中的空格、注释和冗余字符，减小文件体积；2.使用关键CSS（CriticalCSS）内联首屏样式，异步加载非关键CSS，避免渲染阻塞；3.合理使用async和defer属性加载JavaScript，防止阻塞HTML解析；4.优化图片，采用WebP/AVIF格式、响应式图片（srcset）、懒加载和压缩技术；5.利用浏览器缓存，设置Cache-Control、ETag等响应头提升二次访问速度；6.部署CDN，将资源分发至离用户最近的节点，降低
-
使用<audio>标签可嵌入音频，controls属性显示播放控件；2.通过<source>标签提供MP3和OGG等多种格式以增强浏览器兼容性；3.自动播放需谨慎，建议配合autoplay和muted属性使用，并避免滥用loop循环；4.可用JavaScript的play()和pause()方法控制播放状态，并监听ended等事件实现自定义逻辑；5.应监听error事件处理加载失败，同时利用canplaythrough事件判断缓冲情况以提升用户体验。
-
CSS媒体查询常用属性包括min-width、max-width、orientation、resolution和prefers-color-scheme。①min-width用于设定视口最小宽度条件，常用于移动优先策略；②max-width用于设定视口最大宽度条件，适用于桌面优先策略；③orientation用于检测屏幕方向；④resolution用于高分辨率屏幕优化；⑤prefers-color-scheme用于匹配用户颜色方案偏好。此外，响应式设计还依赖弹性图片、Flexbox与Grid布局及相对单位
-
首先，通过document.getElementById或querySelector获取template标签引用，然后使用其content属性访问内容，接着用cloneNode(true)克隆内容以避免原模板被移除，最后将克隆内容插入DOM；1.template标签内容不会被渲染，而display:none的元素仍会被解析和渲染；2.template可用于存储含脚本、样式的HTML片段，无副作用；3.使用占位符结合JavaScript函数替换变量值实现模板填充；4.渲染大型列表时，结合DocumentFr
-
cite标签用于标记创意作品的标题，如书籍、文章、电影等，具有语义化价值，表明其内容是作品名称而非普通文本；2.它与blockquote或q标签结合使用时，cite标签负责标明作品标题，而blockquote或q的cite属性则提供引用来源的URL；3.除cite外，HTML还提供abbr、dfn、mark、time、address和small等元素辅助引用和标注，共同构建语义清晰、易于机器解析和辅助技术识别的网页内容；正确使用这些标签能提升可访问性、SEO和整体信息结构完整性。
-
Promise.allSettled用于处理多个Promise，无论成功或失败，都会等待全部完成并返回结果报告。1.它接收一个Promise数组，返回一个在所有Promise落定后解决的新Promise；2.返回值是一个数组，每个元素包含status（'fulfilled'或'rejected'）及对应value或reason；3.与Promise.all不同，它不会因单个失败而中断；4.适用于需要完整结果报告的场景，如批量操作、数据收集、非关键任务执行和调试分析；5.处理结果时可通过遍历数组区分成功与失
-
col和colgroup标签用于对HTML表格的列进行分组和样式设置，能统一控制列宽、背景色和可见性；2.通过在colgroup或col上应用CSS类而非内联样式，可实现更高效、可维护的列样式管理；3.相比直接操作td，使用col和colgroup具有更好的语义化、维护效率、潜在性能优势和更简洁的CSS选择器；4.常见应用场景包括固定列宽、列背景色分组、隐藏特定列以及配合多级表头增强结构；5.使用时需注意仅部分CSS属性有效（如width、background-color、display），必须将colg
-
HTML元标签对SEO至关重要，写得好可提升搜索排名，写错则可能导致页面不被收录或排名下降。1.<metaname="description">虽不直接影响排名，但能提升点击率（CTR），应包含关键词并具有吸引力；2.<metaname="robots">控制搜索引擎是否收录和追踪页面，错误配置可能导致页面无法被索引；3.<metaname="viewport">确保移动端良好体验，缺失或错误将影响移动优先索引排名；4.<metacharset="UTF-8"&g
