HTML标签的关键在于正确使用位置和属性，空元素如<img><br>不可闭合，<div>与<span>区别在显示行为与嵌套规则，<a>嵌套块级元素需谨慎，<script>放置位置影响DOM操作，嵌套层级须符合规范。
HTML 标签不是“怎么用”的问题，而是“在哪用、为什么必须这么写”的问题——写错位置或漏掉关键属性，浏览器要么不渲染，要么渲染出完全不符合预期的结构。
标签必须成对出现吗？<img> 和 <br> 为什么没闭合
不是所有标签都需要闭合。HTML5 明确把 <img>、<br>、<input>、<meta> 这类叫“空元素”（void elements），它们天生没有内容，语法上禁止写 <img></img> 或 <br></br>。
- 写成
<img src="a.jpg"></img>不报错但无效，浏览器只认前半段，后半段被忽略 - XML 风格的自闭合写法
<img src="a.jpg" />在 HTML5 中合法，但斜杠纯属冗余，没必要加 - 混淆点常出现在
<div>里误用<p>：比如<p>第一段<p>第二段</p>，第二个<p>会自动触发前一个闭合，实际生成两个独立<p>，不是嵌套
<div> 和 <span> 到底该选哪个
区别不在“语义强弱”，而在“默认显示行为”和“可嵌套范围”。<div> 是块级容器，<span> 是行内容器，这个差异直接影响布局和 CSS 作用方式。
-
<div>默认独占一行，能直接设width/height，可以嵌套任何块级或行内元素 -
<span>默认不换行，宽度由内容撑开，不能直接设宽高（除非改display），只能嵌套行内元素（比如不能往<span>里塞<div>） - 常见错误：用
<span>包一段按钮组想水平排列，结果按钮堆成一串没间距——该用<div>加display: flex，而不是硬调<span>的样式
为什么 <a> 里套 <div> 会出问题
HTML5 允许 <a> 包含块级元素，但前提是它“不包含交互式内容”——而 <button>、另一个 <a>、<input> 就不行。更关键的是，老浏览器或某些辅助工具可能不识别这种写法。
立即学习“前端免费学习笔记（深入）”；
- 现象：点击区域变小、键盘 Tab 跳转异常、屏幕阅读器读不出完整链接文本
- 真正安全的写法是让
<a>只包裹行内内容，块级结构用外层<div>+onclick或事件委托替代 - 如果非要用
<a>包块级内容，确保 href 有效、加role="link"、测试键盘导航路径
<script> 放 <head> 还是 <body> 底部
放哪取决于脚本是否操作 DOM。放在 <head> 里又没加 defer 或 async，99% 会报 Cannot read property 'xxx' of null——因为 DOM 还没加载完，document.getElementById 找不到元素。
- 同步脚本（无
async/defer）：必须放在</body>前，或监听DOMContentLoaded -
defer：脚本按顺序下载，等 DOM 解析完再执行，适合依赖 DOM 的初始化逻辑 -
async：下载不阻塞，下载完立刻执行，适合统计、广告等无依赖脚本，但执行顺序不确定 - 现代写法倾向：放
<head>+defer，比手动挪到底部更可控
最常被忽略的其实是标签嵌套层级和上下文限制——比如 <p> 里不能放 <h1>，<li> 外不能直接写 <div>，这些不是浏览器宽容就能绕过的规则，而是解析器强制修正的结果。写的时候顺手验证下 DOM 结构，比事后调试快得多。
