<main>-文档主要内容
<main> 标签是 HTML5 中引入的语义化标签，用于定义文档的主要内容。它帮助浏览器和搜索引擎识别页面的核心内容，同时提升无障碍访问体验。
<main> 标签的基本定义
<main> 标签表示文档的主体内容，这部分内容应直接关联文档的核心主题或功能。一个文档中通常只应存在一个 <main> 标签，且不应作为其他语义化容器（如 <article>、<section> 等）的子元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<header>页眉内容</header>
<main>
<h1>文章标题</h1>
<p>这里是文档的主要内容...</p>
</main>
<footer>页脚内容</footer>
</body>
</html>
<main> 标签的语义作用
<main> 的语义价值体现在：
- 辅助技术识别：屏幕阅读器会优先朗读
<main>内的内容。 - SEO 优化：搜索引擎会将其内容视为页面核心。
- 开发规范：明确区分主要内容和辅助内容（如导航栏、广告）。
错误示例：嵌套多个 <main> 标签
<!-- 错误用法 -->
<main>
<h1>第一部分</h1>
<main> <!-- 不允许嵌套 -->
<p>子内容</p>
</main>
</main>
与其他语义标签的关系
与 <body> 的区别
<body> 包含所有可见内容，而 <main> 仅聚焦核心内容。以下结构是典型组合：
<body>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<main>
<article>独立文章内容</article>
</main>
</body>
与 <article> 的配合
当页面以文章为主体时，常见嵌套方式：
<main>
<article>
<h2>如何学习HTML</h2>
<section>
<h3>语义化标签</h3>
<p>包括main、article等标签...</p>
</section>
</article>
</main>
实际应用场景
场景一：博客文章页面
<main>
<article>
<header>
<h1>CSS Grid布局指南</h1>
<time datetime="2023-10-01">2023年10月1日</time>
</header>
<div class="content">
<!-- 文章正文 -->
</div>
</article>
<section class="comments">
<!-- 评论区 -->
</section>
</main>
场景二：电商产品页
<main>
<div class="product-gallery">
<!-- 商品图片轮播 -->
</div>
<section class="product-info">
<h1>商品名称</h1>
<div class="price">¥299</div>
<!-- 购买按钮等 -->
</section>
</main>
无障碍访问注意事项
- ARIA 角色：默认具有
role="main"属性，无需额外声明 - 跳过导航：常见无障碍实践是在
<main>前添加跳过链接：
<a href="#main-content" class="skip-link">跳至主要内容</a>
<main id="main-content">
<!-- 内容 -->
</main>
浏览器兼容性与 polyfill
所有现代浏览器均支持 <main> 标签。对于 IE9 等旧版本，需添加以下 polyfill：
<!--[if lt IE 9]>
<script>
document.createElement('main');
</script>
<![endif]-->
动态内容加载示例
通过 JavaScript 动态更新 <main> 内容：
// 获取main元素
const mainElement = document.querySelector('main');
// 模拟AJAX加载
function loadContent(url) {
fetch(url)
.then(response => response.text())
.then(html => {
mainElement.innerHTML = html;
});
}
// 点击事件触发内容更新
document.getElementById('btn-load').addEventListener('click', () => {
loadContent('/api/new-content');
});
样式化 <main> 元素
默认情况下 <main> 是块级元素，典型样式方案：
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
main {
background: #333;
color: #fff;
}
}
框架中的使用差异
React 示例
function App() {
return (
<div className="app">
<Header />
<main>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</main>
<Footer />
</div>
);
}
Vue 示例
<template>
<div class="page">
<app-header />
<main>
<router-view />
</main>
</div>
</template>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
下一篇：<article>-独立内容块
