码迷,mamicode.com
首页 > Web开发 > 详细

Html5主要新增主体结构元素

时间:2018-01-14 19:35:13      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:结构   info   分享   格式   head   idt   .com   显示   time   

article

代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。

article元素是可以嵌套使用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for article</title>
</head>
<body>
    <article>
        <header>
            <h1>这是一个头部</h1>
            <p>我是底部的注解</p>
        </header>
        <!--嵌套使用的article-->
        <article>
            <header>
                <h1>作者</h1>
            </header>
            <p>评论</p>
            <footer>
                time
            </footer>
        </article>
        <footer>
            这是底部
        </footer>
    </article>
    <!--提供插件作用的article-->
    <!--递归显示页面-->
    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src = "#" width = 600 height = 400></embed>
        </object>
    </article>
</body>
</html>

显示效果:

技术分享图片

section

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

用法有以下几点需要注意:

  • 不要将section元素作为设置样式的页面容器
  • 如果article元素、aside元素、nav元素更符合使用条件,那不要使用section元素
  • 没有标题内容不要使用section元素

nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。

nav元素应用场景:

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

html中导航栏

<div>
    <ul>
        <li><a href="#"></a>
        <li><a href="#"></a>
        <li><a href="#"></a>
    </ul>
</div>

html5中导航栏

<nav>
    <ul>
        <li><a href="#"></a>
        <li><a href="#"></a>
        <li><a href="#"></a>
    </ul>
</nav>

另外:不要用menu元素代替nav元素进行使用,加为menu元素更多使用在交互命令菜单之中,而不是导航。

aside

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。

time元素与微格式

  • 微格式

自用html5元素的class属性添加附属信息的格式

附加的信息可以是发布时间,电话号码等等

微格式并不是html5才出现,在之前的html之中已经有了使用,但是在对时间的编译上会出现错误歧义。而html5新增的time元素改变了这一点·

  • time元素用法如下
<time datetime="2017-07-29">2017-07-29</time>
<time datetime="2017-07-29T20:00">2017-07-29</time> #T代表时间
<time datetime="2017-07-29T20:00Z">2017-07-29</time> #Z代表UTC时间
<time datetime="2017-07-29T20:00+09:00">2017-07-29</time> #'+09:00'代表时差
  • pubdate属性

boolean类型,用于time元素

代表当前时间为文章的发布时间

Html5主要新增主体结构元素

标签:结构   info   分享   格式   head   idt   .com   显示   time   

原文地址:https://www.cnblogs.com/oneTOinf/p/8283907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!