HTML标签本质是语义容器，需关注“在哪用、为什么用、不用会怎样”；必须闭合的标签如<p></p>、<div></div>等，自闭合标签如<img>、<input>等不可加结束标签，误写将导致DOM异常；语义化标签（如<nav>、<header>）不可用<div>替代，否则损害可访问性、SEO与维护性；<label>须正确绑定<input>以保障可用性；script推荐用defer（顺序执行、DOM就绪后运行）或async（独立无依赖脚本），避免同步阻塞。
HTML 标签不是“怎么用”而是“在哪用、为什么用这个、不用会怎样”——它本质是语义容器，不是样式开关。
哪些标签必须成对出现，哪些可以自闭合？
浏览器对标签闭合有默认容错，但不等于可以乱写。比如 <p> 必须配 </p>，否则后续段落可能被吞进前一个 <p> 里；而 <img>、<input>、<br> 是自闭合标签，写成 <img src="x"></img> 反而会被解析为两个元素（第一个有效，第二个被忽略）。
- 必须闭合的常见标签：
<div>、<span>、<section>、<article>、<p>、<ul>、<ol>、<li>、<header>、<footer> - 合法自闭合标签（HTML5 中无需斜杠）：
<img>、<input>、<br>、<hr>、<meta>、<link>、<source> - 别手贱给
<img>加</img>，Chrome 和 Firefox 都会把它当无效标签处理，DevTools 里能看到 DOM 树异常
为什么 <div> 和 <span> 不能替代语义化标签？
用 <div> 包标题、用 <span> 标段落，页面能显示，但对屏幕阅读器、SEO、维护性全是灾难。搜索引擎和辅助工具靠标签语义判断内容结构，不是靠 class 名或 CSS 样式。
-
<h1>～<h6>表示层级标题，不是“加粗大字”；跳过<h2>直接用<h4>会导致大纲断裂 -
<nav>告诉读屏软件“这是导航区”，<aside>表示附属内容，<time>能让日期被机器识别为时间类型 - 用
<div class="btn">而不是<button>，键盘用户按 Tab 无法聚焦，也无法用空格/回车触发
表单里 <label> 不绑定 for 或嵌套就等于没写
<label> 的核心作用是点击文字聚焦对应控件，提升可访问性和点击热区。如果没正确关联，移动端点选困难，读屏软件也读不出字段含义。
立即学习“前端免费学习笔记（深入）”；
- 正确方式一（显式绑定）：
<label for="username">用户名</label><input id="username" type="text">——for值必须严格等于id值，大小写敏感 - 正确方式二（隐式嵌套）：
<label>用户名<input type="text"></label>—— input 必须在 label 开闭标签内，不能用<label />自闭合 - 错误写法：
<label>用户名</label><input id="user">（无绑定）、<label for="user">用户名</label><input id="username">（id 不匹配）
script 标签放哪？defer 和 async 到底差在哪？
脚本位置直接影响页面渲染阻塞行为。放在 <head> 里又没加属性，页面会白屏等 JS 下载执行完才继续解析；放 </body> 前虽安全，但现代项目更推荐用属性控制加载逻辑。
-
defer：脚本并行下载，但严格按书写顺序执行，且等到 DOM 解析完成（DOMContentLoaded前）才运行 —— 适合依赖 DOM 的初始化脚本 -
async：脚本下载不阻塞 HTML 解析，但一旦下载完立刻执行（可能 DOM 还没解析完），执行顺序不确定 —— 适合统计、广告等无依赖独立脚本 - 没加任何属性的
<script src="x.js"></script>：同步加载+执行，会阻塞 HTML 解析和渲染 —— 现代项目应避免
真正难的不是记住标签名，而是理解每个标签背后承载的语义契约和浏览器行为约束。写完一段 HTML，不妨关掉 CSS，用纯文本模式看结构是否仍清晰可读——那是标签是否用对的最朴素检验。
