本文深入探讨了HTML5中的section和article元素的用途、语法和特性，包括它们如何用于组织内容、呈现不同级别的标题以及在不同浏览器中的表现。通过实际例子，解释了如何在网页中使用这些元素来提高内容的结构化和可读性。
[color=red]section[/color]
The section element represents a generic section of a document or application. A section, in this context, [color=red]is a thematic grouping of content, typically with a heading.[/color]
[color=green]note:
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.[/color]
[color=red]Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.[/color]
比如现在有一个:
可以直接将他们放入到section里面，h1会自动降级。但是在我们使用style的时候会出现一个问题，我们使用section h1, section section h1，这样会非常混乱，我们可以像下面这样编码：
[color=red]在支持html5的浏览器中section里面的h1大小同h2。在ie6中，还是h1大小。[/color]
[color=red]article[/color]
[color=blue]The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
[/color]
[color=red]This example shows a blog post using the article element, with some schema.org annotations:[/color]
[color=red]Here is that same blog post, but showing some of the comments:[/color]
Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)
参考：[url]http://www.whatwg.org/[/url]
The section element represents a generic section of a document or application. A section, in this context, [color=red]is a thematic grouping of content, typically with a heading.[/color]
[color=green]note:
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.[/color]
[color=red]Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.[/color]
比如现在有一个:
<h1>Hi there</h1>
<p>there there there there</p>可以直接将他们放入到section里面，h1会自动降级。但是在我们使用style的时候会出现一个问题，我们使用section h1, section section h1，这样会非常混乱，我们可以像下面这样编码：
<section>
<h1 class="alpha">Hi there</h1>
<p>there there there there</p>
</section>
<section>
<h1 class="alpha">Hi there</h1>
<p>there there there there</p>
</section>[color=red]在支持html5的浏览器中section里面的h1大小同h2。在ie6中，还是h1大小。[/color]
[color=red]article[/color]
[color=blue]The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
[/color]
[color=red]This example shows a blog post using the article element, with some schema.org annotations:[/color]
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<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>[color=red]Here is that same blog post, but showing some of the comments:[/color]
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<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/UserComments" 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="commentTime" 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/UserComments" 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="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)
参考：[url]http://www.whatwg.org/[/url]
扫一扫
1704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
