标签用于定义文档或区域的页眉，包含介绍性内容或导航链接，可提升结构清晰度、seo和可访问性；它作为语义化块级元素，常置于页面顶部包裹标题、logo和主导航，也可用于或内部表示局部头部，每个页面可有多个但不宜嵌套；典型结构包括主标题、说明文字及导航菜单，并应避免仅用于样式、放置页脚内容或广告横幅；需合理搭配、、等标签构建完整页面骨架，确保标题层级正确，理解其语义本质为“介绍性区块”而非视觉上的顶部区域。
HTML语义化中的
header标签的基本用法
- 每个页面可以有多个
，不仅限于页面顶部 - 可用于 或 内部，表示该部分内容的头部
- 避免嵌套多个
，保持结构简洁
页面顶部的典型结构示例
以下是一个常见的页面顶部
<header>
<h1>我的网站标题</h1>
<p>网站副标题或标语</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1523" title="Roboflow"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a31c549d0104.png" alt="Roboflow" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1523" title="Roboflow">Roboflow</a>
<p>一个为计算机视觉和机器学习提供工具和服务的平台</p>
</div>
<a href="/ai/1523" title="Roboflow" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</header>
这个结构清晰表达了页眉的内容层级：主标题、说明文字和主导航。
常见错误与注意事项
虽然
- 不要用
替代 仅为了样式目的，应优先考虑语义- 避免在
内放置页脚类内容，如版权信息 - 不建议将广告横幅或轮播图作为
的主要部分，除非它们属于站点标识的一部分 - 确保标题层级合理，例如页面中只有一个 ，且位于
中 与其他语义标签的配合
常与 、 ain> 、 等标签协同使用，构建完整的页面骨架：<body> <header> <h1>网站名称</h1> <nav>...导航菜单...</nav> </header> <main>...主体内容...</main> <footer>...底部信息...</footer> </body>这样的结构对搜索引擎和辅助技术更友好。
基本上就这些。合理使用
不复杂但容易忽略细节，关键是理解其语义本质——代表“介绍性内容区块”，而不仅仅是视觉上的“顶部区域”。 - 避免在
