HTML文本标签关键在语义匹配、合法嵌套与预期渲染：strong表重要性，b仅样式；h1-h6须层级递进且h1唯一；p为段落容器，br仅强制换行；strong/em/mark语义各异，不可混用；hr表主题分隔，pre保空格换行。
HTML文本标签不是“写完就能用”，关键在语义是否匹配、嵌套是否合法、浏览器是否按预期渲染——比如 <strong> 和 <b> 都加粗，但前者表示“重要性”，后者只是样式，SEO 和屏幕阅读器处理完全不同。
标题标签 <h1> 到 <h6> 的层级不能跳着用
搜索引擎和辅助技术依赖标题的嵌套结构理解页面逻辑。跳级（比如 <h1> 后直接写 <h3>）会破坏大纲，导致导航困难或 SEO 权重分散。
- 一个页面只应有一个
<h1>，通常是主标题 -
<h2>作为一级章节，<h3>是子节，依此类推 - 不要用
align属性居中标题（已废弃），改用 CSS 的text-align或margin: auto -
<h1>到<h6>默认有上下外边距和字体大小，重置时注意保留语义，别只靠<div>+ CSS 模拟
<p> 和 <br> 的本质区别经常被混淆
<p> 是段落容器，自带语义和默认间距；<br> 只是强制换行，无任何语义。滥用 <br> 拆分段落会让内容结构扁平化，影响可访问性和响应式排版。
- 地址、诗歌、歌词等需要保留换行且无段落语义的内容，才适合用
<br> - 想控制段落间距？改
margin或line-height，别塞一堆<br> -
<p>内部不能嵌套<h1>、<div>等块级元素（HTML5 允许嵌套<header>等语义标签，但常规布局仍建议避免）
<strong>、<em>、<mark> 不是“加粗/斜体/高亮”的快捷键
它们传递的是不同层次的语义：重要性、强调、上下文相关标记。浏览器默认样式只是附带效果，不能反推用途。
立即学习“前端免费学习笔记（深入）”；
-
<strong>表示内容**强重要**，屏幕阅读器会加重语气；<b>仅视觉加粗，无语气变化 -
<em>是轻量强调（常转为斜体），<i>用于分类性文字（如术语、船名、外语词），不是“随便斜一下” -
<mark>专指需要**突出显示以引起注意**的文本（如搜索关键词高亮），别用来做装饰性高亮 - 所有这些标签都支持嵌套，但嵌套过深（比如
<strong><em><mark>）会削弱语义清晰度，慎用
<hr> 和 <pre> 的实际使用场景很窄但不可替代
<hr> 不是“画条线”，而是表示**主题或章节的分隔**；<pre> 也不是“让文字不换行”，而是**保留原始空格与换行的预格式化语义**。
-
<hr>后面不该紧跟<p>—— 它本身已是语义分隔符，周围留白由 CSS 控制更合理 -
<pre>里内容会原样渲染，包括缩进和换行，适合代码片段、ASCII 图、日志输出；但大段内容要考虑响应式截断或滚动 - 别用
<pre>实现“首行缩进”或“多空格对齐”，那是 CSS 的活（text-indent、white-space等） -
<hr>和<pre>都是单标签，不需要闭合（<hr />写法合法但非必须）
真正容易出问题的，往往不是“会不会写”，而是“为什么这么写”。比如把 <h2> 当作加大字号的工具，或用 <mark> 给按钮加背景色——语义错位会在后期维护、无障碍测试、SEO 优化时集中爆发，而且越晚发现，修复成本越高。
