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