<meta charset="UTF-8">必须写且须置于<head>最前面，因浏览器解析到首个非ASCII字符（如中文）时立即按当前编码解码，未提前声明则默认用Windows-1252等错误编码乱猜，导致满屏方块或问号；UTF-8是唯一被所有现代浏览器无条件支持的通用编码，延迟声明已无法挽回前序乱码。
HTML不是编程语言，是浏览器能直接读懂的结构标记规则——写错标签、少闭合、大小写混用，浏览器大概率照常渲染，但语义错乱、SEO掉坑、无障碍失效，这些坑在项目上线后才暴露。
为什么<meta charset="UTF-8">必须写，且必须放在<head>最前面
浏览器解析 HTML 时，遇到第一个非 ASCII 字符（比如中文）就立刻按当前编码解码；如果没提前声明，会按系统默认编码（如 Windows-1252）乱猜，结果就是“”满屏。UTF-8 是唯一被所有现代浏览器无条件支持的通用编码，<meta charset="UTF-8">必须是 <head> 中**第一个**标签，否则前几个字节已按错误编码解析完毕，再改也晚了。
常见错误现象：
- VS Code 里明明写了中文，保存为 .html 后双击打开全是方块或问号
- 用 Live Server 预览正常，但直接双击文件打开就乱码（因双击走的是系统默认编码）
-
<meta>写在<title>后面，标题显示正常，但正文第一段仍乱码
<header>、<nav>、<main> 这些语义化标签真不能用<div>代替？
能代替，页面照样显示；但代价是：搜索引擎无法识别内容主次，屏幕阅读器读不出导航区块，团队协作时别人得靠 class 名猜结构，重构时改一个 class 可能牵出十个样式文件。
立即学习“前端免费学习笔记（深入）”；
使用场景与实际约束：
-
<main>全页只能出现一次，且不能嵌套在<article>、<aside>、<footer>、<header>、<nav>内部 -
<nav>不等于“所有链接”，只用于主要导航（如顶部菜单、侧边栏导航），页脚的友情链接、文章内的跳转锚点不算 -
<section>必须自带标题（<h1>–<h6>），否则语义不成立，不如用<div>
表单里type="email"和required为什么有时没反应
原生校验只在表单提交（submit 事件）时触发，不监听输入过程；且仅当用户主动点击“提交”按钮，或按 Enter 键触发表单提交时生效。单纯聚焦、失焦、输入内容都不会触发。
容易踩的坑：
- 用
<button onclick="doSomething()">替代<button type="submit">，导致校验完全不执行 - 给
<input>加了type="email"，但没包在<form>标签里，校验逻辑压根不加载 - 移动端 Safari 对
pattern支持有限，正则写得太复杂可能静默失效 -
required对<textarea>有效，但对<select>需配合空选项：<option value="">请选择</option>
<img> 的 alt 属性到底怎么写才不算敷衍
alt 不是“图片说明”，是“当图片不可见时，替代图片传递同等信息的文字”。空字符串 alt="" 表示“该图纯装饰，无信息价值”；写成 “logo 图片” 或 “一张图” 属于无效描述，对屏幕阅读器用户毫无帮助。
真实判断标准：
- 如果是头像：
alt="张三，前端工程师"（身份+角色） - 如果是商品图：
alt="黑色无线蓝牙耳机，带充电盒，续航24小时"（关键属性+功能） - 如果是图表截图：
alt="2025年Q1用户增长曲线：新注册用户环比上升37%，主要来自iOS端"（结论+数据支撑） - 如果是图标按钮（如放大镜）：
alt="搜索"，而非 “放大镜图标”
忽略 alt 的后果往往延迟显现：SEO 排名下滑、政府类项目验收不通过、视障用户投诉——这些都不是开发阶段能直观看到的。
