-
mailto链接仅启动默认邮件客户端并预填字段，无法自动发送；需严格URL编码参数，不支持附件，多收件人用逗号分隔，注意大小写及平台兼容性。
-
通过将<a>标签设为flex容器并包裹全部内容，配合合理的CSS布局与语义化结构，即可实现整个Flexbox区域（含空白区域）响应点击，无需JavaScript。
-
通过iframe嵌套游戏页面并让音频控件独立于页面跳转，可实现在多个HTML文件间无缝播放背景音乐，避免每次刷新重置播放进度。
-
preventDefault没生效的主因是未在form的submit事件中同步调用：必须监听form元素的submit事件，首行调用event.preventDefault()，避免异步、委托或内联写法错误（如onsubmit中未returnfalse）。
-
flex-shrink未生效的根本原因是min-width:auto阻止收缩，必须显式设置min-width:0，并配合word-break或overflow-wrap强制折行及overflow:hidden裁剪。
-
使用text-align:justify可实现HTML文本两端对齐，使段落左右边缘整齐，适用于正文、新闻等正式排版场景，但需注意短文本可能导致字间距过大，影响阅读体验。
-
浮动布局通过float实现文字环绕或简单多列，需注意清除浮动；2.定位布局利用position控制元素位置，适合弹窗、吸顶等特殊效果；3.弹性盒子（Flexbox）为一维布局，适用于导航、居中等组件级排布；4.网格布局（Grid）是二维系统，擅长复杂页面结构如仪表盘；5.传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
-
flex布局比百分比更可靠，因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响；推荐display:flex+flex-wrap:wrap，用gap替代margin，父容器设box-sizing:border-box。
-
在SVG中为不同<text>元素添加不同背景色时，若复用相同id的<filter>，会导致所有文本均应用首个定义的滤镜颜色；解决方法是为每个滤镜分配唯一id，并确保filter属性正确引用对应ID。
-
:only-of-type只判断同级中同标签是否唯一，无视class等属性；真正需要“唯一某类元素”时应改用:is(.item):not(.item~.item)或JavaScript检测。
-
favicon.ico放根目录虽可被部分浏览器自动加载，但iOS/Android需显式link声明，HTTPS下HTTP图标会被拦截，缓存顽固须硬刷新或改名，PWA必须配manifest.json。
-
图片在flex容器中被拉伸变形的根本原因是默认flex-shrink:1与align-items:stretch共同作用，解决关键是img{flex-shrink:0;width:100%;height:auto;}，并依flex-direction调整尺寸声明。
-
箭头函数的this继承外层普通函数作用域的this值，不绑定执行上下文；不能用call/apply/bind修改，不可作为构造函数，无arguments对象。
-
需先通过DOM获取media元素实例（如querySelector或getElementById），确保脚本在DOM加载后执行；跨域资源需加crossorigin="anonymous"；play()必须由用户手势触发并处理Promise拒绝；常用属性包括currentTime、volume（iOS受限）、muted、paused、ended、playbackRate；应监听canplay、canplaythrough、timeupdate、ended等事件而非轮询。
-
实现元素旋转动画需结合transform、@keyframes和animation。首先用transform:rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation:spin2slinearinfinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为centercenter。
