HTML页头页脚怎么写_HTML5页头页脚HEADERFOOTER标签

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML页头页脚怎么写_HTML5页头页脚HEADERFOOTER标签

2025-10-06

浏览次数：次

返回列表

页头用包含标题、导航等，页脚用放置版权、联系信息；两者提升结构清晰度与SEO，示例中页面头部含网站标题和导航，文章局部也有独立header和footer，底部版权信息位于主footer内。

html页头页脚怎么写_html5页头页脚headerfooter标签

在HTML5中，页头和页脚的结构可以通过语义化标签

和
来定义，让页面结构更清晰、更利于SEO和可访问性。

页头（Header）怎么写

标签用于定义页面或某个区块的头部区域，通常包含网站标题、导航菜单、Logo或搜索框等内容。

它可以出现在整个页面的顶部，也可以用在文章、章节等局部区块的上方。

示例：

<header>
  <h1>我的网站标题</h1>
  <n*>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </n*>
</header>

页脚（Footer）怎么写

标签定义页面或区块的底部内容，常用于放置版权信息、联系方式、友情链接或备案号等。

一个页面可以有多个

，比如文章底部也可以有自己的 footer。

示例：

<footer>
  <p>&copy; 2025 我的网站. 版权所有.</p>
  <address>
    联系邮箱：<a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

完整页面结构示例

结合

和
的典型HTML5页面结构如下：

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>HTML5页头页脚示例</title>
</head>
<body>
  <header>
    <h1>欢迎来到我的网站</h1>
    <n*>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于我们</a></li>
      </ul>
    </n*>
  </header>

  <main>
    <article>
      <header>
        <h2>文章标题</h2>
        <p>发布于：2025年4月5日</p>
      </header>
      <p>这里是文章内容……</p>
      <footer>
        <p>作者：张三</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 我的网站. All rights reserved.</p>
  </footer>
</body>
</html>