html标签需依语义选用：表重要性，表强调，组合展示多行代码，用于行内代码，仅用于内容换行如地址诗行。
HTML格式化标签不是靠“背”出来的，而是靠结构意识和语义判断练出来的。 你写 <strong></strong> 不是为了加粗，而是告诉浏览器“这段文字有更强的语气权重”；用 <em></em> 不是为斜体，而是标记“需要强调的语义重点”。脱离语义去套样式，后面改CSS、做SEO、适配读屏器全要踩坑。
什么时候该用 <strong></strong> 而不是 <span style="font-weight:bold"></span>
前者表达内容重要性，后者只表达视觉效果。搜索引擎和辅助技术会识别 <strong></strong> 的语义权重，但对内联样式完全无视。比如商品页价格旁写“限时折扣”，用 <strong></strong> 比用 <span></span> 更利于 SEO 提权；而按钮里一个纯装饰性图标加粗，就真该用 CSS。
- 页面中关键操作提示（如“确认删除？”）优先用
<strong></strong> - 需要被屏幕阅读器特别朗读加重的词，必须用
<strong></strong>或<em></em> - 仅因设计稿要求某处文字加粗、且无语义差异时，走 CSS
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 的分工容易搞混
<pre class="brush:php;toolbar:false;"></pre> 保留原始换行与空格，适合整段代码块、诗歌、日志输出；<code> 是行内元素，只标记“这是代码片段”，不保留缩进或换行。常见错误是把一段函数定义直接塞进 <code> 里——结果所有换行丢失，变成一长串挤在一起的文本。
- 显示多行代码：用
<pre class="brush:php;toolbar:false;"><code>...</code></pre>套用，<code>负责语义，<pre class="brush:php;toolbar:false;"></pre>负责格式 - 行内出现函数名如
fetch()或变量userToken，单独用<code> -
<pre class="brush:php;toolbar:false;"></pre>默认等宽字体，但若需自定义字体，请用 CSS 控制font-family，别依赖浏览器默认
别再用 <br> 来“调间距”
<br> 的唯一合法用途是表示**内容本身的换行**，比如地址、诗行、歌词。用它撑开段落间距，会导致响应式断点错乱、打印样式失效、无障碍阅读中断。真实项目里，95% 的“空行需求”应该交给 margin 或 padding。
- 地址显示：
<p>北京市朝阳区<br>建国路8号</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>
✅ 合理 - 想让两个
<p></p>之间空一行：<p>第一段</p> <br><p>第二段</p>❌ 错误，应改用 CSS - 表格单元格里强行换行？先检查是否该拆成多行数据，或用
white-space: pre-line
最常被忽略的一点：格式化标签的嵌套深度。比如 <strong><em><code>foo() 看似“更强调代码”，实则语义混乱——<code> 已含技术语境，再套 <em></em> 反而干扰解析。保持标签最小必要集，比堆砌更难，也更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
