-
单选按钮通过name属性分组，相同name的选项互斥，value定义选项值，label提升可访问性，checked属性设置默认选中项，每组仅一个选项应被默认选中。
-
useEffect默认在组件挂载后（即首次渲染完成）立即执行一次，之后才响应依赖项变化；若需跳过初始执行、仅在用户真实输入后触发，应结合状态判空或useRef标记实现条件控制。
-
::marker伪元素不支持content属性插入SVG或字符串，仅允许空值、none或计数器；需用::before配合url()、background-image或mask实现可控图标。
-
模态窗宽度用%撑满全屏，主因是父容器无明确宽度或模态窗未脱离文档流且缺max-width约束；应设父容器width/max-width、模态窗自身合理max-width（如min(800px,90vw)），并注意box-sizing、居中方式及键盘弹出时vw抖动问题。
-
插槽内容无法被<keep-alive>直接缓存，必须将需保留状态的逻辑封装为具名组件，再用<keep-alive>包裹该组件而非<slot>；作用域插槽可用于父子通信。
-
最稳妥方式是用语义化<table>展示等级说明，首行<thead><thscope="col">列名，每行等级名用<thscope="row">，配<caption>说明用途，禁用rowspan/colspan；手机端用@media转为垂直卡片；内容应硬编码而非JS生成。
-
必须使用<time>标签来标记具体可解析的时间点或时间段，如文章发布时间、活动截止日等；datetime属性须为YYYY-MM-DD或YYYY-MM-DDThh:mm:ss等标准格式，否则机器无法识别。
-
真正“精准”的核心是让CSS选择器权重自然胜出，关键在选择器特异性、作用域控制、加载顺序；优先组合组件库原生类名（如.el-button.my-primary），确保自定义CSS后加载，避免ID和内联样式。
-
ChromeDevTools的display面板需手动开启Layout侧边栏（右键标签栏勾选），仅在Elements面板选中元素后生效；CSS-in-JS样式可能不被识别，需查Styles面板；outline不占布局空间适合临时标记，border触发重排但反映真实盒模型；getBoundingClientRect()返回视觉位置，但受合成层、包含块影响；CSS自定义属性修改需作用于正确作用域（如:root）才全局生效。
-
<picture>本身不实现响应式，而是提供资源选择机制；必须嵌套带src的<img>作为兜底，<source>按顺序匹配且需同时满足media和type，sizes必须与srcset的w描述符配合使用，AVIF/WebPfallback应按格式支持度降序排列并确保<imgsrc>为通用格式。
-
JSON是轻量级文本交换格式，非JavaScript对象或类，仅含parse()和stringify()两个静态方法；parse()严格校验标准JSON语法，stringify()忽略函数/undefined/Symbol/循环引用，且fetch的.json()不可重复调用。
-
最稳妥编辑器是VSCode、Notepad++或SublimeText；script应放</body>前或加defer；刷新用Ctrl+F5清缓存；图片路径须按HTML文件位置写相对路径。
-
通知框class应采用BEM分层命名（如notify--success），避免语义耦合；定位需据场景选fixed或absolute，并规避transform干扰；颜色须满足可访问性对比度，深色模式单独定义；销毁时需清理transitionend监听器或用getComputedStyle+setTimeout兜底。
-
CustomElementsAPI允许开发者定义自定义HTML标签并赋予其行为与结构，通过customElements.define()注册，支持自主元素（如<my-button>）和基于原生元素扩展的内置元素（如<buttonis="fancy-button">），结合生命周期回调（connectedCallback、attributeChangedCallback等）实现组件逻辑控制，配合ShadowDOM可达成样式隔离，适用于构建高复用、轻量级、原生封装的
-
JavaScript数组操作核心在于按场景选用合适高阶函数：map用于生成新数组，forEach处理副作用，filter返回匹配项数组，find返回首个匹配项，reduce用于复杂累计逻辑，修改原数组需谨慎并明确标注。
