html文字分段源码

HTML文字分段基础

HTML中文字分段主要通过标签实现逻辑分层，常用标签包括<p>、<div>、<br>等,不同标签对应不同的语义和渲染效果。

核心标签详解

段落标签 <p>

• 语法：<p>内容</p>
• 特点：
  • 自动在段落前后添加空白间距
  • 光标聚焦时产生段落缩进效果
  • 不能嵌套其他<p>标签（HTML5规范）
• 示例：

  <p>这是第一段文字，包含多个句子。</p>
  <p>这是第二段文字，会自动与前段保持距离。</p>

换行标签 <br>

• 语法：<br>新行开始
• 特点：
  • 仅实现单次换行
  • 不会添加额外空白
  • 常用于诗、歌词等特殊排版
• 示例：

  五言绝句：<br>
  床前明月光，<br>
  疑是地上霜。

容器标签 <div>

• 语法：<div>内容</div>
• 特点：
  • 无默认样式，需CSS定义
  • 可嵌套其他块级元素
  • 常用于多段组合布局
• 示例：

  <div class="container">
    <div class="box">区块1</div>
    <div class="box">区块2</div>
  </div>

进阶排版技巧

保留格式文本

使用<pre>标签可保留文本中的空格和换行：

<pre>
  代码片段：
  function test() {
    console.log("Hello");
  }
</pre>

视觉分隔线

水平线通常与空段落搭配使用：

<hr>
<p>下一章内容</p>

文本对齐控制

通过CSS设置段落对齐方式：

<p style="text-align: center;">居中文本</p>
<p style="text-indent: 2em;">首行缩进2字符</p>

常见问题与解答

Q1：为什么推荐用<p>而不是多个<br>做段落？
A1：<p>标签具有语义化优势，能明确表达段落结构，搜索引擎和辅助阅读工具可更好解析内容层次，而连续<br>会导致代码冗余且难以维护。

Q2：<div>和<p>的本质区别是什么？
A2：<p>是语义化标签，专用于段落内容；<div>是通用容器，本身无语义，在CSS默认样式中，<p>带有上下 margin,而`