zoukankan      html  css  js  c++  java
  • HTML5基础(三)

    新增的非主体结构元素

      1、header元素

    header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他的内容,比如在header里面放置logo图片、搜索表单等等。
    注意:一个页面内并没有限制header的出现次数,也就是说我们可以在同一页面内,不同的内容区块上分别加上一个header元素。
    在HTML5中,一个header元素至少可以包含一个heading元素(h1-h6),也可以包括我们下节课将要学习的hgroup元素,还可以包括其他的元素,在新的W3C HTML5标准,我们还可以把NAV元素包括进去。

    <header>
        <h1>网页标题</h1>
    </header>
    <article>
        <header>
            <h1>文章标题</h1>
        </header>
        <p>文章正文部分</p>
    </article>

    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
           *{
               margin: 0;
               padding: 0;
           }
            body{
                font-family: 微软雅黑;
                text-align: center;
            }
            a{
                color: #f60;
                text-decoration: none;
            }
            hgroup{
                margin-bottom: 10px;
            }
            nav{
                height: 48px;
                background: #ff6600;
            }
            nav li{
                float: left;
                background: #000000;
                border-radius: 5px;
                padding: 5px 10px;
                margin: 10px;
                list-style: none;
            }
        </style>
    </head>
    <body>
    <header>
        <hgroup>
            <h1>HTML5视频教程</h1>
            <a href="/">[手机版]</a>
            <a href="/">[HTML5论坛]</a>
        </hgroup>
        <nav>
            <ul>
                <li>
                    <a href="/">首页</a>
                </li>
                <li>
                    <a href="/">手机版</a>
                </li>
                <li >
                    <a href="/">论坛</a>
                </li>
            </ul>
        </nav>
    </header>

    </body>

      2、hgroup元素

    hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组,比如在一个内容区块的标题和他的子标题算是一组。
    通常情况下,文章只有一个主标题时,是不需要hgroup元素的。

    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>

    <article>
        <header>
            <h1>文章标题</h1>
            <p><time datetime="2014-10-08">2014年10月8日</time></p>
        </header>
        <p>文章正文</p>
    </article>

    <article>
        <header>
            <hgroup>
                <h1>文章主标题</h1>
                <h2>文章子标题</h2>
            </hgroup>
            <p><time datetime="2014-10-08">2014年108日</time> </p>
        </header>
        <p>文章正文</p>
    </article>

      3、footer元素

    footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息,比如作者、版权信息等。

    注意:footer元素和我们前面所讲的header元素一样,并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。

    <article>
        <p>文章内容</p>
        <footer>
            文章的脚步注释
        </footer>
    </article>
    <section>
        <p>文章内容</p>
        <footer>
            文章的脚步注释
        </footer>
    </section>

    <footer>
        <p>
            <a href="/">版权信息</a>|
            <a href="/">关于我们</a>|
            <a href="/">联系我们</a>|
            <a href="/">站点地图</a>|
        </p>
        <p>学院版权所有</p>
    </footer>

      4、address元素

    address元素用来在页面中呈现联系信息,包括文档的作者、邮箱、地址、电话信息等。
      address元素还用来展示和文章中的相关的联系人的所有联系信息。

    <address>作者信息</address>

    <footer>
        <address>
            <a href="/" title="bin">bin</a>
            <a href="/" title="binperson">binperson</a>
            重庆市高新区天府软件园D区D5栋504室
        </address>
        时间:<time datetime="2014-10-11">2014年10月11日</time>
    </footer>

  • 相关阅读:
    【2019-08-03】自卑和悲观是有区别的
    你现在不用写代码了吧?
    【2019-08-02】信任是一种能力
    【2019-08-01】给孩子一个渴望长大的榜样
    【一句日历】2019年8月
    【2019-07-31】一切皆有寓意
    【2019-07-30】原来努力会上瘾
    【2019-07-29】睡多了,会被宰的
    【2019-07-28】活到老,学到老
    【2019-07-27】习惯的力量很强大
  • 原文地址:https://www.cnblogs.com/binperson/p/5495957.html
Copyright © 2011-2022 走看看