-
子元素浮动导致父容器高度塌陷，可通过clearfix类或overflow:hidden解决；推荐使用clearfix::after添加清浮动，避免溢出问题，而overflow:hidden触发BFC但可能裁剪内容。
-
align-items设置所有子项列轴对齐，align-self单独调整某子项列轴对齐，justify-items控制所有子项行轴对齐，justify-self单独设置某子项行轴对齐，四者结合实现Grid布局精准对齐控制。
-
<script>放在<head>中会阻塞DOM构建，浏览器必须下载、解析并执行脚本后才继续解析HTML，导致首屏白屏；同步脚本尤其危险，document.write()甚至会清空文档。
-
grid-template三段式语法必须严格按「区域定义行定义/列定义」顺序书写，缺一不可；引号为必需语法，点号占位未用单元格，Firefox对换行更敏感，斜杠/是关键锚点。
-
aside仅负责语义标记，不控制布局；必须配合CSS（如flex或grid）才能实现右侧显示、响应式收起等视觉效果，否则默认为块级独占一行。
-
应使用<linkrel="preload">预加载当前页明确需要的关键资源，如首屏字体、CSS、JS或图片；必须指定as属性（如as="font"）和必要crossorigin，否则资源可能被忽略或加载失败。
-
零基础可一天上线母婴商城静态页：用语义化HTML+CSS实现商品列表，突出年龄、材质、认证等关键信息，价格用class="price"标记，图片带描述性alt，响应式用Grid/Flex布局，购买按钮跳转真实buy.html并解析URL参数展示商品名，必加viewportmeta和触控适配，信息颗粒度需源自产品说明书与国标。
-
可在Babel编译期自动注入SDK性能打点逻辑，无需改业务代码；通过AST匹配CallExpression节点识别目标调用（如AlipaySDK.pay），插入start/end计时及上报，支持Promise/回调/异常捕获，零依赖、不污染全局、可配置白名单。
-
ServiceWorker的message事件不支持直接回复，必须用MessageChannel实现双向通信：主线程创建通道并transferport2，SW通过event.ports[0]回复；不可用self.clients.matchAll()伪双向。
-
应使用CSS控制字体样式，禁用已废弃的<font>标签；font-family需提供带通用族的字体列表，font-size推荐用px单位，color优先用十六进制或rgb()；须避免行内重复书写、中英字体名混用及大小写错误，并注意system-ui的兼容性问题。
-
使用Flexbox替代float可解决右对齐布局问题。float:right易导致父容器高度塌陷、元素换行错位及内容环绕，需通过clear:both清除浮动；而flex布局中justify-content:flex-end能稳定实现子元素整体右对齐，且支持响应式设计。对于部分元素右对齐需求，可对目标元素设置margin-left:auto，推动其至最右侧，其余保持左对齐。现代布局推荐优先采用Flexbox方案，避免浮动副作用，提升维护性，仅在兼容老旧浏览器时考虑float。
-
HTML中需转义<、>、&、"、'五字符，\_通常无需转义但混用Markdown时需写\\_；短代码用<code>加转义，多行用<pre>。
-
sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文；需逐级检查父容器overflow值，改用clip-path替代或调整DOM结构；同时确保父容器有高度、不触发新层叠上下文，且sticky元素设top等偏移值。
-
局部同构更新不能实现“不重刷页面却更新SEO”，SEO内容必须由服务端直出并存在于初始HTML中；局部刷新仅能安全更新与服务端输出严格匹配的子树，不得破坏已有SEO结构。
-
JavaScript可通过内联、内部或外部脚本嵌入HTML，使用let/const声明变量，支持多种数据类型与运算符，通过DOM操作实现动态交互，结合事件监听和调试工具可有效提升开发效率。
