什么是 “Page”？
在 Web 开发中，“page”（页面）是一个多义词，可能指：
- HTML 文档本身：一个完整的网页文件（如 index.html）。
- 语义化结构单元：使用
<main>、<section>等标签划分的内容区块。 - 分页功能：如列表数据分页（第1页、第2页…）或打印时的物理分页。
- 单页应用（SPA）中的“虚拟页面”：通过前端路由切换视图，但 URL 变化模拟多页体验。
1. 语义化 HTML 页面结构
现代 HTML 推荐使用语义化标签构建清晰的页面结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>...</head>
<body>
<header>网站头部</header>
<nav>导航菜单</nav>
<main>
<article>主要内容</article>
<aside>侧边栏</aside>
</main>
<footer>页脚信息</footer>
</body>
</html>这种结构不仅利于 SEO，也提升可访问性（Accessibility）。
2. CSS 打印分页（Page Break）
在打印网页时，可通过 CSS 控制内容如何分页：
@media print {
.page-break { page-break-before: always; }
h1 { page-break-after: avoid; }
}常用属性包括：page-break-before、page-break-after、page-break-inside。
3. 前端数据分页（Pagination）
当展示大量数据（如商品列表、文章归档）时，常采用分页加载：
// 简单分页逻辑示例（JavaScript）
function goToPage(pageNum) {
const items = document.querySelectorAll('.item');
const perPage = 10;
items.forEach((item, idx) => {
item.style.display = (idx >= (pageNum-1)*perPage && idx < pageNum*perPage) ? 'block' : 'none';
});
}实际项目中可结合后端 API 实现更高效的分页。
4. 单页应用（SPA）中的“页面”
在 React、Vue 等框架中，“页面”通常由路由组件定义：
// Vue Router 示例
const routes = [
{ path: '/home', component: HomePage },
{ path: '/about', component: AboutPage }
];虽然只有一个 HTML 文件，但用户感知为多个“页面”。
最佳实践建议
- 始终使用语义化标签构建页面结构。
- 为打印场景添加
@media print样式。 - 分页功能应提供清晰的导航（如“上一页/下一页”）。
- 确保每个“页面”有独立的
<title>和 meta 描述，利于 SEO。