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

前端开发教程 2025-03-04 0

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新增的结构元素的用法（推荐）的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。