必须紧贴开头，否则浏览器可能用默认编码（如iso-8859-1）提前解码，导致中文乱码且不可逆；viewport缺失会使移动端以桌面宽度渲染后缩放，体验崩溃；alt为空或不规范则损害可访问性与seo。
charset 必须放在 最开头，否则中文会乱码；viewport 缺失会导致手机页面缩成一团；alt 不写，图片加载失败就只剩空框，读屏软件也读不出内容——这些不是“小问题”，而是上线即暴露的基础缺陷。
为什么 <meta charset="UTF-8"> 一定要放第一行？
浏览器解析 HTML 是从上到下流式进行的。如果 <meta charset="UTF-8"> 没有紧贴 开始位置（比如前面有注释、空格或别的 <meta>），部分浏览器（尤其是旧版 IE 和某些移动端 WebView）会在读到它之前就用默认编码（如 ISO-8859-1）解码前几行，导致标题、脚本里的中文直接显示为乱码，且无法回退修复。
- ✅ 正确位置：
<meta charset="UTF-8">紧跟其后才是<title></title>或其他<meta> - ❌ 常见错误：在
<meta charset>前加了<!-- 注释 -->，或把它塞在<title></title>后面 - ⚠️ 注意：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是冗余写法，已过时，只用charset属性即可
<meta name="viewport"> 怎么配才不翻车？
没有这个标签，移动端浏览器会以桌面宽度（通常是 980px）渲染页面，再整体缩小显示，文字小得看不清，点击区域错位，用户必须双指放大才能操作——这等于主动放弃移动体验。
- ✅ 最小安全配置：
<meta name="viewport" content="width=device-width, initial-scale=1"> - ❌ 别写
user-scalable=no：禁用缩放违反 WCAG 无障碍标准，iOS Safari 甚至会忽略该声明 - ❌ 别硬写
width=375或width=414：不同设备宽度不同，固定值会让大屏变窄、小屏溢出 - ? 补充建议：如果项目需适配 PWA 全屏模式，可加
<meta name="apple-mobile-web-app-capable" content="yes">，但仅限 iOS Safari 有效
<img> 的 alt 属性到底怎么填？
alt 不是可选项，是语义和可用性的强制入口。搜索引擎靠它理解图片内容，视障用户靠它知道页面里有什么，图片加载失败时它就是唯一可见描述。
- ✅ 信息图/产品图：
alt="黑色无线降噪耳机正面照，带触控面板和LED指示灯"（具体、客观、不含“图”字） - ✅ 装饰性图片（如分隔线、背景花边）：
alt=""+role="presentation"，明确告诉辅助技术“忽略我” - ❌ 空
alt却没加role：屏幕阅读器可能仍尝试读取文件名或路径 - ❌ 写成
alt="图片"或alt="logo"：毫无信息量，等于没写
表单交互里最容易被忽略的三个 type 坑
表单按钮默认是 type="submit"，哪怕你只是想点开一个弹窗，一按就触发表单提交——页面刷新、数据丢失、用户懵圈。
- ✅
<button type="submit"></button>：只用于真正要提交表单的按钮 - ✅
<button type="button"></button>：所有 JS 驱动的交互（弹窗、切换、搜索等）都该用它 - ✅
<button type="reset"></button>：仅用于清空当前表单字段（慎用，用户常误点） - ⚠️ 额外提醒：
<input type="button">功能同type="button"，但语义弱于<button></button>，优先用后者 - ? 进阶注意：如果表单内有多个
submit按钮，可通过formaction指定不同提交地址，避免 JS 分支判断
最隐蔽的坑往往藏在“看起来没问题”的地方：比如 title 标签写了但超长被截断，label 和 input 没用 for/id 关联导致点击失效，或者把 <script></script> 放在 里又没加 defer——这些不会报错，但会悄悄拖慢首屏、卡住交互、让测试阶段才暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
