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

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

爱谁谁

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

原创

411人浏览过

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

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

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

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

页头（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>
  <p>&copy; 2025 我的网站. 版权所有.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1866">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680392413552.jpg" alt="Designify">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1866">Designify</a>
                            <p>拖入图片便可自动去除背景✨</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Designify">
                                <span>90</span>
                            </div>
                        </div>
                        <a href="/ai/1866" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Designify">
                        </a>
                    </div>
                
  <address>
    联系邮箱：<a href="mailto:info@example.com">info@example.com</a>
  </address>
</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>

登录后复制

基本上就这些。使用

和
不仅让代码更有结构，也提升了网页的语义表达能力，是现代HTML5开发的标准做法。

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