2

页眉和页脚有什么用？

鉴于它们按照编写顺序呈现在页面上，如此处所示，它们之间有什么区别？

<article>
    <footer>This is a footer</footer>
    <header>This is a header</header>
</article>
4

3 回答 3

2

唯一确定的来源是 HTML5 规范。它定义了这些元素的含义。

对于header元素：

该header元素代表一组介绍性或导航辅助工具。

对于footer元素：

该footer元素表示其最近的祖先分段内容或分段根元素的页脚。页脚通常包含有关其部分的信息，例如作者、相关文档的链接、版权数据等。

这两节都针对预期用途提供了进一步的评论和示例。

用我自己的话：

footer是元数据的地方，如作者姓名、出版日期、类别/标签等。每个分段元素（section、article、aside、nav）都可以有自己的footer元素。如果footer不是这样的分节元素的一部分，它适用于整个页面。例子：

<body>
  <article>
    <footer><!-- metadata about the article --></footer>
  </article>
  <footer><!-- metadata about the whole page --></footer>
</body>

该header元素用于介绍性内容，如标题、摘要/摘要、“NSFW”等警告。

请注意，HTML5 规范不包含header与footer. 但是，这已经在 HTML5.1 中修复（请参阅相关的错误），并且可能也会在 HTML5 中进行更改。

您不应该注意这些元素的命名。Aheader也可以出现在footer文章的结尾和开头。

整体图片：header和footer(and address) 可用于标记不属于分段元素（或整个页面）主要内容的分段元素（或整个页面）的内容。

一个没有的简单示例footer：

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>

</article>

↑ 这里最后一段（包含本文的标签）将在标题“我讨厌什么”的范围内。这当然是错误的，因为我不讨厌“标签”、“个人”或“狂热”。所以我们应该在标记中反映这一点，这样这一段就不会与前面的标题相关联：

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <footer>
      <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>
    </footer>
</article>

↑ 现在我们把标签放在 中footer，它们不再在“我讨厌什么”的范围内。相反，它们现在代表整个article元素的页脚（→ 元数据）。

于 2013-05-27T16:21:30.260 回答
0

如此处所述：http: //www.w3schools.com/html/html5_semantic_elements.asp，语义标签用于“清楚地定义网站的不同部分”。他们只是告诉浏览器，也许其他人有些东西在哪里。<div id="header">例如，它的替代品

我希望我能帮上忙

于 2013-05-26T19:31:30.607 回答
0

通常，在标签中，标题可以包含文章的主题，而页脚可以包含作者和/或撰写时间。

您应该阅读以下链接以获得进一步的解释

标题元素

页脚元素

于 2013-05-26T19:26:13.877 回答