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

javalearner

下面看看页面的“特色文章”部分。根据W3C的定义规范：  
   [blockquote]
    aside元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元 素组
    ，以及其他类似的有别于主要内容的部分。
   [/blockquote] 结合之前文档中的页面设计图以及下面的“特色文章”局部设计图来看，<aside>用在这里还是比较靠谱的。那么我们继续结合设计图来分析一下内部结构。

如下图：

      我们可以看到，这里有一个典型的文章结构，那么我们就要在<aside>中嵌套一个<article>作为文章区块的容器。在文章结构中，有一个标题和一个副标题，我们决定为它们分别使用<h2>和<h3>，并统一归并到标题组<hgroup>中。  
  
   
   
     
   

     
   
  
  


我们使用<figure>元素来做题图的容 器。<figure>用来封装那些属于内容的一部分，但形式上又是独立于主要内容流之外的元素，这样的元素通常自称一体，并可以带有 caption类型的属性；显然适用于<img>元素。 对于段落文字，<p>仍是最合适的；整体代码范例如下：

<aside id="featured" class="body">
  <article>
   <figure>
    <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
   </figure>
   <hgroup>
     <h2>Featured Article</h2>
     <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
   </hgroup>
  <p>
     Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and
<a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!
  </p>
  </article>
</aside>