HTML5的aside与article标签详细实例教程

元素

HTML

元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。

元素使用注意事项：

不要使用元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。

使用例子：

  
    
    The Disney movie The Little Mermaid was   
    first released to theatres in 1989.   
    
    
    The movie earned $87 million during its initial release.   
    
    
    More info about the movie...

HTML5中aside标签的两种使用方法

aside元素在网站制作中主要有以下两种使用方法

1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

  …  …  …

2）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

  …      …    …    …      …    …

元素

Article元素(

)故名思议，可以表示论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。它的主要语义为表示自己是一个独立的内容结构。每一个元素内部结构都应该是相似的，比如都应该包含一个头标题(h1-h6元素)等。

元素用法：

当元素嵌套使用时，则该元素代表与父元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中。
元素中文章作者的信息可通过元素表示，但是不适用于嵌套的元素。

元素中文章的发布日期和时间可通过元素的pubdate属性表示。

代码样例

  
    
    侏罗纪公园  
    
    
    Dinos were great!  
    
    
      
      Way too scary for me.  
        
          
          Posted on May 16 by Lisa.   
          
        
      
      
      I agree, dinos are my favorite.  
        
          
          Posted on May 17 by Tom.   
          
        
      
    
    
      
      Posted on May 15 by Staff.

html5中article标签的讲解

标签是用来定义一些来自外部的内容。比如一些网友的投稿或是新闻记者的文章或是摘取某博客、论坛的信息，以及其他媒介资料。

用户看到的内容并不是对应本网站的一个具体的页面，是可以嵌套使用的，内外层内容相关联

示例代码：

HTML5 项目HTML5是用于修正现在html的下一个网页规范HTML5是万维网结构方面的标准

标签支持HTML5中新的标准属性。

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

标签支持事件属性。

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload