-
MediaQuery是CSS3根据设备特性应用不同样式的机制，核心语法为@mediascreenand(条件){样式规则}，常用min-width和max-width设置断点；推荐移动优先策略，先定义小屏样式，再逐步增强大屏体验，结合HTML的link标签可控制外部CSS文件的条件加载，提升性能与维护性。
-
requestAnimationFrame+WebAnimationsAPI更卡是因为误用触发重排或未满足GPU加速条件；正确做法是仅动画transform/opacity、用will-change/translate3d主动提示合成、复用Animation而非频繁新建。
-
本文介绍使用JavaScript类名切换配合CSStransform:scaleY()实现div元素的平滑垂直展开/收起效果，适用于隐藏内容（如SVG容器或子模块）的交互式显示控制。
-
slice分页核心是用(page-1)*pageSize和Math.min(start+pageSize,arr.length)计算索引直接slice取数，需校验输入、防越界、保持不可变性。
-
HTML5新增input类型包括email、url、tel、number、range、date、month、week、time、datetime-local、search、color；需注意兼容性降级为text及校验差异，应结合required、pattern和JS兜底。
-
HTML5快速入门需掌握五步：一、标准文档结构（DOCTYPE、lang、meta）；二、语义化标签（header、nav、main、article、footer）；三、增强表单（email、date、search等type及placeholder、min/max）；四、多媒体（video/audio标签及poster、autoplay等属性）；五、本地存储（localStorage/sessionStorage的增删查操作）。
-
flex-basis是分配空间前的初始基准，非固定值；优先用0px而非0%，因0%在旧版Safari中可能回退为auto导致布局错乱，且需配合min-width:0解除隐式最小尺寸限制。
-
动态import()不能直接加载HTML文件，仅支持JavaScript模块；需用fetch()加载HTML片段并注入，或通过构建工具（如Vite?raw）转为字符串，但非浏览器原生能力。
-
应优先使用URLSearchParams解析URL参数，它由浏览器原生支持（Chrome49+等），自动处理编码解码、空值及重复键；用newURLSearchParams(window.location.search)获取当前页参数，或newURL(urlStr).searchParams解析任意有效绝对URL。
-
直接在浏览器中打开HTML5文件最简单，双击即可用默认浏览器查看，适合静态页面测试；通过浏览器菜单打开可方便进行多浏览器兼容性测试；若涉及JavaScript异步加载或API请求，推荐使用本地服务器运行，如VSCode的LiveServer插件、Node.js的http-server或Python的http.server模块，能避免跨域和路径问题，更贴近真实线上环境。
-
pandoc可直接将UTF-8编码HTML转PDF/DOCX/Markdown，但PDF需额外安装tinytex，复杂CSS布局建议用浏览器打印导出，DOCX样式丢失主因是语义映射与字体兼容性问题。
-
闭包不捕获this，其this由调用方式决定；解决方法包括缓存this、bind绑定、使用箭头函数或传参替代。
-
最可靠方式是用属性选择器a[target="_blank"]区分内外链，因其明确表达跳转意图；单靠href协议判断易误判javascript:、tel:、//等特殊值，且前端路由下所有路径均为相对形式。
-
<trackkind="chapters">必须为<video>直接子元素且紧随<source>，仅Chromev70+和Safari16.4+/Ventura13.3+原生支持UI渲染，VTT需严格符合WEBVTT格式、毫秒三位、同源或CORS，Firefox无原生章节菜单。
-
list-style-position取值决定标记与文本的排版关系：outside使换行文本左边缘不对齐首行，inside则侵占内容区宽度并影响盒模型；二者在响应式或嵌套场景易致视觉错位，需手动补偿或改用语义化替代方案。
