应优先使用语义化html标签：用于独立段落，～须按逻辑层级嵌套，/表达语义强调，表示主题转换，专指引用内容。
直接用 <p></p>、<h1></h1>～<h6></h6>、<br>、<hr> 这几个标签就能完成绝大多数基础文字排版，不需要额外 CSS 或 JS。
什么时候该用 <p></p> 而不是多个 <br>
当内容在语义上是「独立段落」时，必须用 <p></p>。比如文章正文、说明文字、用户协议条款——它们有逻辑边界，浏览器默认加 margin，屏幕阅读器也会按段落停顿。
用多个 <br> 模拟段落间距是常见错误，会导致：
- 可访问性失效：读屏软件把整块内容当成一个长段落，无法跳转
- 响应式断裂：移动端无法统一控制段间距，
<br>不受 CSSmargin影响 - SEO 削弱：搜索引擎依赖
<p></p>识别正文主体结构
示例对比：
<p>第一段文字。</p> <p>第二段文字。</p>
✅ 正确；而下面这种写法应避免：
第一段文字。<br><br>第二段文字。
<h1></h1> 到 <h6></h6> 的层级不能跳着用
标题不是“字号控制工具”，而是内容大纲的骨架。搜索引擎和辅助技术靠它理解页面结构。
常见误用：
- 用
<h3></h3>直接跟在<h1></h1>后面，中间缺<h2></h2>（破坏层级） - 一个页面出现多个
<h1></h1>（现代 SEO 推荐仅一个主标题） - 为样式改用
<h5></h5>显示大号字（应改 CSS，而非滥用语义标签）
正确做法是按内容逻辑嵌套：
<h1>产品介绍</h1> <h2>核心功能</h2> <h3>实时同步</h3> <h3>离线编辑</h3> <h2>使用指南</h2>
<strong></strong> 和 <em></em> 不是 <b></b> 与 <i></i> 的替代品
前者表达语义强调（重要性/语气变化），后者只是视觉样式。例如：
-
<strong>密码错误</strong>：告诉屏幕阅读器“这是关键错误提示” -
<b>用户名</b>：仅表示“这个词要加粗”，无语义权重 -
<em>真的</em>不要点：传达反讽或强调语气 -
<i>café</i>：表示外语词、术语、船名等特殊用法（W3C 规范定义）
多数现代项目应优先选 <strong></strong> / <em></em>，除非你明确只需要纯样式且不关心语义。
<hr> 和 <blockquote></blockquote> 都带语义，别当装饰线用
<hr> 表示「主题转换」，不是画线；<blockquote></blockquote> 表示「引用他人内容」，不是缩进样式。
错误用法：
- 用
<hr>分隔导航栏和正文（应改用 CSS 边框或 margin） - 用
<blockquote></blockquote>实现文本右缩进（应改用text-indent或padding）
正确场景：
-
<hr>出现在「用户评论区」和「相关文章推荐」之间 -
<blockquote></blockquote>包裹第三方 API 文档中的示例代码说明
这些标签一旦被误用，会干扰爬虫判断内容权重，也影响键盘用户用 Tab 跳转时的逻辑流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
