HTML学习第七天（二）

新增的非主体结构

header元素
footer元素
hgroup元素
address元素

header元素：通常用于存放整个页面或页面内的一个区域块的标题，但也可以存放类似于数据表格搜索表单或相关的logo图案，header一般会包含一个handing元素，也可以不放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
            <!-- H5之前的写法 -->
    <!--<div class="header"></div>-->
    <!--<div class="content"></div>-->
    <!--<div class="footing"></div>-->

    <header>
        <h1>IT最新技术</h1>
    </header>
    <article>
        <header>
        <a href="index.html"></a>
            <nav>
                <ul>
                    <li><a href="#">学习</a> </li>
                    <li><a href="#">技术</a></li>
                    <li><a href="#">论坛</a></li>
                    <li></li>
                </ul>
            </nav>
        </header>
    </article>
    <footer>CIP</footer>
</body>
</html>

footer元素：作为上层父级元素内容区域块的脚注，一般包括作者，相关阅读链接，以及版权信息，备案号等

  <!-- H5之前的写法 -->
    <!--<div class="footer">-->
        <!--<ul>-->
            <!--<li><a href="#">备案号</a></li>-->
            <!--<li><a href="#">公安局备案</a></li>-->
            <!--<li><a href="#">版权归属</a></li>-->
        <!--</ul>-->
    <!--</div>-->
            
            <!-- 区块结尾 -->
    <article>
        <footer>
            文章的底部
        </footer>
    </article>

<!-- 全局的底部 -->
    <footer>
        <ul>
        <li><a href="#">备案号</a></li>
        <li><a href="#">公安局备案</a></li>
        <li><a href="#">版权归属</a></li>
        </ul>
    </footer>

hgroup元素:将标题及其子标题进行分组的元素。hgroup元素常会将h1到h6元素进行分组，例如一个内容区块的标题及其子元素算一组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <article>
        <header>
            <hgroup>
                <!-- 降级 -->
                <h1>
                    这是文章标题
                </h1>
                <p><time datetime="2020-02-02">2020-02-02</time></p>
                <h2>这是一个子标题</h2>
            </hgroup>
        </header>
        <div>
            这是内容
        </div>
        <footer>这是底部</footer>
    </article>
</body>
</html>

address元素：文档中所有的联系信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <address>
        <a href="#">aaa</a>
        <a href="#">www</a>
        <a href="#">vvv</a>
    </address>

    <footer>
        <div>
            <address>
                <a href="#">who</a>
                My,world
            </address>
            <time datetime="2020-02-02">2020-02-02</time>
        </div>
    </footer>
</body>
</html>

HTML学习第七天（二）

HTML学习第七天（二）

猜你喜欢