织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

HTML5+CSS3 实战(7) 主体内容

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
HTML5+CSS3 实战(7) 主体内容

在昨天的HTML5+CSS3实战中,我们学习了怎 样为范例页面编写“特色文章”部分的代码;今天呢,我们来看看页面的主体内容部分。

我们呢打算使用<section>标签来封装主体内容中的文章列 表;根据W3C的定义规范:

section元素标签用来表现普通的文档内容或应用区块。

靠谱;接下来我们看看文章列表本身。既然是列表,我们仍然可以使用早已熟知的<ol>标签 (<ul>也未尝不可,从文章被按照时间进行排序的这个角度,推荐使用<ol>)。其中每一个列表项对应一篇文章,所以我们再嵌 套一层<article>标签,将内容装装好。

接下来再深入一层,看看文章内部结构。我们可以为每篇文章的标题部分使用<header>标 签,为附件信息部分,如发布时间及作者信息,使用<footer>标签; 而正文可以使用<div>嵌套<p>来做。

为什么要使用<div>呢,根据微格式hAtom 0.1的草案,内容需要由一个容器来封装,但对于这些由段落直接组成的正文内容文字,并没有特定符合语义的标签来对应;所以我们可以使用最不包 含语义的<div>。

元素标签理清了,hAtom微格式也就位了,我们的代码如下:

[html]
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li>
<article class="hentry">
<header>
<h2 class="entry-title">
<a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a>
</h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div><!-- /.entry-content -->
</article>
</li>
<li>
<article class="hentry">
...
</article>
</li>
<li>
<article class="hentry">
...
</article>
</li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
[/html]

(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容