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>
  • 相关阅读:
    Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)
    dubbo初探(转载)
    基于ZooKeeper的Dubbo注册中心
    kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)
    HBase权威指南 高清中文版 PDF(来自linuxidc)
    Hadoop + HBase (自带zookeeper 也可单独加) 集群部署
    zookeeper 入门讲解实例 转
    eclipse 配置黑色主题
    myeclipse 2016 激活,myeclipse 2016 激活
    界面上传文件js包【AjaxUpload.js】
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/9060807.html
Copyright © 2011-2022 走看看