-
应使用语义化的<section>包裹“关于我”模块，配<h2>主标题和id="about"锚点；内容用<p>与<ul>分层呈现，头像必须用带有效alt的<img>；CSS控制max-width和line-height保障可读性。
-
grid容器等高需三者协同：显式定义grid-template-rows（如1fr1fr）、保持align-items:stretch、子项不设height/min-height等阻断性高度约束，任一缺失都会导致视觉不等高。
-
<p>HTML注释使用<!---->语法，支持单行或多行，可置于文档任意合法位置但不可嵌套或插入标签/属性内部，浏览器忽略其内容且不渲染。</p>
-
JavaScript的反射与内省指运行时检查和操作对象结构的能力，依托动态类型和原型链机制，通过typeof、instanceof、Object方法及ReflectAPI实现，结合Proxy可拦截对象操作，广泛用于框架设计、序列化等场景，但需注意性能、属性来源区分及Symbol键的处理。
-
合理使用清除浮动、外边距控制及现代布局可避免元素重叠。1.通过clear:both、overflow:hidden或伪元素clearfix清除浮动；2.为浮动元素设置margin并用:last-child去除末项间距；3.左右对齐用float，居中建议改用flex或inline-block；4.推荐以Flexbox和Grid替代浮动布局，提升稳定性。
-
浮动元素脱离文档流导致父容器高度塌陷，clearfix技术通过伪元素::after配合clear:both使父容器感知浮动子元素，标准写法为.clearfix::after{content:"";display:table;clear:both}。
-
Array.prototype.sort()默认将元素转为字符串比较，导致数字数组如[10,2,1]排成[1,10,2]；隐患包括NaN风险、大整数溢出、浮点精度误差；应使用显式条件返回-1/0/1，并对对象排序做空值处理与类型转换。
-
修改document.title最简单且兼容性最佳，而动态操作<meta>需精准增删、注意属性名与浏览器兼容性，SEO相关元信息须服务端输出才有效。
-
内联SVG作背景需URL编码并确保MIME前缀正确，外部SVG需服务器返回image/svg+xml，内联<svg>标签更适合交互场景；viewBox在dataURL中无效。
-
:first-child伪类选择父元素中第一个子元素，且该子元素需匹配指定选择器。例如p:first-child选中作为首个子元素的p标签；若首个子元素为其他类型（如h2），则p:first-child不生效，此时可用p:first-of-type选中首个p类型元素。样式应用需注意子元素实际顺序，:first-child基于位置而非类型，结合:first-of-type更灵活可靠。
-
IntersectionObserver怎么判断元素进入视口它不靠监听页面滚动事件，而是让浏览器在元素真正接近或进入视口时主动通知你——这意味着更少的重绘、更低的性能开销，尤其适合长列表或懒加载动画场景。关键点在于：必须手动给目标元素添加一个监听器实例，并指定threshold（触发阈值），比如0.1表示元素10%进入视口就触发回调；设为[0,0.5,1]则会在0%、50%、100%三个临界点各触发一次。常见错误现象：IntersectionObserver初始化后没调用observe()
-
双居中需根据布局方式选择方案：flex需display:flex+justify-content:center+align-items:center并设父容器高度；绝对定位需top:50%+left:50%+transform:translate(-50%,-50%)；grid推荐place-items:center；margin:auto仅适用于宽高固定的块级子元素。
-
HTML表单本身不能“压缩”，所谓“压缩表单资源”实际是优化其依赖的外部资源（JS、CSS、HTML体积）和提交行为，不是对标签做某种编码压缩。为什么form标签没法被“压缩”HTML中的是语义化容器标签，浏览器不提供原生压缩接口，也没有标准规范定义“压缩后的form”。搜索中常误把“减小表单体积”“减少请求”“压缩JS/CSS”混为一谈。真正影响加载和交互性能的是：表单所用的JavaScript验证逻辑、CSS样式文件、内联脚本、以及提交时发送的数据量。常见错误现象：
-
解构赋值可通过嵌套结构、默认值、动态键名、函数参数解构、别名及剩余运算符等高级技巧提升代码可读性与开发效率，适用于处理复杂数据结构、配置项和API响应。
-
height:100%无效是因为父容器高度为auto，无计算基准；需逐级设置height:100%或改用min-height:100vh/100dvh，或通过absolute、flex:1、grid1fr等替代方案实现撑满。
