排版标签

标签分类概述

HTML 标签根据其内容容纳能力可以分为两大类：

文本级标签

• 常见标签：<p>、<span>、<a>、<b>、<i>、<u>、<em>
• 特点：
• 只能包含文字、图片、表单元素等行内内容
• 嵌套规则严格（例如：<a> 标签内不能嵌套另一个 <a> 或 <input>）

嵌套警告

<a> 标签不能嵌套交互式元素如 <button> 或 <input>，这会导致不可预测的行为

容器级标签

• 常见标签：<div>、<h1>-<h6>、<li>、<dt>、<dd>
• 特点：
• 可以包含任何其他 HTML 元素
• 常用于页面结构和布局

语义化建议

优先使用语义化容器标签如 <article>, <section>, <nav> 等，而不是过度依赖 <div>

主要排版标签列表

- 标题标签：`<h1>`-`<h6>` (语义化文档结构)
- 段落标签：`<p>` (文本段落)
- 水平线标签：`<hr />` (内容分隔)
- 换行标签：`<br />` (强制换行)
- 区块标签：`<div>` (通用块容器)
- 行内标签：`<span>` (行内文本容器)
- 居中标签：`<center>` (已废弃)
- 预格式化标签：`<pre>` (保留空白字符)

标题标签 <h1>-<h6>

基本用法

<h1>网站主标题</h1>
<!-- 通常用于logo或页面主标题 -->
<h2>主要内容区块标题</h2>
<h3>子章节标题</h3>
...
<h6>最低级标题</h6>

属性说明

属性	值	描述
align	left	左对齐（默认值）
	center	居中对齐
	right	右对齐

过时属性提醒

align 属性在 HTML5 中已废弃，应使用 CSS 的 text-align 属性替代

使用建议

• SEO 优化：<h1> 应包含页面主要关键词
• 可访问性：屏幕阅读器依赖标题层级导航
• 结构规范：

h1
├─ h2
│├─ h3
│└─ h3
└─ h2
├─ h3
│└─ h4
└─ h3

段落标签 <p>

现代用法

<p class="intro-text">这是引导段落，通常会有特殊样式。</p>
<p>常规段落文本...</p>

属性说明

属性	值	描述
align	left	左对齐（默认）
	center	居中对齐
	right	右对齐

排版建议

• 段落宽度控制在 45-75 字符(约 600px)以获得最佳可读性
• 使用 line-height: 1.5-1.8 改善阅读体验

水平线标签 <hr />

现代实现方式

<!-- 传统方式 -->
<hr class="custom-divider" />

<!-- 更现代的替代方案 -->
<div class="divider" role="separator"></div>

/* CSS样式示例 */
.custom-divider {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

.divider {
	height: 2px;
	background: var(--divider-color);
	margin: 2em 0;
}

换行标签 <br />

正确使用场景

<address>
	北京市朝阳区
	<br />
	某某大厦15层
	<br />
	100000
</address>

滥用警告

避免使用 <br> 进行视觉间距控制：

<!-- 错误示范 -->
<p>内容</p>
<br />
<br />
<p>更多内容</p>

<!-- 正确做法 -->
<p style="margin-bottom: 2em">内容</p>
<p>更多内容</p>

区块标签 <div> 和 <span>

现代最佳实践

<div> 高级用法

<div class="card" role="article">
	<div class="card-header">
		<h2>卡片标题</h2>
	</div>
	<div class="card-body">
		<p>卡片内容...</p>
	</div>
</div>

<span> 高级用法

<p>
	价格:
	<span class="price" aria-label="99元">¥99</span>
	<span class="discount">(限时优惠)</span>
</p>

语义化对比

特性	<div>	<span>
显示方式	块级 (display: block)	行内 (display: inline)
ARIA 角色	常用 generic 或 section 角色	常用 generic 或 text 角色
典型用例	布局容器、组件包装	文本修饰、微交互元素
可访问性	可能需要 aria-label	可能需要 aria-hidden

内容居中标签 <center>

完全替代方案

<!-- 文本居中 -->
<div class="text-center">
	<h2>现代居中标题</h2>
</div>

<!-- 块元素居中 -->
<div class="centered-box">
	<p>使用margin: auto实现水平居中</p>
</div>

.text-center {
	text-align: center;
}

.centered-box {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
}

预格式化标签 <pre>

代码显示最佳实践

<pre><code class="language-javascript">
function hello() {
console.log('Hello, World!');
}
</code></pre>

增强建议

• 搭配 Prism.js 等语法高亮库
• 添加滚动条防止溢出：

pre {
	max-height: 400px;
	overflow: auto;
	background: #f8f8f8;
	padding: 1em;
	border-radius: 4px;
}

:::\