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

互联网 18-8-14

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

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

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： HTML5新增的结构元素详解