gpt4 book ai didi

html - <header> 和 <footer> 实际上做了什么?

转载 作者:行者123 更新时间:2023-11-28 00:08:45 25 4
gpt4 key购买 nike

页眉和页脚有什么意义?

假设它们按照写入的顺序呈现在页面上,如图所示 here它们有什么区别?

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

最佳答案

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

对于header element :

The header element represents a group of introductory or navigational aids.

对于footer element :

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

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

用我自己的话说:

footer 是放置元数据的地方,例如作者姓名、出版日期、类别/标签等。每个节元素(sectionarticle, 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 的情况一样。然而,这已经是fixed in HTML5.1 (请参阅 relevant bug )并且可能也会在 HTML5 中更改。

你不应该关注这些元素的命名。 header 也可以出现在文章的结尾,footer 可以出现在文章的开头。

总体情况:headerfooter(和 address)对于标记分段元素(或整个页面)不是分段元素(或整个页面)主要内容的一部分。

一个没有页脚的简单例子:

<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>

↑ 最后一段(包含本文的标签)将在标题“我讨厌什么”的范围内。这当然是错误的,因为我不讨厌“标签”、“个人”或“粉丝圈”。所以我们应该在标记中反射(reflect)这一点,这样这一段就不会与前面的标题相关联:

<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中,它们就不再属于“What I hate”的范畴了。相反,它们现在代表整个 article 元素的页脚(→ 元数据)。

关于html - &lt;header&gt; 和 &lt;footer&gt; 实际上做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16762849/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com