关注前端开发微信微信号web007007

HTML5入门(第三课)HTML5网站布局

作者 管理员 发布时间 2012-09-15 14:13 文章分类 HTML5 文章评论 3条评论 阅读次数

<!DOCTYPE html>
<htmlang = "en">
<head>
<meta charset = "utf-8">
&lt;title&gt;<a href="http://www.web92.net/tag/html5-2" title="查看 HTML5 中的全部文章" target="_blank">HTML5</a> Demo&lt;/title&gt;
&lt;body&gt;
&lt;!--头部--&gt;
&lt;header&gt;
&lt;h1&gt;logo&lt;/h1&gt;
&lt;h2&gt;前端技术&lt;/h2&gt;
&lt;/header&gt;
&lt;!--导航--&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;首页&lt;/li&gt;
&lt;li&gt;关于前端技术&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;!--主体内容--&gt;
&lt;section&gt;
&lt;article&gt;文章1&lt;/article&gt;
&lt;article&gt;文章2&lt;/article&gt;
&lt;/section&gt;
&lt;!--侧边栏--&gt;
&lt;aside&gt;
&lt;nav&gt;小导航&lt;/nav&gt;
&lt;p&gt;标签&lt;/p&gt;
&lt;p&gt;广告&lt;/p&gt;
&lt;/aside&gt;
&lt;!--版权--&gt;
&lt;footer&gt;版权所有@wouit.com&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;

效果

HTML5入门(第三课)HTML5网站布局 - WEB前端开发网

讲解

section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容 块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表 introduction, news items和contact information。

article代表了一个文档内容的独立片段,例如,博客条目或报纸文章,<article>标签的内容独立于文档的其余部分。

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

aside元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。

本文固定链接: http://www.web92.net/716.html | WEB前端开发

该日志由 于2012年09月15日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: HTML5入门(第三课)HTML5网站布局 | WEB前端开发
关键字: ,
  1. article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。