• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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新增的结构元素的用法(推荐)的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

相关文章

  • 2018-12-03前端开发工程师在技术上如何专注和沉淀?
  • 2018-12-03网页 head 标签中的 JS 和 CSS,哪种文件放在前面,哪种放在后面比较好?
  • 2018-12-03画出自己的UI组件的详情
  • 2018-12-03为什么 Opera 总做那些别人不做的 HTML5 新功能?
  • 2018-12-03Html5中内容安全策略(CSP)
  • 2018-12-03HTML5视频播放器<video>和音频播放器<audio>用法
  • 2017-08-06HTML5不支持标签和新增标签详解
  • 2017-08-06基于HTML5 audio元素播放声音jQuery小插件
  • 2018-12-03同事开发webapp(图片应用)遇到一些问题,如兼容uc浏览器,那么webapp开发在业内有没有比较成功的例子?
  • 2017-08-06HTML5实现动画效果的方式汇总

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5未来发展趋势 _html5教程技巧
    • html5 svg 中元素点击事件添加方法_html5教程技巧
    • 详解html5 canvas常用api总结(二)--绘图API
    • HTML5新增属性
    • 关于FileAPI的详细介绍
    • HTML5 高级教程--拖放 API 实现拖放排序
    • html5利用canvas实现图片转素描效果
    • canvas游戏开发学习之七:变形
    • SVG怎样开始实现多彩圆环倒计时
    • HTML5 window/iframe跨域传递消息 API介绍_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有