📅 最后修改于: 2023-12-03 15:01:11 🧑 作者: Mango
main标签是HTML5新增的标签，主要用于表示页面主要内容区域，即文档中的主体内容。一般情况下每个页面只应该有一个main标签，其内容应该是页面的核心内容。
main标签应该位于文档的body元素内，并且应该尽可能地接近body元素的开头，以便于搜索引擎和屏幕阅读器尽早地发现主要内容区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML main标签示例</title>
</head>
<body>
<header>
<h1>这是一个HTML主页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<article>
<header>
<h3>文章标题</h3>
<time datetime="2022-01-01">2022年1月1日</time>
</header>
<p>文章内容...</p>
</article>
<article>
<header>
<h3>文章标题</h3>
<time datetime="2022-01-02">2022年1月2日</time>
</header>
<p>文章内容...</p>
</article>
</section>
<section>
<h2>最新产品</h2>
<article>
<header>
<h3>产品名称</h3>
</header>
<p>产品介绍...</p>
</article>
<article>
<header>
<h3>产品名称</h3>
</header>
<p>产品介绍...</p>
</article>
</section>
</main>
<footer>
<p>版权所有 © 2022</p>
</footer>
</body>
</html>
main标签的兼容性目前已经非常不错，可以放心使用。如果你需要支持旧的浏览器，可以使用JavaScript来模拟main标签的行为，详情可以参考这篇文章。
通过使用main标签，可以让Web应用更好地支持搜索引擎和屏幕阅读器，提升用户体验。但是，在使用main标签时，我们也应该注意只在一个页面上使用一次，并且尽可能地将其放在body元素的开头。