是页面唯一核心标题，位于下首层且仅一个；至须逐级嵌套，不可跳级；为段落文本块，常嵌套于标题之下，自带间距。
怎么一眼识别 <p></p>、<h1></h1> 到 <h6></h6> 的作用？
别背定义，直接看缩进+位置+字体大小。打开任意网页源码，<h1></h1> 几乎总在 下第一层或紧贴 <header></header>，而且通常只有一个；<h2></h2> 多出现在章节开头，常和 <section></section> 或 <article></article> 同级；<p></p> 则大量嵌套在这些标题之下，缩进更深，内容通常是连续文本块。
常见错误现象：<h1></h1> 被滥用（一页多个）、用 <div> + CSS 模拟标题（屏幕阅读器读不出层级）、<code><p></p> 里塞 <h2></h2>（破坏语义嵌套）。
-
<h1></h1>到<h6></h6>是严格层级关系，不是“字号工具”，跳级（如<h1></h1>后直接<h3></h3>）会影响 SEO 和辅助技术解析 -
<p></p>自动带上下外边距，但不会合并相邻段落的空白——两个<p></p>连写，视觉上是双倍间距 - 浏览器默认样式中，
<h1></h1>字号最大、加粗最重；<h6></h6>最小、最轻，这个梯度不能靠 CSS 强行颠倒
<strong></strong> 和 <em></em> 看似都加粗/斜体，为什么不能互换？
它们表达的是不同语义： <strong></strong> 表示内容有强重要性（比如警告、关键参数），屏幕阅读器会加重语气读出；<em></em> 表示强调语气（比如反语、对比），读法会变调但不加重。
使用场景差异明显：
- 表单校验提示用
<strong></strong>：“<strong></strong>邮箱格式不正确” - 句子中突出某个词用
<em></em>：“你真的<em></em>只改了一行代码？” - 千万别用
<b></b>和<i></i>替代——它们纯样式标签，无语义，HTML5 中已降级为“不推荐”
哪些文本标签容易被忽略但实际高频使用？
<small></small>、<mark></mark>、<del></del>、<u></u> 这几个在文档、后台系统、编辑器预览中出现频率远超预期，但新手常因“长得不像标题/段落”而跳过。
-
<small></small>不是“小字号CSS”，而是语义上的“附属信息”，比如版权、免责声明、脚注，浏览器默认缩小但保持可读性 -
<mark></mark>用于高亮搜索关键词或重点句，自带黄色背景，但可被 CSS 覆盖；注意它不等于<span class="highlight"></span> -
<del></del>必须包裹被删除的文本，不能只写<del></del>空标签；配合<ins></ins>可形成“删改对比”，如版本 diff -
<u></u>在 HTML5 中已恢复语义：表示非标准文本（拼写检查下划线、专有名词、中文拼音标注等），不再是“下划线样式开关”
嵌套出错时，怎么快速定位问题？
最常崩的是 <p></p> 里塞块级标签（如 <div>、<code><h2></h2>、<ul></ul>），浏览器会自动闭合 <p></p>，导致 DOM 结构和你写的完全对不上。
实操建议：
- 右键 → “查看页面源代码”，不要看“Elements”面板——后者是浏览器修复后的 DOM，会掩盖原始错误
- 遇到布局错乱，先搜
<p></p>，再看它内部有没有<div> 或标题标签；有，基本就是根源 <li>用 VS Code 安装 “Auto Close Tag” 插件，写 <code><p></p>时自动补 ，减少手误闭合遗漏 -
<pre class="brush:php;toolbar:false;"></pre>和<code>必须成对出现且不能跨行随意断开，否则缩进和换行会失效
真正卡住人的往往不是标签记不住，而是没意识到：浏览器对非法嵌套的“容错修复”机制，会悄悄改写你的结构。看懂 HTML，第一步是学会分辨“你写的”和“浏览器最终执行的”到底是不是一回事。
