如何在HTML5中为章节的第一段设置样式？

好问题！我来帮你理清楚这个事儿～首先直接给你结论：HTML5并没有原生的默认方式专门标记“章节首段”，浏览器的默认样式里也没有针对这种场景的规则，得我们自己通过CSS结合合理的HTML结构来实现。

下面给你两种比你现在用<p1>更优的方案：

方案1：利用CSS结构选择器（推荐，无需额外修改HTML） #

如果你的章节是用语义化标签（比如<section>）包裹，标题（<h2>/<h3>等）紧跟在章节标签内，那可以用相邻兄弟选择器直接定位到章节标题后的第一个段落，完全不需要给段落加额外的class或自定义标签。

举个完整的例子：

/* 所有段落默认设置缩进 */
p {
  text-indent: 2em;
  margin: 0.5em 0;
}

/* 定位section下标题后的第一个段落：取消缩进 */
section > h2 + p {
  text-indent: 0;
}

/* 给这个首段的首字母设置特殊样式 */
section > h2 + p::first-letter {
  font-size: 2.2em;
  font-weight: bold;
  float: left;
  margin-right: 0.15em;
  line-height: 1;
}

对应的HTML结构（完全语义化，没有额外标记）：

<section>
  <h2>第一章：HTML语义化实践</h2>
  <p>这是章节的第一段，会自动应用无缩进+首字母放大加粗的样式，完全不需要额外加class或者自定义标签。这种方式既符合HTML语义规范，又能减少冗余代码。</p>
  <p>这是章节的第二段，会继承p标签的默认缩进样式，和首段形成区分。</p>
  <p>第三段同样保持默认缩进...</p>
</section>

这个方案的优点是：语义化拉满，不用手动给每个首段加标记，维护起来特别省心——只要你保持章节的结构规范，样式会自动生效。

方案2：给首段加语义化class（灵活适配各种结构） #

如果你的章节结构不固定（比如有时候不用<section>，或者标题和段落的层级关系不确定），那给首段加一个清晰的class是更稳妥的选择，比如.chapter-first，比你自定义的<p1>标签规范得多（自定义标签不是HTML5标准元素，浏览器默认会把它当作inline元素处理，还要额外设置display:block，而且语义上完全不清晰）。

代码示例：

p {
  text-indent: 2em;
}

.chapter-first {
  text-indent: 0;
}

.chapter-first::first-letter {
  font-size: 2em;
  font-weight: 700;
}

HTML结构：

<h1>书籍标题</h1>
<h2>第一章：入门指南</h2>
<p class="chapter-first">这是第一章的首段，通过class标记，样式精准生效。</p>
<p>第二段恢复默认缩进...</p>

<h2>第二章：进阶技巧</h2>
<p class="chapter-first">这是第二章的首段，同样应用特殊样式...</p>

这个方案的优点是灵活，不管你的章节结构怎么变，只要给首段加上class就能生效，适合结构比较零散的场景。

为什么不推荐用自定义<p1>标签？ #

你之前用的<p1>属于自定义元素，虽然浏览器能勉强识别，但有几个明显的问题：

1. 不符合HTML5规范，语义上完全没有意义，其他开发者看代码会困惑；
2. 自定义元素默认是inline显示，你得额外写p1 { display: block; }才能让它像段落一样布局；
3. 后续如果要扩展样式，比如给所有首段加统一效果，自定义标签的可维护性远不如class或结构选择器。

内容的提问来源于stack exchange，提问作者Voprosnik