HTML网页底部的标签选择与应用

在网页设计中，底部通常用于显示版权声明、联系方式、网站地图等信息，这些信息对于网站的完整性和用户体验至关重要，选择合适的HTML标签来构建网页底部是非常重要的，本文将介绍一些常用的HTML标签，以及如何在网页底部中使用它们。

1、<footer>标签

<footer>标签是HTML5中新增的一个语义化标签，用于表示页面或节（section）的页脚，它通常包含作者信息、版权信息、联系方式等，使用<footer>标签可以使搜索引擎更容易地理解网页的结构，同时也有助于提高网站的可访问性。

示例代码：

<footer>
  <p>版权所有 &copy; 2022 我的公司</p>
  <p>联系我们：info@mycompany.com</p>
</footer>

2、<address>标签

<address>标签用于表示联系信息，如地址、电子邮件、电话号码等，它可以嵌套在<footer>标签内，以提供更详细的联系信息。

示例代码：

<footer>
  <p>版权所有 &copy; 2022 我的公司</p>
  <address>
    <strong>联系信息：</strong><br>
    地址：北京市朝阳区<br>
    电话：+86 1234567890<br>
    邮箱：info@mycompany.com
  </address>
</footer>

3、<nav>标签

<nav>标签用于表示导航链接，如主菜单、侧边栏菜单等，它可以嵌套在<footer>标签内，以提供网站的导航链接，需要注意的是，<nav>标签应该包含在一个具有role="navigation"属性的<div>元素内。

示例代码：

<footer>
  <p>版权所有 &copy; 2022 我的公司</p>
  <nav role="navigation">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</footer>

4、<small>标签

<small>标签用于表示免责声明、注意事项等较小的文本信息，它可以嵌套在<footer>标签内的其他元素内，以提供更多的信息。

示例代码：

<footer>
  <p>版权所有 &copy; 2022 我的公司</p>
  <address>
    <strong>联系信息：</strong><br>
    地址：北京市朝阳区<br>
    电话：+86 1234567890<br>
    邮箱：info@mycompany.com
  </address>
  <small>&copy;2022 我的公司 - 保留所有权利</small>
</footer>