HTML语义化标签用错会直接破坏可访问性和SEO，如用<div class="button">替代<button>导致屏幕阅读器无法识别操作意图、搜索引擎抓不到交互信号；<header>等结构标签须成对出现且不嵌套于<div>；表单控件必须配<label for="id">；时间地址等信息应使用<time><address>；禁止用<div role="button">模拟按钮；DOCTYPE和UTF-8声明缺一不可，否则IE进入怪异模式或中文乱码；HTML5新标签在IE8及以下需html5shiv补救；脚本加载顺序不当会导致首屏白屏。
HTML语义化标签用错会直接破坏可访问性和SEO
写 <div class="button"> 而不是 <button>，屏幕阅读器读不出操作意图，搜索引擎也抓不到交互信号。这不是“看起来一样就行”的事，是结构层面的失效。
常见错误现象：表单提交无响应、语音助手跳过关键控件、Google Search Console 报告“缺少可交互元素语义”。
-
<header>、<nav>、<main>、<footer>必须成对出现，且不能嵌套在<div>里充当“伪语义” - 所有表单控件必须配
<label for="id">，for值要和对应input的id完全一致 - 时间、地址、联系人等信息优先用
<time datetime="...">、<address>，别堆<span class="date"> - 禁止用
<div role="button">模拟按钮——它不响应空格/回车键，也不被tab焦点自然捕获
DOCTYPE 和字符集声明漏掉一个，IE 就进怪异模式
没写 <!DOCTYPE html> 或前面多了注释/空格，IE8–11 直接切到 Quirks Mode，盒模型、display: inline-block、甚至 margin 计算全乱。UTF-8 编码没声明，中文变 ，连 JS 字符串解析都可能出错。
使用场景：任何需要支持 IE 或老安卓 WebView 的项目（哪怕只是内部系统）。
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE html>必须是文档第一行，前面不能有任何字符（包括 BOM、空格、注释） -
<meta charset="UTF-8">必须在<head>最顶部，且要在第一个<script>或<style>之前 - 如果用构建工具生成 HTML，检查模板是否意外注入了 BOM 或空白行
HTML5 新标签在 IE8 及以下根本不可见，得靠 html5shiv 补救
写了 <section>、<article>，但 IE8 渲染时当透明块处理，CSS 样式全失效，页面只剩文字流。这不是样式问题，是 DOM 根本没创建这些节点。
参数差异：html5shiv 只对 IE9–10 有部分作用，IE11+ 和 Edge 已原生支持；它不修复 CSS 属性兼容性（如 flex），只解决标签识别。
- 必须用条件注释加载：
<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]--> - 脚本必须放在
<head>里，且在任何 CSS 引用之前执行 - 不要用 CDN 上的旧版（如 3.7.3），改用 3.8.0+，它支持更多新标签并修复了 IE6–8 的 document.createElement 冲突
script 和 link 加载顺序不当，首屏白屏时间翻倍
<script src="app.js"></script> 放在 <body> 开头？浏览器会暂停 HTML 解析，等 JS 下载、编译、执行完才继续——用户看到的是长达数秒的空白页，尤其在弱网下。
性能影响：未加 async 或 defer 的 <script> 是渲染阻塞资源；<link rel="stylesheet"> 默认也是阻塞的，即使 CSS 文件很小。
- 非关键 JS 放
<body>底部，并加defer（保证执行顺序）或async（不保证顺序） - 关键 CSS 提取内联（
<style>），其余用<link rel="preload" as="style">提前拉取 - 避免在
<head>里放多个同步<script>，它们会串行阻塞，哪怕其中一个是分析型脚本
最易被忽略的点：语义化不是“锦上添花”，而是可访问性、SEO、JS 选择器稳定性的共同基础；而 DOCTYPE 和编码声明，一旦漏掉，后续所有兼容性补丁都建立在流沙之上。
