Go语言视频零基础入门到精通

javalearner

在前面的HTML5+CSS3实战中，我们学习了怎样为范例页面编写“特色文章”部分的代码；今天呢，我们来看看页面的主体内容部分。 我们呢打算使用<section>标签来封装主体内容中的文章列表；根据W3C的定义规范：
   [blockquote]
    section元素标签用来表现普通的文档内容或应用区块。
   [/blockquote] 靠谱；接下来我们看看文章列表本身。既然是列表，我们仍然可以使用早已熟知的<ol>标签 (<ul>也未尝不可，从文章被按照时间进行排序的这个角度，推荐使用<ol>)。其中每一个列表项对应一篇文章，所以我们再嵌套一层<article>标签，将内容装装好。 接下来再深入一层，看看文章内部结构。我们可以为每篇文章的标题部分使用<header>标 签，为附件信息部分，如发布时间及作者信息，使用<footer>标签； 而正文可以使用<div>嵌套<p>来做。  
  
   
   
     
   

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



元素标签理清了，hAtom微格式也就位了，我们的代码如下： <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&iacute;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 -->

  
  
   
   

     
   

     
   
  

复制代码