必须置于最开头，否则浏览器会以错误编码解析前面的中文内容，导致乱码且无法挽回；影响读屏、seo和翻译；语义化标签保障嵌套安全与可访问性；是响应式刚需，缺之则移动显示异常。
charset 必须放在 为什么 <meta charset="UTF-8"> 不能往后放？
浏览器从上到下解析 HTML，一旦开始渲染，就按当前已知编码解码后续字节。如果 <meta charset> 写在 <title></title> 后面，<title></title> 里的中文可能已被 GBK 或系统默认编码错误解码，再改 charset 也救不回来。
- 错误写法：
<title>我的页面</title> <meta charset="UTF-8"> - 正确位置：必须是
的第一个子元素（紧随开始标签之后） - HTML5 不接受
http-equiv="Content-Type"这种老写法，冗余且易出错
直接影响屏幕阅读器发音、搜索引擎语言识别和拼写检查。不写或写错（比如页面全是中文却写 lang="en"），会导致：
- 视障用户听到英文语音朗读中文内容
- Google 可能将页面归入错误地区索引（如把国内服务页推给英语国家用户）
- 浏览器内置翻译功能误判源语言，点“翻译”反而变乱码
多语言站点需配合 hreflang 使用，但单语页面至少确保 lang 值与实际内容一致。
语义化不是“锦上添花”，而是嵌套安全线
用 <div> 包一切看似省事，但会绕过浏览器对嵌套的校验规则，埋下兼容性隐患：
<ul><li>
<code><p></p> 里不能放 <div> —— 浏览器会自动闭合 <code><p></p>，导致 DOM 结构意外断裂
<span></span> 里不能放 <section></section> 或 <ul></ul> —— 行内元素不允许包含块级内容<nav></nav> 替代 <div class="nav">，不仅利于 SEO 和 a11y，还能让 CSS 选择器更精准（比如 <code>nav a 不会误中 footer 里的链接）
语义标签不是装饰，是浏览器理解结构的契约。
<meta name="viewport"> 在移动设备上不是“可选”，是刚需
没有它，网页在手机上会以桌面宽度（通常 980px 左右）渲染，然后整体缩放显示，文字小得看不清，点击区域错位。
- 基础写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁用
user-scalable=no—— 它违反 WCAG 可访问性标准，且 iOS Safari 已部分忽略该指令 - 避免写死
width=375等固定值，不同机型 viewport 宽度差异大，应始终用device-width
这个标签漏掉，等于没做响应式——哪怕你写了所有媒体查询，页面也根本不会按预期缩放。
真正卡住新手的，往往不是“不会写”，而是“不知道哪一行代码正在悄悄破坏整个结构”。<meta charset> 放错位置、
