HTML 5段落

HTML5 段落 (Paragraphs) 学习笔记在 HTML5 中段落是文本内容的基本构建块。虽然核心标签p从 HTML4 继承而来但 HTML5 在语义化结构、文本流控制以及与语义标签的配合方面有了更明确的规范。一、核心标签p1. 基本用法p标签用于定义一个块级段落。浏览器会自动在段落前后添加一定的垂直间距margin。p这是一个标准的 HTML5 段落。/pp这是第二个段落它会自动与第一个段落分开。/p2. 关键特性块级元素 (Block-level)默认占据整行宽度前后自动换行。内容模型只能包含流内容 (Flow Content)且不能包含其他块级元素如div,h1, 另一个p等。自动闭合如果忘记写/p浏览器通常会自动闭合但强烈建议始终显式闭合。3. 常见错误与规范错误在p标签内嵌套div或h1。!-- 错误示例 --pdiv这是错误的嵌套/div/p正确如果需要在段落中插入块级元素应将p包裹在父容器如div或section中或者将块级元素放在p之外。!-- 正确示例 --sectionp这是第一段。/pdiv这是一个独立的块级元素。/divp这是第二段。/p/section二、HTML5 中的文本流与换行1. 换行符的处理在 HTML 源代码中多个空格、换行符或制表符会被浏览器渲染为单个空格。源代码p这是第一行。 这是第二行前面有空格。 这是第三行。/p渲染结果所有文字会显示在同一行空格合并为一个。2. 强制换行br如果需要在段落内部强制换行例如诗歌、地址使用br标签。p床前明月光br疑是地上霜br举头望明月br低头思故乡/p注意br是空标签不需要闭合br或br/均可。3. 水平分隔线hr用于表示主题转换或段落间的水平分隔。p第一段内容.../phrp第二段内容主题已转换.../pHTML5 语义在 HTML5 中hr不再仅仅是“水平线”而是表示主题级别的转换Thematic Break。样式可以通过 CSS 去除默认样式使其不可见仅作为语义分隔。三、段落与语义化结构HTML5 强调将段落放入具有语义的容器中而不是直接放在body中。1. 常用容器article独立的、可分发的内容如博客文章、新闻。section文档中的主题分组。aside侧边栏内容与主内容间接相关。div无语义的通用容器仅在需要样式或脚本操作时使用。2. 结构示例articleheaderh1文章标题/h1p发布日期2026-04-09/p/headersectionh2引言/h2p这是文章的引言段落介绍背景。/p/sectionsectionh2正文内容/h2p这是正文的第一段。/pp这是正文的第二段包含一个br强制换行。/phrp这是正文的第三段表示主题转换。/p/sectionfooterp作者张三/p/footer/article四、段落中的文本格式化虽然p定义段落结构但段落内部的文本可以使用 HTML5 提供的语义化标签进行格式化标签语义示例strong重要内容(加粗)p这是strong非常重要/strong的提示。/pem强调语气(斜体)p我em真的/em不知道。/pmark高亮文本p请查看mark这里/mark的说明。/psmall小号文本 (如版权、免责声明)p版权所有 small© 2026/small/pdel删除线p原价del100元/del 现价80元/pins下划线 (插入内容)p修改后ins新内容/ins/psub下标pHsub2/subO/psup上标pEmcsup2/sup/pcode代码片段p使用 codeconsole.log()/code 调试。/pkbd键盘输入p按 kbdCtrl/kbd kbdC/kbd 复制。/psamp计算机输出p输出结果sampError 404/samp/pvar变量p公式y varm/varx varb/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 文档。