-
CSS变量需以--开头、大小写敏感，定义在:root可全局复用；支持深色模式通过@media或class重写；var()支持字面量回退值但不支持嵌套var()；IE不支持需fallback或构建时处理。
-
图片在Grid中拉伸变形的根本原因是未设置object-fit，该属性需作用于<img>元素而非容器；常用值包括cover（等比裁剪）、contain（等比留白）、fill（强制拉伸）和scale-down（兜底缩放），并需配合object-position控制裁剪区域。
-
通过JavaScript控制:invalid样式仅在提交触发后生效，避免页面加载时误标空字段为无效，实现精准、用户友好的表单验证反馈。
-
页面加载完成即触发过滤器逻辑，需确保DOM就绪后再操作节点，推荐将JS置于</body>前或监听DOMContentLoaded事件，避免使用window.onload；过滤函数定义须晚于依赖数据声明、早于调用点；应防止重复执行，通过data属性标记并清空旧内容；性能优化需拆分逻辑、批量更新DOM，必要时采用虚拟滚动。
-
overflow-x:hidden未生效主因是父容器缺宽度约束或子元素white-space:nowrap未配text-overflow:ellipsis；需确保父容器有width/max-width，长单词加word-break，flex子项设min-width:0，移动端慎用user-scalable=no并下沉溢出控制。
-
Flexbox下label与表单控件视觉错位源于基线对齐和盒模型差异，需统一box-sizing、用min-height+padding+line-height控制高度，checkbox/radio绕过height改用宽高设置，并通过white-space、grid或transform优化换行与缩放问题。
-
使用HTML的<picture>元素可实现WebP图片的智能交付：浏览器优先加载WebP格式，不支持时自动回退至JPEG/PNG，兼顾性能与兼容性。
-
可通过CSStransform:rotate()、transform-origin、JavaScript动态控制、range滑块调节及CSS动画五种方式实现图片旋转。其中CSS适用于静态或平滑旋转，JS支持交互式实时调整，动画适合持续匀速旋转场景。
-
有序列表使用<ol>标签创建，浏览器自动分配从1开始的数字编号；通过start属性可自定义起始编号，如start="5"；CSS的list-style-type可设置编号样式，如lower-alpha（a,b,c）、upper-roman（I,II,III）等；reversed属性实现倒序显示，value属性指定某项具体编号，后续项自动递增。
-
Tachyons是一个轻量级、原子化CSS工具库，通过mt2、pa2等类名直接在HTML中构建界面，体积仅14KB，支持响应式与8px网格系统，适用于快速开发静态页面和性能敏感项目。
-
HTML5是浏览器原生支持的现代网页标准，需严格遵循文档结构三要求：DOCTYPE必须首行小写无空格、html标签须含lang属性、metacharset须在head内靠前；语义化标签影响SEO与可访问性；多媒体标签需兼容格式与属性；其价值在于结构、样式、脚本协同及降级友好设计。
-
跨文档消息传递通过postMessage实现安全跨域通信。1.发送方调用targetWindow.postMessage(message,targetOrigin)发送数据；2.接收方监听window的message事件接收消息；3.接收方验证event.origin和event.data确保来源可信与数据合规。应用于iframe交互、登录窗口传参等场景。
-
HTML5规范要求以<!DOCTYPEhtml>开头，严格遵循语义化结构（如唯一<main>、<section>需标题）、正确设置lang和charset，script需defer/async，fetch须处理加载/错误/空数据态，并用本地服务器替代file://开发。
-
flex子项换行后宽度不一致的根本原因是未设置flex-basis或width，导致浏览器按内容撑开且缺乏基础尺寸约束；应统一使用flex:00200px锁定基准宽、禁用伸缩，并配合box-sizing:border-box和合理gap/margin处理响应式与兼容性。
-
pattern仅对text、email、tel、url等文本类type生效，不适用于number；手机号推荐type="tel"+适配分隔符的pattern；邮箱宜用原生email+业务约束；须用setCustomValidity自定义提示。
