-
JavaScript虽无原生注解，但通过JSDoc、装饰器提案及框架扩展可实现类似功能：1.JSDoc用于类型提示与文档生成；2.装饰器（Stage3）修饰类成员行为；3.框架如NestJS利用装饰器定义元数据；4.构建工具识别特殊注释优化打包。
-
绝大多数情况下，position:sticky更合适，因其天然支持滚动吸附、不脱离文档流、无需手动监听滚动；position:fixed仅适用于全局悬浮按钮等特定场景，且存在移动端定位偏移等问题。
-
最简单有效的方式是在Vue单文件组件中使用<stylescoped>，它通过添加唯一属性和重写选择器实现样式局部化；其他场景需用类名隔离、CSSModules或ShadowDOM。
-
ARIA属性通过补充语义、状态和行为信息，使屏幕阅读器能理解自定义UI组件。当原生HTML无法满足交互需求时，应选用恰当的role（如tab、dialog）、state（如aria-expanded）和property（如aria-label），并结合键盘导航与焦点管理。关键原则是优先使用原生元素，仅在必要时用ARIA增强；动态内容需通过aria-live="polite"或"assertive"告知更新，且区域须预先存在于DOM中。测试时需结合自动化工具（如Axe、Lighthouse）与手动验证，重点
-
将script标签放在body末尾可避免阻塞页面渲染并确保DOM加载完成，src属性用于引入外部JS文件，支持相对路径、绝对路径或完整URL，推荐在</body>前引入以提升性能和执行可靠性。
-
实现多列列表浮动布局需设li为float:left并控制宽度与间距，确保“宽度总和+间距≤容器宽度”，同时解决父容器塌陷和响应式适配问题，现代开发更推荐CSSGrid或Flexbox。
-
通过TailwindCSS的transition、transform与状态前缀类可快速实现按钮动画。1.悬停时使用hover:scale-105和hover:bg-blue-600实现放大与变色；2.点击态用active:translate-y-0.5和active:shadow-inner模拟压下效果；3.聚焦态通过focus:ring-4与transition-shadow提供可访问性发光提示；4.综合transition-all结合hover、active、focus状态实现缩放、阴影与光环叠加动画
-
严格模式将静默失败转为报错、模糊行为转为确定规则：未声明变量赋值报ReferenceError；函数参数/对象属性重复触发SyntaxError；普通函数中this为undefined；禁用with、eval泄漏、arguments.callee等危险特性。
-
可通过CSS的border、outline、单侧border属性、清除默认边框及box-shadow五种方式为HTML5元素添加边界效果：border在内容外绘边框并影响布局；outline在边框外绘轮廓线且不占空间；border-top等可单独设置某一边；outline:none或border:none可移除默认边框；box-shadow用零偏移零模糊加扩展半径模拟边界，兼容圆角。
-
auto-fill保留空轨道适合hover动画，auto-fit收缩空列更省空间；minmax(200px,1fr)实现响应式列宽，需配合display:grid和合理父容器宽度；clamp()可替代minmax()第一参数实现平滑响应式，但需注意Safari兼容性。
-
轮播图组件通过HTML结构、CSS样式和JavaScript逻辑实现自动播放、手动切换与指示器功能，支持悬停暂停和多实例复用，适用于网页图片展示。
-
混用font-size的%和px会破坏继承链，导致字体大小计算失控；应锚定根字号，组件内用em/%缩放，line-height必须用无单位值。
-
长文本溢出容器不换行的根源是white-space被设为nowrap或pre；中文长串需用overflow-wrap:break-word或word-break:break-all；Flex/Grid子项须加min-width:0才能正常折行。
-
本文介绍如何使用原生JavaScript的事件委托机制，精准移除触发事件的按钮所在最近的指定父容器（如.item），避免ID冲突与重复绑定问题，并支持动态添加的元素。
-
本文详解如何使用Yup的ref()和notOneOf()实现密码字段对用户名的动态校验，避免密码中包含用户名，并结合正则确保密码符合复杂度要求。
