<meta charset="UTF-8">必须紧贴<head>开头，否则浏览器可能用默认编码（如ISO-8859-1）提前解码，导致中文乱码且不可逆；viewport缺失会使移动端以桌面宽度渲染后缩放，体验崩溃；alt为空或不规范则损害可访问性与SEO。

charset 必须放在 <head> 最开头，否则中文会乱码；viewport 缺失会导致手机页面缩成一团；alt 不写，图片加载失败就只剩空框，读屏软件也读不出内容——这些不是“小问题”，而是上线即暴露的基础缺陷。

为什么 <meta charset="UTF-8"> 一定要放第一行？

浏览器解析 HTML 是从上到下流式进行的。如果 <meta charset="UTF-8"> 没有紧贴 <head> 开始位置（比如前面有注释、空格或别的 <meta>），部分浏览器（尤其是旧版 IE 和某些移动端 WebView）会在读到它之前就用默认编码（如 ISO-8859-1）解码前几行，导致标题、脚本里的中文直接显示为乱码，且无法回退修复。

• ✅ 正确位置：<head><meta charset="UTF-8"> 紧跟其后才是 <title> 或其他 <meta>
• ❌ 常见错误：在 <meta charset> 前加了 <!-- 注释 -->，或把它塞在 <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 不是可选项，是语义和可用性的强制入口。搜索引擎靠它理解图片内容，视障用户靠它知道页面里有什么，图片加载失败时它就是唯一可见描述。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 信息图/产品图：alt="黑色无线降噪耳机正面照，带触控面板和LED指示灯"（具体、客观、不含“图”字）
• ✅ 装饰性图片（如分隔线、背景花边）：alt="" + role="presentation"，明确告诉辅助技术“忽略我”
• ❌ 空 alt 却没加 role：屏幕阅读器可能仍尝试读取文件名或路径
• ❌ 写成 alt="图片" 或 alt="logo"：毫无信息量，等于没写

表单交互里最容易被忽略的三个 type 坑

表单按钮默认是 type="submit"，哪怕你只是想点开一个弹窗，一按就触发表单提交——页面刷新、数据丢失、用户懵圈。

• ✅ <button type="submit">：只用于真正要提交表单的按钮
• ✅ <button type="button">：所有 JS 驱动的交互（弹窗、切换、搜索等）都该用它
• ✅ <button type="reset">：仅用于清空当前表单字段（慎用，用户常误点）
• ⚠️ 额外提醒：<input type="button"> 功能同 type="button"，但语义弱于 <button>，优先用后者
• ? 进阶注意：如果表单内有多个 submit 按钮，可通过 formaction 指定不同提交地址，避免 JS 分支判断

最隐蔽的坑往往藏在“看起来没问题”的地方：比如 title 标签写了但超长被截断，label 和 input 没用 for/id 关联导致点击失效，或者把 <script> 放在 <head> 里又没加 defer——这些不会报错，但会悄悄拖慢首屏、卡住交互、让测试阶段才暴露问题。