最基础的版权信息

这是最简单的形式,只包含版权声明和年份。

<footer>
    <p>&copy; 2025 你的公司名称. 保留所有权利.</p>
</footer>

代码解释:

• <footer>: HTML5 语义化标签，专门用于定义文档或节的页脚，使用它有助于 SEO 和屏幕阅读器等辅助技术的理解。
• ©: 这是 HTML 实体，代表版权符号 ©，直接输入 也可以,但使用实体是更规范的做法。
• 2025: 这是版权年份。最佳实践是使用动态年份,这样每年你都不需要手动修改代码。
• 你的公司名称: 替换成你的公司、组织或个人名称。
• 保留所有权利.: 标准的法律声明。

动态年份的版权信息（推荐）

使用 JavaScript 自动获取当前年份，这是最推荐的做法,因为它一劳永逸。

<footer>
    <p>&copy; <span id="current-year"></span> 你的公司名称. 保留所有权利.</p>
</footer>
<script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

代码解释:

• <span id="current-year"></span>: 我们创建一个带有 id 的 <span> 元素作为占位符。
• <script>: JavaScript 代码块。
• new Date().getFullYear(): 这行 JavaScript 代码会获取当前的完整年份（2025）。
• document.getElementById('current-year').textContent = ...: 找到我们创建的 span 元素,并将其内容设置为当前年份。

包含链接和更多信息的完整页脚

一个专业的页脚通常包含更多内容，如：隐私政策、服务条款、网站地图、联系方式、社交媒体链接等。

<footer class="site-footer">
    <div class="footer-content">
        <div class="footer-section">
            <h3>关于我们</h3>
            <p>这里是关于我们公司的简介，可以简要描述你的业务、使命和愿景。</p>
        </div>
        <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
                <li><a href="/privacy-policy">隐私政策</a></li>
                <li><a href="/terms-of-service">服务条款</a></li>
                <li><a href="/sitemap">网站地图</a></li>
                <li><a href="/contact">联系我们</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>关注我们</h3>
            <div class="social-links">
                <a href="https://weibo.com/yourprofile" target="_blank" rel="noopener noreferrer">微博</a>
                <a href="https://twitter.com/yourprofile" target="_blank" rel="noopener noreferrer">Twitter</a>
                <a href="https://github.com/yourprofile" target="_blank" rel="noopener noreferrer">GitHub</a>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; <span id="current-year"></span> 你的公司名称. 保留所有权利.</p>
    </div>
</footer>
<script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

配套的 CSS 样式

为了让上面的完整页脚看起来美观，你需要添加一些 CSS 样式。

/* 页脚基础样式 */
.site-footer {
    background-color: #333; /* 深色背景 */
    color: #f4f4f4; /* 浅色文字 */
    padding: 40px 20px 20px;
    font-family: Arial, sans-serif;
}
.footer-content {
    max-width: 1200px; /* 最大宽度，居中显示 */
    margin: 0 auto;
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    justify-content: space-between; /* 子元素之间均匀分布 */
}
.footer-section {
    flex: 1 1 250px; /* 每个区块最小宽度为250px，可伸缩 */
    margin: 0 15px 20px; /* 外边距 */
    min-width: 250px; /* 防止内容过小时挤压 */
}
.footer-section h3 {
    border-bottom: 2px solid #555;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.footer-section ul {
    list-style: none; /* 移除列表前的点 */
    padding: 0;
}
.footer-section ul li {
    margin-bottom: 8px;
}
.footer-section a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-section a:hover {
    color: #007bff; /* 鼠标悬停时变色 */
}
/* 社交链接样式 */
.social-links a {
    margin-right: 15px;
    font-weight: bold;
}
/* 页脚底部（版权信息）样式 */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #555;
    font-size: 0.9em;
    color: #aaa;
}

最佳实践和注意事项

1. 使用语义化标签：始终使用 <footer> 标签，如果页脚包含导航链接，还可以将其包裹在 <nav class="footer-nav"> 中。
2. 年份动态化：强烈建议使用 JavaScript 来动态设置年份,避免每年手动更新。
3. 链接属性：
   • target="_blank": 如果链接指向外部网站（如社交媒体），建议添加此属性，让链接在新标签页中打开,避免用户离开你的网站。
   • rel="noopener noreferrer": 这是一个非常重要的安全属性，当使用 target="_blank" 时，应该始终添加它，它可以防止新打开的页面通过 window.opener 控制或窃取你的原始页面信息。
4. 可访问性 (Accessibility)：确保页脚有足够的颜色对比度，以便视力不佳的用户可以轻松阅读,为所有链接提供清晰的描述。
5. 响应式设计：上面的 CSS 示例使用了 Flexbox，可以很好地适应不同屏幕尺寸，在小屏幕上,内容会自动堆叠显示。
6. 内容相关性：页脚中的链接和内容应该对用户有用，提供“返回顶部”链接、联系方式或常见问题解答。

你可以根据自己网站的需求,自由组合和修改这些代码。