是语义化段落容器，非换行工具；必须用于逻辑完整的文字段落，如新闻导语、产品描述；仅限同一段内强制换行，如地址、诗歌；混用会损害SEO、可访问性及样式控制。
<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 标签不是“换行工具”，而是语义化段落容器；用错会导致 SEO 偏差、屏幕阅读器误读、样式复用困难。
什么时候该用 <p></p>，而不是 <br>
核心判断标准：是否构成一个**逻辑完整的文字段落**。
- 用
<p></p>：一句话讲完一个完整意思（如新闻导语、产品描述、用户协议条款） - 用
<br>：同一段话内强制换行（如地址、诗歌、签名档），且不改变语义结构 - 常见错误：把多行短句硬塞进一个
<p></p>里，再靠<br>拆分——这会让语义丢失，CSS 无法单独控制每行间距 - 更糟的做法：用多个
<p></p>包裹单行文本（如导航文字、标签列表），会引入多余上下边距，破坏行高一致性
<strong></strong> 和 <b></b> 的实际差异不止是“语义”
浏览器默认渲染效果相同，但行为逻辑完全不同：
-
<strong></strong>表示内容有强重要性，会被屏幕阅读器加重语气朗读，搜索引擎也会加权 -
<b></b>仅表示“视觉加粗”，无语义权重，适合品牌名、术语首次出现等中性强调场景 - CSS 中若重置了
font-weight，<strong></strong>仍保有语义价值，而<b></b>只剩样式残留 - 别用
<strong></strong>给按钮文字加粗——按钮本身已有role="button"语义，重复强调反而干扰辅助技术
<pre class="brush:php;toolbar:false;"></pre> 的空格和换行保留机制很“刚”，但容易踩坑
<pre class="brush:php;toolbar:false;"></pre> 不是“美化代码块”的万能解，它原样输出所有空白符，包括缩进、制表符、连续空格。
立即学习“前端免费学习笔记（深入）”；
- 直接粘贴带缩进的 Markdown 或 JSON 到
<pre class="brush:php;toolbar:false;"></pre>里，可能因首行缩进而导致整体左移 - 在
<pre class="brush:php;toolbar:false;"></pre>内写 HTML 标签（如<span></span>）不会被解析，只会当纯文本显示——需要配合<code>嵌套使用 - 响应式排版下，
<pre class="brush:php;toolbar:false;"></pre>容易横向溢出，必须手动加overflow-x: auto或white-space: pre-wrap - 替代方案：对代码片段优先用
<pre class="brush:php;toolbar:false;"><code></code> 组合，并配 <code>language-xxx</code> class 供语法高亮库识别</pre>
真正难的不是记住标签名，而是每次敲下 时，先问一句：这个内容在没有样式、没有 JS、只靠语义被读取时，是否还能被正确理解？
