zoukankan      html  css  js  c++  java
  • 语义化结构的标签

    常见语义化结构标签:

    1.header:这个标签表示一个节的头部

    hgroup:这个标签表示一组标题

    footer:这个标签表示一个节的脚注,可以包含作者,版权等信息

    nav:这个标签用于导航链接部分

    section:这个标签表示一个通用的文档或者应用程序节

    article:这个标签表示文档内容的一个独立块,比如博客条目或者报纸上的文章

    aside:这个标签表示与也main其他部分略微相关的内容块

    各元素介绍:

    1、hgroup:元素代表页面或内容块的标题分组

    当元素有多个层级时,该元素可以将h1到h6元素放在其内

    譬如文章的主标题和副标题的组合

    如果只需要一个h2-h6标签就不要用hgroup

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hgroup</title>
    </head>
    <body>
        <hgroup>
        <h1>王者农药</h1>
        <h2>2亿人都在王的游戏</h2>
        </hgroup>
        <p>qwertyuio asdfghjk zzxcvbnm wertyui</p>
    </body>
    </html>

    2、header:元素代表页面或内容块的头部标题(页眉)

    通常包含h1-h6元素或hgroup

    页面中header 元素的个数没有限制,可以拥有多个

    可以为每个内容块增加一个header元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>header</title>
        <style>
            header{
                border: 1px solid #ff0000;
                margin: 5px;
            }
            div{
                border: 1px solid #333333;
                margin: 5px;
            }
        </style>
    </head>
    <body>
    <header>
        头部信息
    </header>
    <div>
        <header>
            <p>页面正文区域</p>
        </header>
        <section>
            <article>
                <header>
                    <h1>王者荣耀</h1>
                    <h2>游戏</h2>
                </header>
                <p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p>
            </article>
            <article>
                <header>
                    <h1>王者荣耀</h1>
                    <h2>游戏</h2>
                </header>
                <p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p>
            </article>
        </section>
    </div>
    </body>
    </html>

    footer:元素代表页面或内容块的底部部分(页脚)

    通常含有该节的一些基本信息(譬如:作者,相关文档连接,版权资料等)

    如果footer元素包含了整个节,那么他们就代表附录,索引等类似信息footer 没有个数限制,除了包裹的内容不一样,其他跟header类似

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>footer</title>
        <style>
            div{
                border: 2px solid #333333;
                margin: 5px;
            }
            footer{
                border: 2px solid brown;
                margin: 5px;
            }
        </style>
    </head>
    <body>
    <header>头部信息</header>
    <div>
        页面正文区域
    </div>
    <footer>
        <div>&copy;;2017</div>
    </footer>
    </body>
    </html>
  • 相关阅读:
    数据结构之查找算法总结笔记
    html的a链接的href怎样才另起一个页面
    深入理解CSS中的空白符和换行
    CSS文本方向
    alert()与console.log()的区别
    CSS旧版flex及兼容
    Java:类与继承
    Java中只有按值传递,没有按引用传递!
    String作为方法参数传递 与 引用传递
    Java:按值传递还是按引用传递详细解说
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/9060807.html
Copyright © 2011-2022 走看看