该用<p>而非<div>当内容是一段具有完整语义的文本，它明确表示逻辑段落，而<div>仅为无语义布局容器；误用会破坏可访问性、SEO及DOM结构。
什么时候该用 <p> 而不是 <div>
当内容是一段具有完整语义的文本（比如一句话、一个观点、一段说明），就该用 <p>。它不只是“换行”，而是告诉浏览器和辅助工具：“这是一个逻辑段落”。<div> 没有这层含义，纯属布局容器。
常见误用场景：
- 把标题、按钮、图标等非文本块塞进
<p>—— 这会破坏语义，屏幕阅读器可能读成“段落：首页”，很奇怪 - 用多个
<p>包裹单行短文本（如表单项提示），不如用<span>或直接加 CSS - 在
<li>里嵌套<p>（除非内容本身是多段文字），多数情况<li>自带语义已足够
<strong> 和 <em> 不是加粗/斜体的快捷键
它们表达的是语气强度：<strong> 表示内容重要性高（比如错误提示、必填项说明），屏幕阅读器会加重语气；<em> 表示轻度强调或语调变化（比如反讽、重点词）。
别用它们替代 <b> 或 <i> 来单纯实现样式——那属于 CSS 职责。如果只是想让某段文字变粗但无语义重点，就该用 font-weight。
立即学习“前端免费学习笔记（深入）”；
典型踩坑：
- 新闻标题里每个关键词都套
<strong>—— 消耗语义权重，反而稀释真正关键信息 - 用
<em>包裹整段话，等于告诉辅助工具“这段全在强调”，失去区分度 - 在代码示例中误用
<strong>替代<code>，导致语法高亮失效或可访问性下降
<code>、<pre>、<samp> 的分工很明确
这三个标签不是“都能放代码”，各自有不可替代的语义边界：
-
<code>：表示一小段计算机代码（比如函数名querySelectorAll、CSS 属性display: flex） -
<pre>：保留原始格式（空格、换行、缩进），适合多行代码块或日志输出，通常需配合<code>使用：<pre><code>...</code></pre> -
<samp>：表示程序运行时的输出结果（比如终端报错<samp>ReferenceError: x is not defined</samp>），不是你写的源码
混用后果明显：搜索引擎可能把 <pre> 当作普通文本索引，而忽略其中的代码语义；屏幕阅读器对 <samp> 会按“输出”语调朗读，和 <code> 的“输入”语调不同。
标题层级（<h1>–<h6>）不是样式开关
<h1> 是页面唯一主主题，不是“最大的字”。它的缺失或重复会直接影响 SEO 和屏幕阅读器导航流。浏览器默认样式可以改，但语义层级不能跳。
实际开发中容易忽略的约束：
- 一个页面只应有一个
<h1>，且通常放在<main>内部或紧邻其上 - 不要为了视觉效果跳级（比如
<h2>后直接<h4>），必须保持逻辑连续 -
<section>或<article>内部可重新起始层级（例如<section><h2>...），但不意味着能绕过全局结构
最常被忽视的一点：服务端渲染或 CMS 输出的标题可能自动包裹了 <h1>，前端再加一个就造成重复——得先检查 DOM 结构，而不是直接写 CSS 隐藏。
