-
HTML4中rel合法值极少且仅用于<link>，仅stylesheet和shortcuticon被广泛支持；HTML5大幅扩展rel语义，新增preload、prefetch、preconnect、icon、manifest等值以支持现代Web功能，并标准化nofollow、noopener、noreferrer等行为，但需注意浏览器兼容性及crossorigin等配套属性。
-
使用fr单位和minmax()函数可统一按钮尺寸：通过grid-template-columns:repeat(auto-fit,minmax(120px,1fr))确保每列在120px最小宽与等比伸缩间平衡，结合width:100%、固定padding和box-sizing:border-box的按钮样式，使按钮在不同屏幕下保持一致外观，实现响应式布局中的尺寸协调。
-
浮动元素在宽度缩小时会“掉行”，因其脱离文档流且不感知容器变化，容器变窄时无法并排则被挤至下一行；需在媒体查询中显式设float:none并清除浮动才能避免布局崩塌。
-
JavaScript函数是可复用代码块，具有一等公民特性；定义方式有函数声明（提升）、函数表达式（不提升）和箭头函数（无this、不可构造）；调用需用()传参，支持IIFE、默认参数与剩余参数。
-
JavaScript通过ClipboardAPI操作剪贴板，需用户触发且页面在安全上下文中运行；2.使用navigator.clipboard.writeText()写入文本，readText()读取文本，均返回Promise并需处理权限与异常。
-
浮动错位主因是父容器未触发BFC且box-sizing不匹配；box-sizing:border-box可防宽度溢出但需配合BFC或清除浮动；混用float与flex/grid会导致布局失控，推荐弃用float改用现代布局。
-
gap属性是解决按钮组间距问题最简洁现代的方案，需父容器设为flex或grid布局；它自动跳过隐藏项、避免外边距合并，兼容主流浏览器，旧版Safari需加-webkit-gap前缀。
-
图标不显示的主因是iconfontCSS或字体文件加载失败、路径错误、跨域拦截、类名/Unicode不匹配或CSS覆盖。需依次检查：CSS是否200加载、@font-face路径是否正确、字体文件是否可访问且无CORS问题、HTML中class名或Unicode是否与CSS定义一致、基础样式（font-family/display/content）是否缺失或被覆盖。
-
JavaScript是当前最该优先掌握的语言，因其在浏览器中直接运行、无需配置环境，零基础者仅需“写→保存→刷新”三步即可获得即时反馈，大幅降低入门门槛。
-
DOMContentLoaded在DOM解析完成后触发，不等待资源加载，适合操作DOM；Load在所有资源加载完毕后触发，适用于依赖完整资源的场景。
-
推荐使用CSSGrid实现弹性网格卡片布局，因其二维布局能力更强、代码更简洁且响应式表现优异；通过grid-template-columns:repeat(auto-fit,minmax(200px,1fr))可自动调整列数并填满容器，配合gap设置间距，无需媒体查询即可实现自适应；Flexbox方案适合一维布局，使用flex-wrap:wrap和flex:11200px实现卡片换行与伸缩，兼容性较好但控制较弱；根据项目需求选择，现代布局优先推荐Grid。
-
label的for属性必须严格匹配目标元素的id，区分大小写且不可用name替代；嵌套控件于label内更可靠；ARIA仅作补充，不替代原生语义。
-
将HTML5文件保存为.html格式并双击用浏览器打开可直接预览；2.使用代码编辑器如VSCode配合LiveServer插件实现自动刷新预览；3.对于涉及JS请求等复杂功能，需通过Node.js安装http-server搭建本地服务器，在http://localhost:8080访问以避免跨域问题。
-
变量提升是JS编译阶段将var声明“记忆”到作用域顶部但保留赋值位置，let/const仅提升声明而不初始化并设TDZ；typeof访问TDZ中变量仍报错，函数声明完全提升而表达式受TDZ约束。
-
JavaScript框架是解决DOM更新、状态管理与团队协作问题的约定；Vue通过响应式劫持实现数据驱动视图，React依赖Hooks调用顺序与依赖数组保证渲染一致性；选型应基于项目现状、团队习惯与生态适配。
