HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

HTML5新增的结构元素有哪些?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新增的结构元素的用法(推荐)的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:JAVA微信开发如何使用?总结JAVA微信开发实例用法
下一篇:html5中onclick是什么意思

发表评论

关闭广告
关闭广告