编辑“︁HTML页脚元素”︁

{{DISPLAYTITLE:HTML页脚元素}}

'''HTML页脚元素'''（<code>&lt;footer&gt;</code>）是[[HTML5]]中引入的语义化标签，用于定义文档或章节的页脚区域。它通常包含与页面内容相关的元信息，如作者信息、版权声明、联系方式或相关链接。本文将详细介绍其语法、使用场景及最佳实践。

== 基本概念 ==
<code>&lt;footer&gt;</code> 是一个块级元素，表示其父元素（如 <code>&lt;body&gt;</code>、<code>&lt;article&gt;</code> 或 <code>&lt;section&gt;</code>）的页脚。与传统的 <code>&lt;div&gt;</code> 不同，它为浏览器和开发者提供了明确的语义信息，有助于提升可访问性和SEO。

=== 语法示例 ===
<syntaxhighlight lang="html">
<footer>
    <p>作者：张三</p>
    <p>© 2023 版权所有</p>
    <a href="/contact">联系我们</a>
</footer>
</syntaxhighlight>

== 核心特性 ==
* '''语义化'''：明确标识页脚内容，辅助屏幕阅读器等工具解析。
* '''嵌套支持'''：可在多个层级中使用（如文章页脚、全局页脚）。
* '''无默认样式'''：需通过CSS自定义外观。

=== 属性 ===
支持所有[[HTML/全局属性|全局属性]]，如 <code>class</code>、<code>id</code> 等。

== 使用场景 ==
=== 1. 全局页脚 ===
用于整个网页的底部信息：
<syntaxhighlight lang="html">
<body>
    <header>...</header>
    <main>...</main>
    <footer>
        <p>© 2023 我的网站</p>
        <nav>
            <a href="/privacy">隐私政策</a>
            <a href="/terms">使用条款</a>
        </nav>
    </footer>
</body>
</syntaxhighlight>

=== 2. 文章页脚 ===
标记单篇文章的附加信息：
<syntaxhighlight lang="html">
<article>
    <h2>HTML5新特性</h2>
    <p>正文内容...</p>
    <footer>
        <p>发布日期：2023-10-01</p>
        <p>作者：李四</p>
    </footer>
</article>
</syntaxhighlight>

== 实际案例 ==
=== 响应式页脚设计 ===
结合CSS实现自适应布局：
<syntaxhighlight lang="html">
<footer style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
    <div>
        <h3>快速链接</h3>
        <ul>
            <li><a href="/home">首页</a></li>
            <li><a href="/about">关于我们</a></li>
        </ul>
    </div>
    <div>
        <h3>联系方式</h3>
        <address>email@example.com</address>
    </div>
</footer>
</syntaxhighlight>

== 与其他元素的关系 ==
可通过Mermaid展示结构关系：
<mermaid>
graph TD
    body[&lt;body&gt;] --> header[&lt;header&gt;]
    body --> main[&lt;main&gt;]
    body --> footer[&lt;footer&gt;]
    article[&lt;article&gt;] --> article-footer[&lt;footer&gt;]
</mermaid>

== 注意事项 ==
* 避免在页脚内放置主要导航内容（应使用 <code>&lt;nav&gt;</code>）。
* 单个页面可包含多个 <code>&lt;footer&gt;</code>（如文档页脚+文章页脚）。
* 在[[HTML5]]之前，可通过 <code>&lt;div id="footer"&gt;</code> 实现类似功能。

== 浏览器兼容性 ==
所有现代浏览器均支持该元素。对于旧版IE（9以下），需通过JavaScript添加语义支持：
<syntaxhighlight lang="html">
<!--[if lt IE 9]>
<script>
    document.createElement('footer');
</script>
<![endif]-->
</syntaxhighlight>

== 总结 ==
<code>&lt;footer&gt;</code> 是构建语义化网页的重要工具，合理使用能提升代码可读性和可维护性。初学者应优先掌握其语义意义，而高级开发者可通过ARIA角色进一步优化可访问性。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML布局元素]]