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的个数。