HTML5学习笔记(3)--主题结构元素-1

Article元素

以下为对应代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <article>
      <header>
          <h1>极客学院</h1>
      </header>
      <article>
          <header>页面头部1</header>
          <p>评论</p>
          <footer>底部1</footer>
      </article>
      <footer><p>页面底部</p></footer>
  </article>
<article>
    <object>
        <embed src="test.html" width="600" height="700"></embed>
  </object>
  </article>
</body>
</html>

效果图:

总结：article可以做为引入外部页面的语义化元素.article可以使页面代码结构更清晰.

Section元素

以下为对应代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<section>
    <h1>test</h1>
    <p>这是水果</p>
</section>
<article>
    <h1>这是一个水果类</h1>
    <p>这是水果</p>
    <section>
        <h1>这是一个红富士</h1>
        <p>这是红富士</p>
    </section>
    <section>
        <h1>这是一个国光</h1>
        <p>这是国光</p>
    </section>
</article>
<section>
    <h1>玩具类</h1>
    <article>
        <h2>这是玩具1</h2>
        <p>玩具1</p>
    </article>
    <article>
        <h2>这是玩具2</h2>
        <p>玩具2</p>
    </article>
</section>
</body>
</html>

效果图:

总结：article嵌套section时字体大小发生了变化，但是section嵌套article字体却还是一样.

article通常做为一个页面的独立部分存在，而section强调对页面内容的划分.

NAV导航

以下为对应代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">开发文档</a></li>
    </ul>
    <article>
        <header>
            <h1>页面导航</h1>
            <nav>
            <ul>
                <li><a href="#1">html5</a></li>
                <li><a href="#">css3</a></li>
            </ul>
            </nav>
        </header>
        <section id="#1">
        <h1>html5</h1>
        <p>......</p>
        </section>
        <section>
            <h1>css3</h1>
            <p>......</p>
        </section>
        <footer>
       <a><p>版权</p></a>
        </footer>
    </article>
</nav>
</body>
</html>

效果图

总结：个人感觉该标签的文档语义大于功能语义

Aside元素

以下为对应代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <title>
    </title>
    <body>
        <header>
            <h1>test</h1>
        </header>
        <article>
            <h1>语法</h1>
            <p>文章的正文</p>
            <aside>
                <h1>名词解释</h1>
                <p>语法：这是一个对语言来说很重要的内容体</p>
            </aside>
        </article>
        <aside>
            <nav>
                <h2>评论</h2>
                <ul>
                    <li><a href="#">2015-3-10</a></li>
                    <li><a href="#">元素1</a></li>
                </ul>
            </nav>
        </aside>
    </body>
</html>