应优先用表强重要性（如警告）、表语气强调（如转折），和仅用于无语义视觉样式（如学名、代码标识）；表上下文强相关，专用于附属文本，表语义分隔而非装饰。

哪些文本标签常被误用但其实有明确语义边界

很多人把 <b></b> 当成“加粗工具”，把 <i></i> 当成“斜体开关”，这是最典型的语义混淆。实际上，<strong></strong> 表示内容具有强重要性（比如警告、关键参数），屏幕阅读器会加重语气；<em></em> 表示强调语气（比如反讽、转折），会改变语调。而 <b></b> 仅用于“无特殊语义的视觉加粗”，比如关键词高亮；<i></i> 仅用于“非中文语境下的惯用表达”，比如拉丁学名、船名、外语短语。

• <mark></mark> 适合标注搜索结果中的匹配词、文档批注、临时高亮内容，不是通用“荧光笔”
• <small></small> 专用于法律条款、版权信息、免责声明等附属文本，不是“缩小字号”的快捷方式
• <del></del> 和 <ins></ins> 是成对出现的编辑痕迹标签，不是装饰性删除线/下划线

段落与换行：什么时候该用 <p></p>，什么时候必须用 <br>

<p></p> 是语义完整的独立内容单元，浏览器默认上下留白、独占一行；<br> 是纯排版指令，只在诗歌、地址、歌词等需要**保留人工换行逻辑**的场景才合法使用。滥用 <br> 拆分段落会导致语义断裂、SEO 权重稀释、屏幕阅读器朗读混乱。

• 新闻正文、博客文章、说明书文字 → 全部用 <p></p> 包裹，靠 CSS 控制间距
• 邮政地址：<p>北京市海淀区中关村大街1号<br>邮编：100084</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> —— 这里 <br> 是合理的，因为地址行之间是结构化换行，不是语义分段
• 连续多行诗句：<p>床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>

<hr> 不是“画条线”那么简单

<hr> 的本意是表示主题或章节的**语义分隔**，不是视觉装饰。W3C 明确指出：如果只是为了加一条线做样式分隔，应该用 CSS 边框（border-bottom）或伪元素（::after）。只有当上下两段内容属于完全不同的逻辑模块（比如正文结束、附录开始；用户评论区与广告位之间），才应使用 <hr>。

• 错误用法：<div class="card"> <hr> <h3>产品特性</h3> </div> —— 这里只是卡片内部分隔，无语义切换
• 正确用法：<main><p>本文分析了算法原理...</p> <hr> <aside><h3>延伸阅读</h3></aside></main>
• 现代项目中，<hr> 建议配合 ARIA 属性增强可访问性：<hr aria-label="章节分隔线">

标题标签 <h1></h1>–<h6></h6> 的层级陷阱

标题不是按“字号大小”选的，而是按**内容在整页中的逻辑权重**选的。一个页面只能有一个 <h1></h1>（通常是主标题或 Logo 文字），它代表整个文档的主题锚点；<h2></h2> 是它的直接子级（如章节），<h3></h3> 是 <h2></h2> 的子级，依此类推。跳级（比如 <h2></h2> 后直接 <h4></h4>）或重复使用 <h1></h1> 会破坏文档大纲，影响 SEO 和辅助技术导航。

• CMS 系统生成的详情页，常把文章标题设为 <h1></h1>，侧边栏“相关推荐”标题必须降为 <h2></h2> 或更低
• 组件化开发中，避免在子组件内硬编码 <h1></h1>，改用 props 传入 heading level，由父组件统一控制层级
• 用浏览器开发者工具的“无障碍”面板可实时查看生成的大纲树，验证是否合理

真正容易被忽略的是：所有这些标签的语义价值，只在**脱离 CSS 渲染后依然成立**。比如关闭样式再看页面，<strong></strong> 仍被读作强调，<h2></h2> 仍被识别为二级导航点——这才是它们存在的根本理由。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！