<p>不能套<p>，因为HTML规范禁止块级元素<p>嵌套自身；但<p>可以套<strong>，因<strong>是行内语义标签，合法且不破坏段落流式布局。
为什么
不能套
，但可以套 ？
浏览器解析时会自动“修正”非法嵌套，比如把 内容
元素。这不是容错，而是规范强制行为——
是块级元素，不允许子元素也是
。但 是行内语义标签，属于合法子元素，且不会破坏段落流式布局。
常见错误现象：
里直接写另一个
，结果页面多出一个空段落，或者文字挤在一起没间距。
- 正确做法：用
包裹整段文字，内部强调用 、、
等行内容器</li> <li>别用 <p> 当“换行工具”：想空一行就写一个 <p>，想空两行就写两个 <p>——这会让语义混乱，也难维护</li> <li>性能影响：过度拆分 <p> 会增加 DOM 节点数，对长列表页或 SSR 渲染有轻微负担</li> </ul> <H3><pre class="brush:php;toolbar:false;"> 和 <p> 的换行与空格处理差异</H3> <p><pre class="brush:php;toolbar:false;"> 完全保留源码中的所有空白符（包括缩进、制表符、连续空格和换行），适合展示代码、日志或诗歌；<p> 则把所有连续空白压缩为单个空格，换行只靠标签本身或 CSS 控制。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>典型误用场景：想让一段地址分行显示，却用了 <pre class="brush:php;toolbar:false;">，导致字体等宽、缩进错乱、响应式失效。</p> <ul> <li>要控制换行但保留语义，优先用 <br> 配合 <p>，而不是 <pre class="brush:php;toolbar:false;"></li> <li><pre class="brush:php;toolbar:false;"> 里的内容默认不换行，长文本需加 CSS：<code>white-space: pre-wrap
- SEO 友好性：
内容会被索引，但搜索引擎可能忽略其格式意图；<p> 更利于理解段落结构</p>
和 都加粗，什么时候该选哪个？
视觉上没区别，但语义完全不同： 表示内容有强重要性，屏幕阅读器会加重语气； 只是“不加粗的样式”，比如关键词、产品名、翻译中的拉丁文——它不传递权重。
常见错误现象：CMS 后台富文本编辑器默认输出 ，导致无障碍测试失败；或者 SEO 工具提示“关键文案未用 包裹”。
- 用户操作提示、错误信息、核心功能按钮文案 → 用
- 品牌名、技术术语、纯样式需求（如菜单项高亮）→ 可用 ，但更推荐用 class + CSS
- 别混用：嵌套 没必要，语义叠加无意义
alt 属性缺失或为空，为什么比图片加载失败更危险？
图片加载失败只是视觉降级；但 缺
更隐蔽的问题：某些爬虫和 RPA 工具（如影刀、UiPath）依赖
- 图标类图片（如搜索放大镜）：alt="" 是合理的，表示装饰性，但必须加
- 带文字说明的图（如步骤图）：alt 应描述动作，例如 "点击‘提交’按钮后弹出成功提示框"
- 绝对不要写 alt="图片" 或 alt="logo"——这是无效描述，等于没写
、、 这些看似简单的标签，一旦脱离语义上下文使用，会在无障碍、SEO、自动化测试三个维度同时埋雷。它们不是“写完能显示就行”的工具，而是网页含义的最小表达单元。
