-
HTML结构化数据是富媒体摘要的必要条件而非充分条件，需使用谷歌支持的类型、满足强制字段、采用JSON-LD格式，并确保内容与正文一致，否则即使验证通过也不会触发富媒体摘要。
-
window.getSelection()获取选区并验证有效性是实现网页内联评论的基础，需检查rangeCount、过滤空白文本、排除contenteditable等区域，再通过Range定位节点路径与偏移量锚定上下文，包裹高亮标记并绑定交互行为。
-
metakeywords标签对Google、Bing、百度均无排名作用，已被完全忽略；保留它可能引发信号混乱、暴露低质运营或触发安全警告，绝大多数情况下应删除。
-
配置MAMP虚拟主机并优化路径与缓存，可实现CSS零感知延迟加载。1.启用httpd-vhosts.conf；2.添加VirtualHost指向项目目录；3.修改hosts文件绑定project.test；4.使用根路径引用CSS；5.开启mod_expires模块并配置.htaccess缓存规则；6.可选内联关键CSS避免FOUC。正确设置后，本地开发中CSS加载时间通常低于5ms，用户无延迟感。
-
HTML单位换算与格式转换不直接冲突，但DOM渲染、CSS计算和JS读取时因值被提前转为像素（如getComputedStyle返回"240px"）导致原始单位丢失；需从el.style或CSSOM解析原始值，JS中应统一用parseFloat提取数值、正则提取单位，并注意em/rem基准及CSS变量单位传递陷阱。
-
grid-template-areas与grid-area配合使用可实现语义化布局：容器通过字符串定义区域结构，子元素用grid-area分配到对应区域，提升代码可读性与维护性。
-
-webkit-box-reflect仅限WebKit/Blink浏览器支持，非标准实验属性；语法为-webkit-box-reflect:below10px；需作用于有内容的块级元素，禁用overflow:hidden及触发层叠上下文的父样式。
-
给表单添加标题有两个方法：1.使用<legend>标签配合<fieldset>，适合包裹一组控件并加说明文字，语义清晰且对屏幕阅读器友好；2.直接使用<h1>到<h6>普通标题标签，更常见且易控制样式，适合大多数网页场景。同时要注意标题层级应符合页面结构，保持简洁易读，避免与网页标题混淆，确保表单标题作为页面的一部分用合适的标题级别区分，从而提升易用性和条理性。
-
HTML本身不支持断点设置，断点是CSS@media规则的能力；HTML仅传递条件，由CSS引擎解析执行，media属性仅用于初始加载判断，不响应动态变化。
-
flex-grow为0时子元素不参与剩余空间分配，宽度由内容或width决定；flex-shrink为1时小屏下会压缩导致换行或截断；flex-basis优先级高于width，影响初始主轴尺寸；gap兼容性影响均等布局。
-
直接设tr或td的height不推荐，因其会强制截断内容、与line-height冲突导致垂直错位，且老版IE兼容性差；首选方案是用--table-cell-line-height变量配合line-height和vertical-align控制对齐。
-
使用clamp()与calc()结合可实现字体平滑缩放，语法为clamp(1.5rem,2vw+1rem,3rem)，确保字体在最小值与最大值间动态调整，保持可读性与视觉一致性。
-
不能。:focus-within匹配任意可聚焦后代获得焦点的父元素，开箱即用且性能优；:has(.child:focus)需目标子元素真实可聚焦并严格满足结构关系，兼容性差、性能开销大。
-
能，caret-color专用于设置输入框光标颜色，支持所有CSS颜色语法，不继承，需显式设置在可编辑元素上，兼容Chrome57+/Firefox53+/Safari11.1+，注意优先级和旧版Safari降级方案。
-
不可变数据结构指创建后无法修改的数据，其核心优势包括避免副作用、简化状态管理、提升代码可预测性与调试效率，并支持函数式编程。在JavaScript中，直接修改对象可能导致意外变更，而通过扩展运算符等技术实现不可变更新，则能保留原始数据完整性。例如，使用{...obj}创建新对象而非修改原对象，确保状态变化可追踪。在React和Redux中，不可变性使浅比较有效，优化渲染性能。尽管频繁生成新对象可能带来性能开销，但结构共享（如Immer或Immutable.js）可缓解此问题。总体而言，不可变性增强了程序的
