零基础轻松搞懂HTML常用文本标签-html教程-PHP中文网

html文本标签是语义标记而非样式开关：h1–h6定义文档层级结构，须逐级嵌套且h1唯一；p为语义段落容器，br仅强制换行；strong/em表语义强调，b/i仅作无含义样式；small/mark/hr均有特定语义，误用将破坏seo、无障碍与内容解析。

零基础轻松搞懂html常用文本标签

HTML文本标签不是“字体开关”，而是语义标记——用错标签，页面结构就塌了，SEO和无障碍访问也会出问题。

为什么 `<h1></h1>` 到 `<h6></h6>` 不能只看字号大小

浏览器确实会把 <h1></h1> 渲染得最大、<h6></h6> 最小，但关键在语义层级：搜索引擎靠它理解内容主次，屏幕阅读器靠它导航跳转。一个页面多个 <h1></h1> 不是“加粗更醒目”，而是告诉机器“这页有好几个‘最重要标题’”，逻辑混乱。

实际场景：新闻列表页，每条新闻标题用 <h2></h2>，整页只有一个 <h1></h1>（比如“今日热点”）
常见错误：<h3></h3> 套 <h2></h2> 再套 <h1></h1> —— 层级倒置，语义断裂
兼容性影响：旧版读屏软件可能直接跳过非标准嵌套的标题

`<p></p>` 和 `<br>` 的本质区别在哪

<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 是段落容器，自带上下外边距和语义；<br> 只是强制换行，无任何结构含义。用 <br> 拼凑段落，等于把一整块豆腐切成片再叠起来——看起来像段落，实则没有段落语义。

正确用法：<p></p> 包裹完整语义段落；<br> 仅用于诗歌、地址、歌词等需要保留特定换行的位置
容易踩的坑：用多个 <br> 替代 <p></p> 实现“空行”，会导致打印样式错乱、响应式断点失效
性能提示：过多 <br> 不影响渲染速度，但会让 CSS 维护成本翻倍（必须用 white-space: pre-line 等兜底）

`<strong></strong>` 和 `<b></b>`、`<em></em>` 和 `<i></i>` 怎么选

语义优先：<strong></strong> 表示内容重要性（如警告、必填项），<em></em> 表示语气强调（如反语、重音）；<b></b> 和 <i></i> 仅用于无语义的样式需求（比如品牌名、外语词、技术术语）。

示例对比：<strong>密码错误</strong>（系统级严重提示） vs <b>GitHub</b>（品牌名无需强调语义）
可访问性影响：屏幕阅读器对 <strong></strong> 通常加重读音，对 <b></b> 则完全无特殊处理
参数差异：所有这四个标签都支持 class 和 style，但只有 <strong></strong> 和 <em></em> 被 W3C 明确列为“语义强调元素”