HTML 5段落
HTML5 段落 (Paragraphs) 学习笔记
在 HTML5 中，段落是文本内容的基本构建块。虽然核心标签<p>从 HTML4 继承而来，但 HTML5 在语义化结构、文本流控制以及与语义标签的配合方面有了更明确的规范。
一、核心标签：<p>
1. 基本用法
<p>标签用于定义一个块级段落。浏览器会自动在段落前后添加一定的垂直间距（margin）。
<p>这是一个标准的 HTML5 段落。</p><p>这是第二个段落，它会自动与第一个段落分开。</p>2. 关键特性
- 块级元素 (Block-level)：默认占据整行宽度，前后自动换行。
- 内容模型：只能包含流内容 (Flow Content)，且不能包含其他块级元素（如
<div>,<h1>, 另一个<p>等）。 - 自动闭合：如果忘记写
</p>，浏览器通常会自动闭合，但强烈建议始终显式闭合。
3. 常见错误与规范
- 错误：在
<p>标签内嵌套<div>或<h1>。<!-- 错误示例 --><p><div>这是错误的嵌套</div></p> - 正确：如果需要在段落中插入块级元素，应将
<p>包裹在父容器（如<div>或<section>）中，或者将块级元素放在<p>之外。<!-- 正确示例 --><section><p>这是第一段。</p><div>这是一个独立的块级元素。</div><p>这是第二段。</p></section>
二、HTML5 中的文本流与换行
1. 换行符的处理
在 HTML 源代码中，多个空格、换行符或制表符会被浏览器渲染为单个空格。
- 源代码：
<p>这是第一行。 这是第二行（前面有空格）。 这是第三行。</p> - 渲染结果：所有文字会显示在同一行，空格合并为一个。
2. 强制换行：<br>
如果需要在段落内部强制换行（例如诗歌、地址），使用<br>标签。
<p>床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>注意：
<br>是空标签，不需要闭合（<br>或<br/>均可）。
3. 水平分隔线：<hr>
用于表示主题转换或段落间的水平分隔。
<p>第一段内容...</p><hr><p>第二段内容（主题已转换）...</p>- HTML5 语义：在 HTML5 中，
<hr>不再仅仅是“水平线”，而是表示主题级别的转换（Thematic Break）。 - 样式：可以通过 CSS 去除默认样式，使其不可见，仅作为语义分隔。
三、段落与语义化结构
HTML5 强调将段落放入具有语义的容器中，而不是直接放在<body>中。
1. 常用容器
<article>：独立的、可分发的内容（如博客文章、新闻）。<section>：文档中的主题分组。<aside>：侧边栏内容，与主内容间接相关。<div>：无语义的通用容器（仅在需要样式或脚本操作时使用）。
2. 结构示例
<article><header><h1>文章标题</h1><p>发布日期：2026-04-09</p></header><section><h2>引言</h2><p>这是文章的引言段落，介绍背景。</p></section><section><h2>正文内容</h2><p>这是正文的第一段。</p><p>这是正文的第二段，包含一个<br>强制换行。</p><hr><p>这是正文的第三段，表示主题转换。</p></section><footer><p>作者：张三</p></footer></article>四、段落中的文本格式化
虽然<p>定义段落结构，但段落内部的文本可以使用 HTML5 提供的语义化标签进行格式化：
| 标签 | 语义 | 示例 |
|---|---|---|
<strong> | 重要内容(加粗) | <p>这是<strong>非常重要</strong>的提示。</p> |
<em> | 强调语气(斜体) | <p>我<em>真的</em>不知道。</p> |
<mark> | 高亮文本 | <p>请查看<mark>这里</mark>的说明。</p> |
<small> | 小号文本 (如版权、免责声明) | <p>版权所有 <small>© 2026</small></p> |
<del> | 删除线 | <p>原价：<del>100元</del> 现价：80元</p> |
<ins> | 下划线 (插入内容) | <p>修改后：<ins>新内容</ins></p> |
<sub> | 下标 | <p>H<sub>2</sub>O</p> |
<sup> | 上标 | <p>E=mc<sup>2</sup></p> |
<code> | 代码片段 | <p>使用 <code>console.log()</code> 调试。</p> |
<kbd> | 键盘输入 | <p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p> |
<samp> | 计算机输出 | <p>输出结果：<samp>Error 404</samp></p> |
<var> | 变量 | <p>公式：y = <var>m</var>x + <var>b</var></p> |
五、CSS 样式控制
虽然<p>有默认样式，但通常需要通过 CSS 进行定制：
p{font-size:16px;line-height:1.6;/* 行高，提高可读性 */margin-bottom:1em;/* 段落间距 */text-align:justify;/* 两端对齐 */text-indent:2em;/* 首行缩进（中文常用） */color:#333;}/* 针对特定段落 */p.important{font-weight:bold;color:#d9534f;}/* 去除首行缩进（英文常用） */p.no-indent{text-indent:0;}六、最佳实践总结
- 语义优先：始终使用
<p>表示段落，不要使用<div>或<br>堆叠来模拟段落。 - 避免嵌套：不要在
<p>中放置块级元素（<div>,<h1>-<h6>,<ul>,<table>等）。 - 合理使用
<br>：仅在需要强制换行（如诗歌、地址）时使用，不要用它来创建段落间距（应使用 CSSmargin）。 - 利用
<hr>：在主题转换时使用<hr>，而不是仅仅为了画一条线。 - 无障碍性：确保段落文本清晰，避免过长的段落，适当使用列表（
<ul>,<ol>）替代长段落。 - 响应式设计：使用相对单位（如
em,rem,%）设置字体和间距，以适应不同屏幕。
七、常见误区
| 误区 | 正确做法 |
|---|---|
用多个<br>制造段落间距 | 使用 CSSmargin或padding |
用<div>包裹文本模拟段落 | 使用<p>标签 |
在<p>中嵌套<div> | 将<div>放在<p>外部，或使用<span>(行内) |
用<h1>到<h6>做标题样式 | 使用 CSS 控制样式，标签只用于语义 |
忽略<small>的语义 | 使用<small>表示版权、免责声明等次要信息 |
八、总结
HTML5 的段落处理核心在于语义化和结构清晰：
<p>是段落的标准容器。<br>用于行内换行，<hr>用于主题分隔。- 结合语义化标签（
<article>,<section>）构建文档结构。 - 使用 CSS 控制视觉样式，而非 HTML 标签。
掌握这些规范，可以编写出结构清晰、SEO 友好、无障碍性强的 HTML5 文档。