-
HTML文件必须拆成多个页面，中大型项目若用单个index.html会导致路由刷新、状态丢失、SEO差、维护困难；纯静态多页应用（MPA）须按模块拆分并统一管理公共结构与资源路径。
-
JavaScript的class是原型继承的语法糖，不改变面向对象模型；class声明不提升，表达式适合动态定义；子类constructor必须先调super()才能用this；私有字段（#）仅类内可访问，静态方法不可访问实例属性，字段初始化不能调用实例方法。
-
本文通过实测数据对比类中箭头函数（实例属性）、原型方法及bind封装函数在内存占用与执行性能上的差异，澄清常见误区：三者在现代引擎中性能几乎无差别，但内存模型与语义行为截然不同。
-
HTML文件的charset声明必须与实际保存编码一致，否则注释中中文会乱码；应统一使用UTF-8withoutBOM保存，<metacharset>须置于<head>最开头，且HTTP头与HTML声明需一致。
-
JavaScript调试最直接有效的方式是用浏览器开发者工具，核心在于断点设置、控制台交互和实时数据查看配合使用：Sources面板设断点可暂停执行并查看作用域变量、悬停查值、Console中测试逻辑；console提供log/table/group/trace等精准输出；Elements面板支持DOM变更断点与事件监听器追踪；Sources可运行代码片段、Watch修改变量值；Network可禁用缓存或模拟离线。
-
box-shadow是模拟立体按钮厚度最可靠的纯CSS方案，通过多层内外阴影配合明暗与偏移制造深度感，需显式声明transition-property并兼顾:hover与:active状态。
-
创建Grid容器需设置display:grid或inline-grid，其子元素自动成为网格项。通过grid-template-columns和grid-template-rows定义行列结构，支持固定值、fr单位、repeat()和minmax()实现响应式布局。使用gap属性设置间距，推荐代替margin以提升可读性。justify-items和align-items控制项目在单元格内的对齐方式，默认stretch填充。grid-template-areas通过命名区域直观构建页面结构，适用于复杂界面
-
HTML数据归档需确保完整性与可持续性，首选WARC格式或结构化打包，结合自动化采集、元数据记录及定期验证，保障长期可读可用。
-
background-size:cover未生效最常见原因是容器无明确宽高；需检查容器是否设置width/height，Flex/Grid子项需显式设height:100%，且cover裁剪区域受background-position控制。
-
Flexbox通过主轴与交叉轴的对齐机制（如justify-content和align-items）彻底解决了垂直居中等传统布局难题；2.它利用flex-grow、shrink、basis实现弹性伸缩，无需媒体查询即可响应空间变化；3.order属性可不改HTML结构调整元素顺序，极大提升响应式灵活性；4.实际项目中广泛用于导航栏、卡片布局、表单对齐及组件内元素排布；5.易错点包括混淆主/交叉轴、align-items与align-content用途差异、flex简写属性含义不清及容器与项目属性混用，需特
-
需通过系统化手段解析HTML结构：一、用开发者工具查看DOM树；二、识别语义化标签与容器边界；三、借助CSS选择器反向推导层级；四、运行JS脚本遍历输出层级；五、利用第三方工具生成可视化结构图。
-
prefers-color-scheme是纯CSS媒体查询，用于响应系统深色/浅色偏好，需先写基础样式再用@media覆盖暗色模式，避免漏掉浅色适配；护眼模式须重构色彩系统而非简单降亮；用户手动切换应分层存储状态，双模式叠加推荐用CSS自定义属性与color-mix()动态混合。
-
CanvasAPI不提供开箱即用的绘图交互，需手动管理鼠标状态、路径绘制与撤销逻辑；关键在连点成线、正确使用beginPath()/moveTo()/lineTo()，撤销需保存操作指令或双canvas缓存，导出图片须注意跨域、像素尺寸与格式参数。
-
PostCSS自动加前缀失效主因是browserslist配置过新，导致autoprefixer认为无需加前缀；需检查.browserslistrc或package.json配置，确保覆盖旧版浏览器，并确认autoprefixer在PostCSS配置中显式调用。
-
浮动布局中垂直对齐需借助其他CSS属性实现，因vertical-align对浮动元素无效。可通过line-height使单行文本居中，或设置父容器为table-cell并使用vertical-align来间接控制。但更推荐改用flex布局，通过align-items:center实现可靠垂直居中，避免float的局限性。
