HTML页头页脚怎么写_HTML5页头页脚HEADERFOOTER标签-html教程-PHP中文网

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

爱谁谁

发布： 2025-10-06 18:51:02

原创

361人浏览过

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

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

在HTML5中，页头和页脚的结构可以通过语义化标签 <header> 和 <footer> 来定义，让页面结构更清晰、更利于SEO和可访问性。

页头（Header）怎么写

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

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

示例：

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

登录后复制

页脚（Footer）怎么写

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

立即学习“前端免费学习笔记（深入）”；

小羊标书

一键生成百页标书，让投标更简单高效

查看详情

一个页面可以有多个 <footer>，比如文章底部也可以有自己的 footer。

示例：

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

登录后复制

完整页面结构示例

结合 <header> 和 <footer> 的典型HTML5页面结构如下：

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

登录后复制

基本上就这些。使用 <header> 和 <footer> 不仅让代码更有结构，也提升了网页的语义表达能力，是现代HTML5开发的标准做法。

以上就是HTML页头页脚怎么写_HTML5页头页脚HEADERFOOTER标签的详细内容，更多请关注php中文网其它相关文章！