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