到是语义层级标记而非字体调节工具，必须按逻辑顺序逐级使用，一个页面仅有一个作为核心主题，为子级，为子级，不可跳级，否则破坏辅助技术和搜索引擎对页面结构的理解。
<h1></h1> 到 <h6></h6> 不是字体调节工具，而是语义层级标记——用错就等于告诉屏幕阅读器“这段话比主标题还重要”。
标题标签必须按层级使用，不能跳级
浏览器和搜索引擎依赖标题的嵌套结构理解页面逻辑。比如 <h2></h2> 应该是 <h1></h1> 的直接子级，<h3></h3> 是 <h2></h2> 的子级。现实中常见错误是：写完 <h1></h1> 直接跟 <h4></h4>，中间缺了 <h2></h2> 和 <h3></h3>，这会让辅助技术无法正确构建大纲树。
- 一个页面只应有且仅有一个
<h1></h1>（通常是页面主标题） -
<h2></h2>用于一级章节，<h3></h3>用于小节，依此类推 - 不要用
<h3></h3>去“让文字变小一点”，那是 CSS 的事
<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 和 <br> 的本质区别
<p></p> 是块级语义容器，表示一段完整、独立的文字内容；<br> 是纯表现型换行符，不带任何语义。滥用 <br> 拆分段落（比如把一个自然段硬拆成三行）会破坏可访问性，也导致响应式布局时换行位置失控。
- 正文分段必须用
<p></p>，哪怕只有两句话 -
<br>只适用于地址、诗歌、歌词等需要精确控制行断点的场景 -
<p></p>内部禁止嵌套<div> 或其他块级元素（HTML5 允许嵌套 <code><div>，但语义混乱，不推荐） <h3> <code><strong></strong>和<em></em>不只是加粗/斜体它们传递的是语气和权重信息：
<strong></strong>表示内容具有强重要性（如警告、关键条款），<em></em>表示强调或语气变化（如反语、重点重读）。视觉上默认加粗/斜体只是浏览器的 fallback 渲染，实际语义远超样式。立即学习“前端免费学习笔记（深入）”；
- 避免用
<b></b>或<i></i>替代——它们在 HTML5 中已降级为纯表现标签 - 嵌套使用有意义：
<strong><em>绝对不能删</em></strong>表示“绝对不能删”既有强重要性又有语气强调 - 屏幕阅读器对
<strong></strong>通常会加重语音，对<em></em>会改变语调
<hr>是语义分隔，不是装饰线<hr>表示主题或章节的逻辑中断，比如从“产品介绍”切换到“用户评价”。它不是用来画一条灰色横线的视觉工具——那应该用 CSS 的border-bottom或伪元素。- 不要给
<hr>加style="height:2px;background:#ccc;"这类纯样式属性 - 如果只是想在两个段落间加空行，用 CSS 的
margin-bottom更合理 - 现代项目中，
<hr>出现场景越来越少，多数被语义更明确的<section></section>+ heading 组合替代
真正难的不是记住哪些标签能用，而是每次敲下
<h3></h3>或<strong></strong>时，心里得清楚：这个标签此刻是在描述内容结构，还是在偷偷代替 CSS 干活。 - 避免用
