html打印页眉页脚_HTML5基本元素：页眉，导航和页脚

HTML5开发尚未完成。但是，HTML5中有一些今天可以使用的新元素，当前和旧浏览器（带有shim）已经支持的元素，例如header ， nav和footer 。

您可能已经在我们的HTML5教程中看到了这些元素，但实际上并没有真正了解它们。

我认为现在是时候探索这些新元素，看看这些元素的实际用途了。这篇文章是我们系列的一部分，该系列介绍HTML5中令人兴奋的新功能。如果您错过了以前的那些，请查看以下标题：

HTML5教程：如何构建单个产品页面
HTML5：如何使用<DETAILS>和<SUMMARY>标签

标头元素

幸运的是，新HTML5元素以非常合逻辑的名称进行了描述，并且根据规范， header元素表示“一组入门或导航帮助。” （我认为，最好是从官方和合法资料来源获得准确的描述，因为通常情况下含义可能会失真）。

从上面的解释，我们可以得出这样的结论header元素并不单单定义网页的标题。 header元素还可以用于定义引入后续部分的部分（通常在顶部）。

例如，在以下代码片段中，我将header元素放在了帖子内容的顶部，以包装title和post meta ;

<header><h1>This is the Title of the Content</h1><div class="post-meta"><p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  </div>
</header>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

由于在此示例中，标题和post meta位于顶部，并且充当post内容的介绍，因此我们可以将它们包装在header元素中。

导航元素

nav元素代表Navigation 。根据规格。该元素表示； “链接到其他页面或页面中各个部分的页面部分：具有导航链接的部分。”

尽管此元素明确用于特定地定义导航，但实现方式不仅限于主要导航，通常不位于网页顶部。

根据上面的官方描述，我们可以得出结论nav元素也可以在页面的任何部分用作导航器 ，请参见以下示例；

<h4>Table of Content</h4>
<nav><ul><li><a href="#overview">Overview</a></li><li><a href="#history">History</a></li><li><a href="#development">Development</a></li><ul>
</nav>

在此示例中，我们使用了nav元素包装Content Table ，其中链接仍指向同一页面。

页脚元素

现在广泛采用的另一个元素是footer元素。通常，我们将页脚指向位于网页底部的部分，但让我们看一下规范如何描述此元素； “页脚元素代表其最接近的祖先切片内容或切片根元素的页脚。 页脚通常包含有关其部分的信息，例如谁编写的，与相关文档的链接，版权数据等。”

这有点令人困惑，让我们简化一下。

页脚在逻辑上（仍然）放置在底部。但是由于规范中没有提到此元素仅用于Web页脚，因此可以得出结论， footer元素的实现也可以在本节的结尾使用。让我们看下面的例子；

<div>
<header>
<h1>This is the Title of the Content</h1><div class="post-meta"><p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  </div>
</header>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>
<footer><div class="tags"><span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a></div><div class="facebook-like"><div>10 likes</div> <!-- let's pretend it to be the facebook like --></div>
</footer>
</div>

在此示例中，我们将帖子内容扩展为具有包含帖子标签和帖子“喜欢”的页脚。

最终思想

翻译自: https://www.hongkiat.com/blog/html5-basic-elements/