HTML5学习笔记二

主体结构元素：section、article、nav、aside

【注】内容区块：是指将页面按逻辑进行分割的单位。例如对于书籍来说，章、节都可以成为内容区块；对于博客来说，导航菜单，文章正文，文章评论等每一个部分都可以称为内容区块。

article：可独自被外部引用的内容，可以是一篇博文，或报刊中的文章、一片论坛帖子。

View Code

<article>     
        <h1>苹果</h1>    
        <p>发表日期: 
           <time pubdate datetime="2010/10/09">2010/10/09</time>
        </p>
    <p><b>苹果</b> ，植物类水果，多次花果...（“苹果”文章正文）</p> 
    <section>    
        <h2>评论</h2>    
        <article>      
            <header>      
                <h3>发表者：陆凌牛</h3>      
                <p><time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time></p>    
            </header>    
            <p>我喜欢苹果，我最喜爱的品种是红富士。</p>    
        </article>        
    </section>
</article>

 

 

 

section：此元素通常有内容及其标题组成，但section元素并非一个普通的容器元素，当一个容器需要被定义样式或javascript定义行为时，推荐使用div而非section，

              或者这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中

*通常不推荐为那些没有标题的内容使用section

也许很多人会将section和article两者混淆，下面贴段代码帮助理解。

View Code

<article>  
    <h1>苹果</h1>  
    <p><b>苹果</b> ，植物类水果，多次花果...</p>
    <section>    
        <h2>红富士</h2>    
        <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>  
    </section>  
    <section>    
        <h2>国光</h2>    
        <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p>  
    </section>    
</article>

 

在上述代码中，内容首先是一段独立的、完整的内容，因此使用article元素。该内容是一篇关于苹果的文章，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section。

在HTML5里，section元素强调的是分段或分块，而article强调独立性

section元素的使用禁忌：

1）不要将section元素用作设置样式的页面容器，那是div元素的工作。

2）如果article元素、aside元素或nav元素更符合使用条件，就不要使用section元素。

3）不要为没有标题的内容区块使用section元素。

 

nav：用作页面导航的链接组。

View Code

<nav>
    <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/events">开发文档</a></li>
        ...more...
    </ul>
</nav>
<article>
   <header>
        <h1>HTML5与CSS3的历史</h1>
        <nav>
            <ul>
                <li><a href="#HTML5">HTML5的历史</a></li>
                <li><a href="#CSS3">CSS3的历史</a></li>
                ...more...
            </ul>
        </nav>
    </header>
    <section id="HTML5">
        <h1>HTML5的历史</h1>
        <p>讲述HTML5的历史的正文</p>
    </section>
    <section id="CSS3">
        <h1>CSS3的历史</h1>
        <p>讲述CSS3的历史的正文</p>
    </section>
    ...more...
    <footer>
        <p>
            <a href="?edit">编辑</a> | 
            <a href="?delete">删除</a> | 
            <a href="?rename">重命名</a>
        </p>
    </footer>
</article>
<footer>
    <p><small>版权所有：陆凌牛</small></p>
</footer>

 

使用场合：传统导航条、侧边栏导航、页内导航、翻页操作。

aside：用来标示当前页面或文章的附属信息部分。

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

View Code

<article>  
    <h1>第四节 词法闭包</h1>  
    <p>lambda表达式可以创建词法闭包...(文章正文）</p>    
    <aside>      
        <!-- 因为这个aside元素被放置在一个article元素内部，
        所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->      
        <h1>名词解释</h1>      
        <dl>        
            <dt>F#</dt>        
            <dd>F#为.Net2010中引入的新型函数型编程语言</dd>      
        </dl>    
        <dl>        
            <dt>词法闭包</dt>        
            <dd>词法闭包是指，将创建lambda表达式时的环境保存起来...(详细解释）</dd>      
       </dl>       
    </aside>  
</article>

 

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

 

非主体结构元素：header、hgroup、footer

header：通常用来放置整个页面或页面内的一个内容区块的标题，当然也可以包含其他内容，例如数据表格，搜索表单，相关logo等。

<header>
    <h1>网页标题</h1>
</header>
<article>
    <header>
        <h1>文章标题</h1>
    </header>    
    <p>文章正文</p>
</article>

 

强调：一个网页内并未限制header元素的个数！在HTML5规范中，一个header元素通常包括至少一个heading元素（h1-h6），也可以包括hgroup元素。

hgroup：将标题及其子标题进行分组的元素。hgroup通常会将h1~h6元素进行分组，如果文章只有一个主标题，就不需要hgroup元素。

View Code

<article>
    <header>
        <h1>文章标题</h1>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

 

如果有多个标题，则如下所示：

View Code

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

 

footer：作为其上层父级内容区块或一个根区块的脚注。通常包含其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。与header一样，页面并未限制footer的个数。