• HTML5 新增的主体结构元素
  • article 元素
  • section 元素
  • nav
  • aside元素
  • time元素和pudate属性
  • time元素
  • pudate属性
  • HTML5新增的非主体结构元素
  • header元素
  • footer元素
  • hgroup元素
  • address元素
  • HTML5的结构

HTML5 新增的主体结构元素

article 元素

可以内嵌
可以表示插件

<article>
            <h1>这是一个内嵌页面</h1>
            <object>
                <embed src="#" width = "600"  height = "400"</embed>
            </object>
        </article>

section 元素

通常不推荐没有标题内容使用section元素
不要与article元素混淆

总结

  • 不要将section元素作为设置样式的页面容器
  • 如果article、aside、nav元素更符合使用条件，那不要说seciton元素
  • 没有标题内容的，不要使用section元素

nav

用作页面导航的连接组，其中的导航元素连接到其他页面或当前页面的其他部分。将主要的、基本的连接组放进nav元素即可
应用场景：

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

html5中不要使用menu 元素代替 nav元素

练习代码如下

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">主页</a></li>
                <li><a href = "#">开发文档</a></li>
            </ul>
        </nav>
        <article>
            <header>
                <h1>html5和css3的历史</h1>
                <nav>
                    <ul>
                        <li><a href = "#">HTML5历史</a></li>
                        <li><a href = "#">CSS3历史</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <h1>HTML5历史</h1>
                <p>....</p>
            </section>
            <section>
                <h1>css3历史</h1>
                <p>....</p>
            </section>
            <footer>
                <a href = "#">删除</a>
                <a href = "#">修改</a>
            </footer>
        </article>
        <footer>
            <p><small>版权声明：</small></p>
        </footer>
    </body>
</html>

aside元素

表示当前页面或者文字的附属信息部分
包含先关的引用、侧边栏、逛逛、导航条等

练习代码如下

<html>
    <head>
        <meta charset="UTF-8">
        <title>aside元素</title>
    </head>
    <body>
        <header>
            <h1>js入门</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 = "#" >大牛：真希望可以好好的学习一下</a></li>
                </ul>
            </nav>
        </aside>
    </body>
</html>

time元素和pudate属性

time元素

24小时

<html>
    <head>
        <meta charset="UTF-8">
        <title>Time元素</title>
    </head>
    <body>
        <time datatime = "2017-10-09">2017-10-09</time>
        <time datatime = "2017-10-09T20:00">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
    </body>
</html>

pudate属性

<html>
    <head>
        <meta charset="UTF-8">
        <title>update属性</title>
    </head>
    <body>
        <article>
            <header>
                <h1>苹果</h1>
                <p>发布日期
                <time datetime="2017-10-09" pubudate>2015-10-09</time></p>
                <p>舞会时间
                <time datetime ="2015-10-09">2015-10-09</time></p>
            </header>
        </article>
    </body>
</html>

HTML5新增的非主体结构元素

header元素

具有引导和导航作用额结构元素

<html>
    <head>
        <meta charset="UTF-8">
        <title>header元素</title>
    </head>
    <body>
        <header>
            <h1>IT最新技术</h1>
            <a href="#">极客学院</a>
            <nav>
                <ul>
                    <li><a href="#">学习</a></li>
                    <li><a href="#">技术</a></li>
                    <li><a href="#">极客</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

footer元素

可以在article和section中嵌套

hgroup元素

将标题及其子标题进行分组的元素。
hgroup通常会将h1~h6元素进行分组
将同一级下的标题和子标题进行组合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <article>
            <header>
                <hgroup>
                    <h1>这是文章的标题</h1>
                    <h2>这是一个子标题</h2>
                </hgroup>
                <p><time datetime="2017-10-09">2017-10-09</time></p>
            </header>
            <div>
                这是内容
            </div>
            <footer>
                这是底部
            </footer>
        </article>
    </body>
</html>

address元素

呈现联系人和联系信息

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <address>
            <a href="#">iwen</a>
            <a href="#">ime</a>
        </address>
        <footer>
            <div>  
                   <!--
                    作者：offline
                    时间：2017-10-09
                    描述：方便添加属性
                   -->
                <address>
                    <a href="#">iwen</a>极客学院，嘉华大厦
                </address>
                <time datetime = "2017-10-09">2017-10-09</time>
            </div>
        </footer>
    </body>
</html>

HTML5的结构

  • 显示编排内容区域块
    section等元素
  • 隐示编排内容区域块
  • 标题分级
    按级别生成
  • 不同区域块可以使用相同级别的标题

下面是一个典型的结构demo

<html>
    <head>
        <meta charset="UTF-8">
        <title>网页编排示例</title>
    </head>
    <body>
        <header>    
            <h1>网页标题</h1>
            <nav>
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">help</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <hgroup>
                <h1>main title of article</h1>
                <h2>sub title of article</h1>
            </hgroup>
            <p>content
            </p>
            <section>
                <div>
                    <article>
                        <h1>pinglun title</h1> 
                        <p>pinglun content</p>
                    </article>
                </div>
            </section>
        </article>
        <footer>
            <small>copyright belongs to...</small>
        </footer> 
    </body>
</html>