HTML
动态标准 — 最后更新于 2024 年 9 月 12 日
动态标准 — 最后更新于 2024 年 9 月 12 日
Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
在所有当前引擎中支持。
body 元素在所有当前引擎中支持。
在所有当前引擎中支持。
html 元素中的第二个元素。body 元素为空，或者如果 body 元素内部的第一个内容不是 ASCII 空白符 或者 注释，则可以省略 body 元素的 开始标签，除了 body 元素内部的第一个内容是 meta、noscript、link、script、style 或者 template 元素。body 元素没有紧跟着 注释，则可以省略 body 元素的 结束标签。onafterprintonbeforeprintonbeforeunloadonhashchangeonlanguagechangeonmessageonmessageerroronofflineononlineonpageswaponpagehideonpagerevealonpageshowonpopstateonrejectionhandledonstorageonunhandledrejectiononunload[Exposed =Window ]
interface HTMLBodyElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
HTMLBodyElement includes WindowEventHandlers ;在符合标准的文档中，只有一个 body 元素。document.body IDL 属性为脚本提供了对文档 body 元素的轻松访问。
一些 DOM 操作（例如，拖放 模型的部分）是在 "body 元素" 的基础上定义的。这指的是 DOM 中的特定元素，根据该术语的定义，而不是任何任意的 body 元素。
body 元素作为 事件处理程序内容属性 公开了 Window 对象的许多 事件处理程序。它还镜像了它们的 事件处理程序 IDL 属性。
通过 Window-reflecting body element event handler set 命名的 Window 对象的 事件处理程序，在 body 元素上公开，用通常由 HTML 元素 支持的相同名称的通用 事件处理程序 替换。
因此，例如，在 Document 的 body 元素 的子元素上分派的冒泡 error 事件首先会触发该元素的 onerror 事件处理程序内容属性，然后触发根 html 元素的事件处理程序，然后才会触发 body 元素上的 onerror 事件处理程序内容属性。这是因为该事件会从目标冒泡到 body，再到 html，再到 Document，再到 Window，并且 body 上的 事件处理程序 正在观察 Window，而不是 body。但是，使用 addEventListener() 附加到 body 的常规事件监听器，会在事件冒泡到 body 时运行，而不是在事件到达 Window 对象时运行。
此页面更新一个指示器，以显示用户是否在线
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Online or offline?</ title >
< script >
function update( online) {
document. getElementById( 'status' ). textContent =
online ? 'Online' : 'Offline' ;
}
</ script >
</ head >
< body ononline = "update(true)"
onoffline = "update(false)"
onload = "update(navigator.onLine)" >
< p > You are: < span id = "status" > (Unknown)</ span ></ p >
</ body >
</ html > article 元素在所有当前引擎中支持。
HTMLElement。article 元素 表示 文档、页面、应用程序或网站中的完整或自包含的组合，原则上可以独立分发或重复使用，例如在联合发布中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项目。
当嵌套 article 元素时，内部 article 元素表示原则上与外部文章内容相关的文章。例如，在一个接受用户提交评论的网站上的博客条目，可以将评论表示为嵌套在博客条目 article 元素内的 article 元素。
与 article 元素关联的作者信息（参阅 address 元素）不适用于嵌套的 article 元素。
当专门用于联合发布中要重新分发的内容时，article 元素在目的上类似于 Atom 中的 entry 元素。 [ATOM]
schema.org 微数据词汇表可用于提供 article 元素的发布时间，使用 CreativeWork 子类型之一。
当页面的主要内容（即不包括页脚、页眉、导航块和边栏）都是一个独立的组合时，该内容可以使用 article 标记，但在这种情况下它在技术上是冗余的（因为页面本身就是一个独立的组合，因为它是一个单独的文档）。
此示例显示了一个使用 article 元素的博客文章，并附带一些 schema.org 注释
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< footer >
< a itemprop = "discussionUrl" href = "?comments=1" > Show comments...</ a >
</ footer >
</ article > 这是同一篇博客文章，但显示了一些评论
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< section >
< h1 > Comments</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c1" >
< link itemprop = "url" href = "#c1" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Washington</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 15 minutes ago</ time ></ p >
</ footer >
< p > Yeah! Especially when talking about your lobbyist friends!</ p >
</ article >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c2" >
< link itemprop = "url" href = "#c2" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Hammond</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 5 minutes ago</ time ></ p >
</ footer >
< p > Hey, you have the same first name as me.</ p >
</ article >
</ section >
</ article > 请注意使用 页脚 来提供每个注释的信息（例如，谁写了它以及何时）：页脚 元素可以在适当的时候出现在其部分的开头，例如在本例中。（在这种情况下使用 页眉 也不会错；这主要是一个编写偏好问题。）
在本例中，文章 元素用于在门户页面上托管小部件。为了获得特定的样式和脚本行为，小部件被实现为 定制的内置元素。
<!DOCTYPE HTML>
< html lang = en >
< title > eHome Portal</ title >
< script src = "/scripts/widgets.js" ></ script >
< link rel = stylesheet href = "/styles/main.css" >
< article is = "stock-widget" >
< h2 > Stocks</ h2 >
< table >
< thead > < tr > < th > Stock < th > Value < th > Delta
< tbody > < template > < tr > < td > < td > < td > </ template >
</ table >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
< article is = "news-widget" >
< h2 > News</ h2 >
< ul >
< template >
< li >
< p >< img > < strong ></ strong >
< p >
</ template >
</ ul >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article > 部分 元素在所有当前引擎中支持。
HTMLElement。The 部分 元素 表示 文档或应用程序的通用部分。在本例中，部分是指主题内容的组合，通常带有一个标题。
部分的示例包括章节、带选项卡对话框中的各个选项卡页面或论文的编号部分。网站的主页可以分为引言、新闻条目和联系方式等部分。
鼓励作者在有意义的情况下使用 文章 元素来代替 部分 元素，以便对元素的内容进行联合发布。
The 部分 元素不是一个通用的容器元素。如果元素仅用于样式目的或作为脚本的方便方式，则鼓励作者使用 div 元素来代替。一个通用的规则是，部分 元素仅在元素的内容将明确列出在文档的 提纲 中时才适用。
在以下示例中，我们看到了一篇文章（网页的一部分）关于苹果，包含两个简短的部分。
< article >
< hgroup >
< h2 > Apples</ h2 >
< p > Tasty, delicious fruit!</ p >
</ hgroup >
< p > The apple is the pomaceous fruit of the apple tree.</ p >
< section >
< h3 > Red Delicious</ h3 >
< p > These bright red apples are the most common found in many
supermarkets.</ p >
</ section >
< section >
< h3 > Granny Smith</ h3 >
< p > These juicy, green apples make a great filling for
apple pies.</ p >
</ section >
</ article > 这是一个毕业典礼的计划，包含两个部分，一个是毕业人员名单，一个是典礼的描述。（本例中的标记具有有时用来最小化 元素间空白 的非典型风格。）
<!DOCTYPE Html>
< Html Lang = En
>< Head
>< Title
> Graduation Ceremony Summer 2022</ Title
></ Head
>< Body
>< H1
> Graduation</ H1
>< Section
>< H2
> Ceremony</ H2
>< P
> Opening Procession</ P
>< P
> Speech by Valedictorian</ P
>< P
> Speech by Class President</ P
>< P
> Presentation of Diplomas</ P
>< P
> Closing Speech by Headmaster</ P
></ Section
>< Section
>< H2
> Graduates</ H2
>< Ul
>< Li
> Molly Carpenter</ Li
>< Li
> Anastasia Luccio</ Li
>< Li
> Ebenezar McCoy</ Li
>< Li
> Karrin Murphy</ Li
>< Li
> Thomas Raith</ Li
>< Li
> Susan Rodriguez</ Li
></ Ul
></ Section
></ Body
></ Html > 在本例中，一位图书作者将某些部分标记为章节，将某些部分标记为附录，并使用 CSS 来以不同的方式对这两类部分的标题进行样式化。
< style >
section { border : double medium ; margin : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em Roboto , Helvetica Neue , sans-serif ; }
</ style >
< header >
< hgroup >
< h1 > My Book</ h1 >
< p > A sample with not much content</ p >
</ hgroup >
< p >< small > Published by Dummy Publicorp Ltd.</ small ></ p >
</ header >
< section class = "chapter" >
< h2 > My First Chapter</ h2 >
< p > This is the first of my chapters. It doesn't say much.</ p >
< p > But it has two paragraphs!</ p >
</ section >
< section class = "chapter" >
< h2 > It Continues: The Second Chapter</ h2 >
< p > Bla dee bla, dee bla dee bla. Boom.</ p >
</ section >
< section class = "chapter" >
< h2 > Chapter Three: A Further Example</ h2 >
< p > It's not like a battle between brightness and earthtones would go
unnoticed.</ p >
< p > But it might ruin my story.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix A: Overview of Examples</ h2 >
< p > These are demonstrations.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix B: Some Closing Remarks</ h2 >
< p > Hopefully this long example shows that you < em > can</ em > style
sections, so long as they are used to indicate actual sections.</ p >
</ section > 导航 元素在所有当前引擎中支持。
HTMLElement。The 导航 元素 表示 页面中链接到其他页面或页面内部分的部分：带有导航链接的部分。
并非页面上所有的链接组都需要放在 导航 元素中 - 该元素主要用于包含主要导航块的部分。特别地，页脚通常有一个指向网站各个页面的简短链接列表，例如服务条款、主页和版权页面。页脚 元素本身就足以用于此类情况；虽然可以在此类情况下使用 导航 元素，但通常是不必要的。
针对可以从初始渲染中省略导航信息中受益的用户或可以从立即获得导航信息中受益的用户的用户代理（例如屏幕阅读器）可以使用此元素来确定页面上哪些内容应最初跳过或根据请求提供（或两者兼有）。
在以下示例中，有两个 导航 元素，一个用于站点周围的主要导航，一个用于页面本身的辅助导航。
< body >
< h1 > The Wiki Center Of Exampland</ h1 >
< nav >
< ul >
< li >< a href = "/" > Home</ a ></ li >
< li >< a href = "/events" > Current Events</ a ></ li >
...more...
</ ul >
</ nav >
< article >
< header >
< h2 > Demos in Exampland</ h2 >
< p > Written by A. N. Other.</ p >
</ header >
< nav >
< ul >
< li >< a href = "#public" > Public demonstrations</ a ></ li >
< li >< a href = "#destroy" > Demolitions</ a ></ li >
...more...
</ ul >
</ nav >
< div >
< section id = "public" >
< h2 > Public demonstrations</ h2 >
< p > ...more...</ p >
</ section >
< section id = "destroy" >
< h2 > Demolitions</ h2 >
< p > ...more...</ p >
</ section >
...more...
</ div >
< footer >
< p >< a href = "?edit" > Edit</ a > | < a href = "?delete" > Delete</ a > | < a href = "?Rename" > Rename</ a ></ p >
</ footer >
</ article >
< footer >
< p >< small > © copyright 1998 Exampland Emperor</ small ></ p >
</ footer >
</ body > 在以下示例中，页面中有几个地方存在链接，但只有一个地方被认为是导航部分。
< body itemscope itemtype = "http://schema.org/Blog" >
< header >
< h1 > Wake up sheeple!</ h1 >
< p >< a href = "news.html" > News</ a > -
< a href = "blog.html" > Blog</ a > -
< a href = "forums.html" > Forums</ a ></ p >
< p > Last Modified: < span itemprop = "dateModified" > 2009-04-01</ span ></ p >
< nav >
< h2 > Navigation</ h2 >
< ul >
< li >< a href = "articles.html" > Index of all articles</ a ></ li >
< li >< a href = "today.html" > Things sheeple need to wake up for today</ a ></ li >
< li >< a href = "successes.html" > Sheeple we have managed to wake</ a ></ li >
</ ul >
</ nav >
</ header >
< main >
< article itemprop = "blogPosts" itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > My Day at the Beach</ h2 >
</ header >
< div itemprop = "articleBody" >
< p > Today I went to the beach and had a lot of fun.</ p >
...more content...
</ div >
< footer >
< p > Posted < time itemprop = "datePublished" datetime = "2009-10-10" > Thursday</ time > .</ p >
</ footer >
</ article >
...more blog posts...
</ main >
< footer >
< p > Copyright ©
< span itemprop = "copyrightYear" > 2010</ span >
< span itemprop = "copyrightHolder" > The Example Company</ span >
</ p >
< p >< a href = "about.html" > About</ a > -
< a href = "policy.html" > Privacy Policy</ a > -
< a href = "contact.html" > Contact Us</ a ></ p >
</ footer >
</ body > 您还可以看到上述示例中的微数据注释，这些注释使用 schema.org 词汇表来提供博客文章的发布时间和其他元数据。
一个 导航 元素不必包含列表，它也可以包含其他类型的内容。在这个导航块中，链接是在散文中提供的
< nav >
< h1 > Navigation</ h1 >
< p > You are on my home page. To the north lies < a href = "/blog" > my
blog</ a > , from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many < a
href = "/school" > school papers</ a > are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a < a href = "/school/thesis" > thesis</ a > .</ p >
< p > To the west are several exits. One fun-looking exit is labeled < a
href = "https://games.example.com/" > "games"</ a > . Another more
boring-looking exit is labeled < a
href = "https://isp.example.net/" > ISP™</ a > .</ p >
< p > To the south lies a dark and dank < a href = "/about" > contacts
page</ a > . Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</ p >
</ nav > 在本例中，导航 用于电子邮件应用程序，以允许用户切换文件夹
< p >< input type = button value = "Compose" onclick = "compose()" ></ p >
< nav >
< h1 > Folders</ h1 >
< ul >
< li > < a href = "/inbox" onclick = "return openFolder(this.href)" > Inbox</ a > < span class = count ></ span >
< li > < a href = "/sent" onclick = "return openFolder(this.href)" > Sent</ a >
< li > < a href = "/drafts" onclick = "return openFolder(this.href)" > Drafts</ a >
< li > < a href = "/trash" onclick = "return openFolder(this.href)" > Trash</ a >
< li > < a href = "/customers" onclick = "return openFolder(this.href)" > Customers</ a >
</ ul >
</ nav > 侧边栏 元素在所有当前引擎中支持。
HTMLElement。The 侧边栏 元素 表示 页面中包含与 侧边栏 元素周围内容相关的，可以被认为与该内容分开的，部分内容。此类部分通常在印刷排版中表示为侧边栏。
该元素可以用于排版效果，例如引用语或侧边栏，用于广告、用于 导航 元素组，以及用于被认为与页面主要内容分开的其他内容。
不适合仅用于括号使用 侧边栏 元素，因为这些括号是文档主要流程的一部分。
以下示例显示了如何在关于欧洲的更长的新闻报道中，使用侧边栏来标记关于瑞士的背景资料。
< aside >
< h2 > Switzerland</ h2 >
< p > Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</ p >
</ aside > 以下示例显示了如何在更长的文章中，使用侧边栏来标记引用语。
...
< p > He later joined a large company, continuing on the same work.
< q > I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</ q ></ p >
< aside >
< q > People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer.</ q >
</ aside >
< p > Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</ p >
...以下摘录显示了如何在博客上使用 侧边栏 来显示博客列表和其他侧边内容
< body >
< header >
< h1 > My wonderful blog</ h1 >
< p > My tagline</ p >
</ header >
< aside >
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
< nav >
< h2 > My blogroll</ h2 >
< ul >
< li >< a href = "https://blog.example.com/" > Example Blog</ a >
</ ul >
</ nav >
< nav >
< h2 > Archives</ h2 >
< ol reversed >
< li >< a href = "/last-post" > My last post</ a >
< li >< a href = "/first-post" > My first post</ a >
</ ol >
</ nav >
</ aside >
< aside >
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
< h1 > Twitter Feed</ h1 >
< blockquote cite = "https://twitter.example.net/t31351234" >
I'm on vacation, writing my blog.
</ blockquote >
< blockquote cite = "https://twitter.example.net/t31219752" >
I'm going to go on vacation soon.
</ blockquote >
</ aside >
< article >
<!-- this is a blog post -->
< h2 > My last post</ h2 >
< p > This is my last post.</ p >
< footer >
< p >< a href = "/last-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< article >
<!-- this is also a blog post -->
< h2 > My first post</ h2 >
< p > This is my first post.</ p >
< aside >
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
< h2 > Posting</ h2 >
< p > While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</ p >
</ aside >
< footer >
< p >< a href = "/first-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< footer >
< p >< a href = "/archives" > Archives</ a > -
< a href = "/about" > About me</ a > -
< a href = "/copyright" > Copyright</ a ></ p >
</ footer >
</ body > h1、h2、h3、h4、h5 和 h6 元素在所有当前引擎中支持。
在所有当前引擎中支持。
在所有当前引擎中支持。
在所有当前引擎中支持。
在所有当前引擎中支持。
在所有当前引擎中支持。
在所有当前引擎中支持。
标题组 元素的子元素。[Exposed =Window ]
interface HTMLHeadingElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};这些元素 表示 其部分的标题。
这些元素的语义和含义在 标题和提纲 部分中定义。
这些元素具有由其名称中的数字给出的 标题级别。The 标题级别 对应于嵌套部分的级别。The h1 元素用于顶级部分，h2 用于子部分，h3 用于子子部分，等等。
就它们各自的文档提纲（它们的头文件和部分结构）而言，这两个片段在语义上是等效的
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< h2 > Diving in</ h2 >
< h2 > Simple shapes</ h2 >
< h2 > Canvas coordinates</ h2 >
< h3 > Canvas coordinates diagram</ h3 >
< h2 > Paths</ h2 >
</ body > < body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h2 > Diving in</ h2 >
</ section >
< section >
< h2 > Simple shapes</ h2 >
</ section >
< section >
< h2 > Canvas coordinates</ h2 >
< section >
< h3 > Canvas coordinates diagram</ h3 >
</ section >
</ section >
< section >
< h2 > Paths</ h2 >
</ section >
</ body > 作者可能更喜欢前一种风格的简洁性，或者更喜欢后一种风格的额外样式钩子。哪个更好纯粹是一个个人编写风格问题。
标题组 元素在所有当前引擎中支持。
p 元素，后跟一个 h1、h2、h3、h4、h5 或 h6 元素，后跟零个或多个 p 元素，可选地与 支持脚本的元素 交织在一起。HTMLElement。The 标题组 元素 表示 标题和相关内容。该元素可用于将 h1 - h6 元素与一个或多个 p 元素组合，这些元素包含表示副标题、替代标题或标语的内容。
以下是一些包含在 标题组 元素中的有效标题的示例。
< hgroup >
< h1 > The reality dysfunction</ h1 >
< p > Space is not the only void</ p >
</ hgroup > < hgroup >
< h1 > Dr. Strangelove</ h1 >
< p > Or: How I Learned to Stop Worrying and Love the Bomb</ p >
</ hgroup > 页眉 元素在所有当前引擎中支持。
页眉 或 页脚 元素后代。HTMLElement。一个 `header` 元素通常包含一个标题（一个 `h1` - `h6` 元素或一个 `hgroup` 元素），但这不是必需的。`header` 元素也可以用来包装一个部分的目录，搜索表单或任何相关的徽标。
以下是一些示例标题。第一个是针对游戏的
< header >
< p > Welcome to...</ p >
< h1 > Voidwars!</ h1 >
</ header > 以下片段展示了该元素如何用于标记规范的标题
< header >
< hgroup >
< h1 > Fullscreen API</ h1 >
< p > Living Standard — Last Updated 19 October 2015< p >
</ hgroup >
< dl >
< dt > Participate:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > Commits:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ dd >
</ dl >
</ header > `header` 元素不是 分区内容；它不会引入一个新的部分。
在这个例子中，页面有一个由 `h1` 元素给出的页面标题，以及两个标题由 `h2` 元素给出的子部分。`header` 元素之后的内容仍然是 `header` 元素中开始的最后一个子部分的一部分，因为 `header` 元素不参与 轮廓 算法。
< body >
< header >
< h1 > Little Green Guys With Guns</ h1 >
< nav >
< ul >
< li >< a href = "/games" > Games</ a >
< li >< a href = "/forum" > Forum</ a >
< li >< a href = "/download" > Download</ a >
</ ul >
</ nav >
< h2 > Important News</ h2 > <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
< p > To play today's games you will need to update your client.</ p >
< h2 > Games</ h2 > <!-- this starts a third subsection -->
</ header >
< p > You have three active games:</ p >
<!-- this is still part of the subsection entitled "Games" -->
...footer` 元素 在所有当前引擎中支持。
header` 或 `footer` 元素后代。HTMLElement`。`footer` 元素 代表 其最近的祖先 分区内容 元素的页脚，或者如果不存在这样的祖先，则代表 body 元素 的页脚。页脚通常包含有关其部分的信息，例如谁编写了它，指向相关文档的链接，版权数据等等。
当 `footer` 元素包含整个部分时，它们 代表 附录，索引，长结语，详细的许可协议和其他此类内容。
部分作者或编辑的联系信息应放在一个 `address` 元素中，该元素可能本身位于一个 `footer` 元素内。旁注和其他可能适合 `header` 或 `footer` 的信息可以放置在任何一个（或都不放置）。这些元素的主要目的是帮助作者编写易于维护和样式化的自解释标记；它们不打算对作者强加特定的结构。
页脚不一定要出现在部分的末尾，尽管它们通常确实如此。
当没有祖先 分区内容 元素时，它适用于整个页面。
`footer` 元素本身不是 分区内容；它不会引入一个新的部分。
这是一个有两个页脚的页面，一个在顶部，一个在底部，内容相同
< body >
< footer >< a href = "../" > Back to index...</ a ></ footer >
< hgroup >
< h1 > Lorem ipsum</ h1 >
< p > The ipsum of all lorems</ p >
</ hgroup >
< p > A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</ p >
< footer >< a href = "../" > Back to index...</ a ></ footer >
</ body > 这是一个展示 `footer` 元素用于网站范围的页脚和部分页脚的示例。
<!DOCTYPE HTML>
< HTML LANG = "en" >< HEAD >
< TITLE > The Ramblings of a Scientist</ TITLE >
< BODY >
< H1 > The Ramblings of a Scientist</ H1 >
< ARTICLE >
< H1 > Episode 15</ H1 >
< VIDEO SRC = "/fm/015.ogv" CONTROLS PRELOAD >
< P >< A HREF = "/fm/015.ogv" > Download video</ A > .</ P >
</ VIDEO >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-10-21T18:26-07:00" > on 2009/10/21 at 6:26pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< ARTICLE >
< H1 > My Favorite Trains</ H1 >
< P > I love my trains. My favorite train of all time is a Köf.</ P >
< P > It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</ P >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-09-15T14:54-07:00" > on 2009/09/15 at 2:54pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< FOOTER > <!-- site wide footer -->
< NAV >
< P >< A HREF = "/credits.html" > Credits</ A > —
< A HREF = "/tos.html" > Terms of Service</ A > —
< A HREF = "/index.html" > Blog Index</ A ></ P >
</ NAV >
< P > Copyright © 2009 Gordon Freeman</ P >
</ FOOTER >
</ BODY >
</ HTML > 一些网站设计有有时被称为“胖页脚”的东西——页脚包含大量材料，包括图像，指向其他文章的链接，指向发送反馈页面的链接，特价优惠... 从某种意义上说，在页脚中有一个完整的“首页”。
此片段显示了一个具有“胖页脚”的网站页面底部。
...
< footer >
< nav >
< section >
< h1 > Articles</ h1 >
< p >< img src = "images/somersaults.jpeg" alt = "" > Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. < a href = "articles/somersaults/1" > Part
1</ a > · < a href = "articles/somersaults/2" > Part 2</ a ></ p >
< p >< img src = "images/kindplus.jpeg" > Tired of walking on the edge of
a clif<!-- sic --> ? Our guest writer Lara shows you how to bumble
your way through the bars. < a href = "articles/kindplus/1" > Read
more...</ a ></ p >
< p >< img src = "images/crisps.jpeg" > The chips are down, now all
that's left is a potato. What can you do with it? < a
href = "articles/crisps/1" > Read more...</ a ></ p >
</ section >
< ul >
< li > < a href = "/about" > About us...</ a >
< li > < a href = "/feedback" > Send feedback!</ a >
< li > < a href = "/sitemap" > Sitemap</ a >
</ ul >
</ nav >
< p >< small > Copyright © 2015 The Snacker —
< a href = "/tos" > Terms of Service</ a ></ small ></ p >
</ footer >
</ body > address` 元素 在所有当前引擎中支持。
header`，`footer` 或 `address` 元素后代。HTMLElement`。`address` 元素 代表 其最近的 `article` 或 `body` 元素祖先的联系信息。如果那是 body 元素，那么联系信息适用于整个文档。
例如，W3C 网站上与 HTML 相关的页面可能包含以下联系信息
< ADDRESS >
< A href = "../People/Raggett/" > Dave Raggett</ A > ,
< A href = "../People/Arnaud/" > Arnaud Le Hors</ A > ,
contact persons for the < A href = "Activity" > W3C HTML Activity</ A >
</ ADDRESS > `address` 元素不能用于表示任意地址（例如邮政地址），除非这些地址实际上是相关的联系信息。（`p` 元素是通常用于标记邮政地址的适当元素。）
`address` 元素不能包含除联系信息以外的信息。
例如，以下是 `address` 元素的非规范用法
< ADDRESS > Last Modified: 1999/12/24 23:37:50</ ADDRESS > 通常，`address` 元素将与其他信息一起包含在一个 `footer` 元素中。
节点 node 的联系信息是通过以下列表中的第一个适用的条目定义的 `address` 元素的集合
article` 元素body` 元素联系信息包含所有具有 node 作为祖先，并且没有另一个 `body` 或 `article` 元素祖先作为 node 后代的 `address` 元素。
article` 元素的祖先元素body` 元素的祖先元素node 没有联系信息。
用户代理可以向用户公开节点的联系信息，或将其用于其他目的，例如根据部分的联系信息对部分进行索引。
在这个例子中，页脚包含联系信息和版权声明。
< footer >
< address >
For more details, contact
< a href = "mailto:[email protected]" > John Smith</ a > .
</ address >
< p >< small > © copyright 2038 Example Corp.</ small ></ p >
</ footer > `h1` - `h6` 元素具有 标题级别，该级别由元素名称中的数字给出。
这些元素 代表 标题。标题 的 标题级别 越低，标题 拥有的祖先部分就越少。
轮廓 应用于生成文档轮廓，例如生成目录时。创建交互式目录时，条目应将用户跳转到相关的 标题。
如果文档有一个或多个 标题，则 轮廓 中至少有一个 标题 应具有 1 的 标题级别。
在 轮廓 中，紧随另一个 标题 lead 之后的每个 标题 必须具有小于、等于或比 lead 的 标题级别 大 1 的 标题级别。
以下示例是非规范的
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h3 > Taste</ h3 >
< p > They taste lovely.</ p >
</ section >
</ body > 它可以写成如下形式，然后它就符合规范了
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< p > They taste lovely.</ p >
</ section >
</ body > 以下标记片段
< body >
< hgroup id = "document-title" >
< h1 > HTML: Living Standard</ h1 >
< p > Last Updated 12 August 2016</ p >
</ hgroup >
< p > Some intro to the document.</ p >
< h2 > Table of contents</ h2 >
< ol id = toc > ...</ ol >
< h2 > First section</ h2 >
< p > Some intro to the first section.</ p >
</ body > … 生成 3 个文档标题
<h1>HTML：生活标准</h1>
<h2>目录</h2>.
<h2>第一部分</h2>.
轮廓 的渲染视图可能如下所示
首先，这是一个文档，它是一本包含非常短的章节和子部分的书籍
<!DOCTYPE HTML>
< html lang = en >
< title > The Tax Book (all in one page)</ title >
< h1 > The Tax Book</ h1 >
< h2 > Earning money</ h2 >
< p > Earning money is good.</ p >
< h3 > Getting a job</ h3 >
< p > To earn money you typically need a job.</ p >
< h2 > Spending money</ h2 >
< p > Spending is what money is mainly used for.</ p >
< h3 > Cheap things</ h3 >
< p > Buying cheap things often not cost-effective.</ p >
< h3 > Expensive things</ h3 >
< p > The most expensive thing is often not the most cost-effective either.</ p >
< h2 > Investing money</ h2 >
< p > You can lend your money to other people.</ p >
< h2 > Losing money</ h2 >
< p > If you spend money or invest money, sooner or later you will lose money.
< h3 > Poor judgement</ h3 >
< p > Usually if you lose money it's because you made a mistake.</ p > 它的 轮廓 可以表示如下
文档可以包含多个顶级标题
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< h1 > Apples</ h1 >
< p > Pomaceous.</ p >
< h1 > Bananas</ h1 >
< p > Edible.</ p >
< h1 > Carambola</ h1 >
< p > Star.</ p > 文档的 轮廓 可以表示如下
<!DOCTYPE HTML>
< html lang = "en" >
< title > We're adopting a child! — Ray's blog</ title >
< h1 > Ray's blog</ h1 >
< article >
< header >
< nav >
< a href = "?t=-1d" > Yesterday</ a > ;
< a href = "?t=-7d" > Last week</ a > ;
< a href = "?t=-1m" > Last month</ a >
</ nav >
< h2 > We're adopting a child!</ h2 >
</ header >
< p > As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.</ p >
</ article >
</ html > 该文档的 提纲 可以如下所示
以下示例符合规范，但不建议使用，因为它没有 标题 的 标题级别 为 1
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< section >
< h2 > Apples</ h2 >
< p > Pomaceous.</ p >
</ section >
< section >
< h2 > Bananas</ h2 >
< p > Edible.</ p >
</ section >
< section >
< h2 > Carambola</ h2 >
< p > Star.</ p >
</ section > 该文档的 提纲 可以如下所示
以下示例符合规范，但不建议使用，因为第一个 标题 的 标题级别 不是 1
<!DOCTYPE HTML>
< html lang = en >
< title > Feathers on The Site of Encyclopedic Knowledge</ title >
< h2 > A plea from our caretakers</ h2 >
< p > Please, we beg of you, send help! We're stuck in the server room!</ p >
< h1 > Feathers</ h1 >
< p > Epidermal growths.</ p > 该文档的 提纲 可以如下所示
鼓励用户代理向用户公开页面 提纲 以便于导航。对于非视觉媒体（例如屏幕阅读器）尤其如此。
例如，用户代理可以将箭头键映射如下
本节非规范性。
| 元素 | 目的 |
|---|---|
| 示例 | |
body
| 文档的内容。 |
| |
article
| 文档、页面、应用程序或网站中的完整或自包含的组成部分，原则上可以独立分发或重复使用，例如在联合馈送中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或工具，或任何其他独立的内容项目。 |
| |
section
| 文档或应用程序的通用部分。在本上下文中，部分是内容的主题分组，通常带有标题。 |
| |
nav
| 页面中的一节，链接到其他页面或页面内的部分：带有导航链接的一节。 |
| |
aside
| 页面中的一节，包含与 aside 元素周围内容相关的相关内容，可以认为与该内容分开。此类部分通常在印刷排版中表示为侧边栏。 |
| |
h1–h6 | 标题 |
| |
hgroup
| 标题和相关内容。该元素可用于将 h1–h6 元素与一个或多个 p 元素分组，这些元素包含表示副标题、替代标题或宣传语的内容。 |
| |
header
| 一组介绍性或导航辅助信息。 |
| |
footer
| 其最近祖先 分节内容 元素或 body 元素 的页脚（如果没有这样的祖先）。页脚通常包含有关其部分的信息，例如谁编写了它、相关文档的链接、版权数据等。 |
|
本节非规范性。
section 是其他内容的一部分。 article 是它自己的东西。但是，怎样才能知道哪个是哪个呢？真正的答案通常是“这取决于作者的意图”。
例如，可以想象一本书中有一章名为“青苹果”，里面只写着“这些多汁的青苹果非常适合制作苹果派”；这将是一个 section，因为还有很多其他章节（也许是）关于其他种类的苹果。
另一方面，可以想象一条推特、reddit 评论、tumblr 帖子或报纸分类广告只写着“青苹果。这些多汁的青苹果非常适合制作苹果派”；它将是一个 article，因为这就是全部内容。