p标签是不可嵌套的块级语义元素，浏览器会自动闭合前一个p并开启新p，导致DOM结构与源码不一致；br仅用于段落内换行，非段落分割工具。
<p> 标签不是“换行工具”，<br> 也不是“段落分割器”——这是初学者最常混淆的起点。错用直接导致语义断裂、SEO降权、屏幕阅读器朗读错乱，甚至影响 RPA 工具 XPath 定位。
为什么 <p> 里嵌套 <p> 会报错？
HTML 规范明确定义：<p> 是**块级、不可嵌套**的流内容元素。浏览器解析时一旦遇到内部 <p>，会自动闭合前一个，再开新段落——你写的嵌套结构根本不会生效。
- 常见错误现象：
<p>第一段<p>第二段</p></p>渲染结果等价于<p>第一段</p><p>第二段</p>，但 HTML 验证器会报Unexpected end tag “p” - 正确做法：用多个独立
<p>，或用<div>+ CSS 控制样式隔离（仅当无语义需求时） - 注意：
<div>不是语义替代品；若内容确为“段落群组”，应考虑<section>+<h2>结构
<strong> 和 <b> 看起来一样，为什么不能混用？
视觉表现确实相同，但语义层级完全不同：<strong> 表示强重要性（如警告、关键条款），会被屏幕阅读器加重语气；<b> 仅表示“不带额外语义的加粗”，比如产品名、关键词、汉字拼音标注等。
- 典型误用：
<p>请<b>立即付款</b>，否则订单取消</p>—— 这里“立即付款”是操作指令，应改用<strong> - 性能影响：无；但无障碍合规性（WCAG）和 SEO 权重分配会受影响
- 检查方法：用 Chrome 开发者工具 → Elements 面板右键节点 → “Inspect Accessibility Properties”，看 role 是否为
alert或strong
<hr> 和 <div style="border-top:1px solid #ccc"></div> 本质区别在哪？
<hr> 是语义化分隔符，代表主题/章节的自然中断；而纯 CSS 边框只是视觉装饰，对 DOM 结构、辅助技术、打印样式表均无意义。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：用
<hr>分隔导航菜单项（非主题切换）、或在表单字段间滥用——这会让屏幕阅读器读出“horizontal rule”，打断用户预期 - 使用场景：
<hr>应出现在逻辑断点，例如正文与评论区之间、不同作者文章之间 - 兼容性提示：所有现代浏览器支持；但部分老旧邮件客户端会忽略
<hr>样式，此时需额外加style="margin:0.5em 0"控制间距
<pre> 保留空格却让文字溢出容器，怎么解？
<pre> 的核心行为是“保留所有空白符+禁用自动换行”，所以长代码行或无空格文本（如 base64）会撑破父容器，尤其在移动端。
- 标准解法：配合 CSS
white-space: pre-wrap或pre-line，再加overflow-x: auto - 推荐写法：
<pre style="white-space: pre-wrap; overflow-x: auto; max-width: 100%">...</pre>
- 注意：不要用
<pre><code>嵌套却不设code语言类（如class="js"），否则 Prism.js 等高亮库无法触发
真正难的不是记住标签怎么写，而是判断“这里该不该用这个标签”。比如 <mark> 不是高亮工具，而是标记“与当前上下文相关的重要片段”；<q> 自动加引号的前提是它必须被浏览器识别为内联引用——这些细节，一不留神就让页面在语义层失效。
