HTML5新增的结构元素有哪些？HTML5新增的结构元素的用法（推荐）

HTML5 新增的主体结构元素：

• article 元素

• section 元素

• nav

• aside元素

• time元素

• pudate属性

元素详解：

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元素

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>
    

【相关推荐】

html的基础元素，让你零基础学习HTML

什么是HTML文件？HTML文件的初步认识

以上就是HTML5新增的结构元素有哪些？HTML5新增的结构元素的用法（推荐）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！