如何在网页中添加文字内容_HTML5段落与标题标签教学【指南】

LOVO AI

AI人声和文本转语音生成工具

下载

应使用标记段落、–标记层级化标题，禁用/模拟语义；标题层级须连续且唯一，样式交由css控制，空段落和应替换为语义化结构与margin。

直接说结论：用 <p></p> 写段落，用 <h1></h1> 到 <h6></h6> 写标题，别用 <div> 或 <code><span></span> 假装是语义化内容。

什么时候该用 <p></p> 而不是 <div> <p>浏览器和屏幕阅读器靠标签判断内容类型。<code><p></p> 明确表示“一段独立文字”，自带上下外边距、换行语义；<div> 是纯容器，没语义，搜索引擎和辅助工具完全忽略它的“段落”意图。 <ul> <li>写说明文字、用户须知、文章正文 —— 一律用 <code><p></p>

想控制某段文字样式但又不想破坏语义？在 <p></p> 上加 class，别套 <div> <li>常见错误：<code><div><span>这里是段落</span></div> —— 这等于告诉机器：“这段文字不重要，也没结构”

<h1></h1> 到 <h6></h6> 不是字号开关，是层级关系

标题标签的核心作用是建立文档大纲（outline），不是调大小。搜索引擎、大纲生成器、键盘导航都依赖这个层级。跳着用或重复用 <h1></h1> 会打乱整个页面逻辑。

• 每个页面有且仅有一个 <h1></h1>，代表主主题（比如文章标题、产品名）
• <h2></h2> 是 <h1></h1> 的一级子节，<h3></h3> 是 <h2></h2> 的子节，依此类推 —— 层级必须连续，不能从 <h2></h2> 直接跳到 <h4></h4>
• 样式用 CSS 控制，不要因为觉得 <h3></h3> 太小就改用 <h2></h2> 充数

空段落 <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 和多个 <br> 是布局陷阱

用空 <p></p> 或堆砌 <br> 拉间距，看似省事，实则埋下可访问性和维护隐患。它们会被读屏软件逐个朗读为“空白段落”“换行”，影响信息流。

• 段落之间需要更大间隙？用 CSS 的 margin 控制 <p></p>，而不是塞空标签
• 想实现“段中换行”？优先考虑是否真需换行 —— 多数情况应拆成两个 <p></p>，或用 <div> + <code>display: flex 等现代布局
• 老项目里看到 <p><br><br></p>？立刻替换，这不是语义，是妥协的痕迹

HTML5 之后，<header></header> <main></main> 这些不是替代标题的

有人以为用了 <section></section> 就不用 <h2></h2> 了，其实错。区块元素（<section></section>、<article></article>）定义内容范围，标题标签定义内容角色。两者配合才有完整语义。

• <section></section> 里必须有标题（通常是 <h2></h2> 或更高级别），否则这个区块在大纲里“失声”
• <main></main> 不自动产生标题，它只是告诉浏览器“这是主体内容区”，里面仍需用 <h1></h1> 或 <h2></h2>
• 检查语义是否健全？打开浏览器开发者工具，用“Accessibility”面板看自动生成的大纲树 —— 如果标题层级断裂或缺失，就是标签没用对

最常被忽略的一点：标题层级不是写完就完的事，它得和实际内容结构一致。改文案时顺手删掉一个 <h3></h3>，可能让整块 <section></section> 在语音导航里消失。