定义化标签之文档元素1

在html5中新增一系列的定义化标签,相对于div更加的解析了网页。包括:header定义一个文档结构的页眉。footer标签、hgroup、nav、article、section、aside。

header标签的作用:<h1/h2/h3/.....表示不同的字体大小。。。用于控制页眉的类型。。。input 表示搜索框,属性type控制。

<body>
    <header >
        <hgroup>
        <h1 >HTMl5</h1>
            <h2>张保东自学</h2>
            <h3>我喜欢你</h3>
        <h4>HTML网页开发自学</h4>
            <h5>我喜欢你!!</h5>
        </hgroup>
        <input type="search"  results="9"/>
    </header>


</body>


2、footer标签:可以定义多个,也用来定义页眉。通常定义一个文档结构的页眉。

 <footer >
        designed by <em>zhangbaodong</em> from dongteng 
    </footer>


3、hgroup标签用来定义文档中的标题组。即一个文档中包含主标题和多个副标题时多个h1-h6标签可以放在hgroup中。

4.nav标签用来定义一个文档中的导航区域。nav只用于页面的主要导航,对于侧面边缘的不适合使用。

 <nav>
        <ul>
            <li>张保东</li>
            <li>东腾科技</li>
            <li>山东交通学院</li>
        </ul>
    </nav>


5、article:定义一个文档中自成一体的内容。例如在一个article标签中可以放一个论坛的帖子,博客的文章或者用户的评论。在article中还有自身的header和footer,可以嵌套使用。

<body>
    <article>
        <header>
            <h1>东腾博客</h1>
        </header>
        <p>文章内容..</p>
        <article>
            <h2>评论</h2>
            <article>
                <header>
                    <h3>评论者:张保东</h3>
                </header>
                <p>good,,,,是好文章</p>
            </article>
            <article>
                <header>
                    <h3>评论者:张保东2</h3>
                </header>
                <p>太垃圾,不值得讨论</p>
            </article>
        </article>
    </article>
</body>


6、section用于定义一个文档结构中的章节内容。section和article两者很容易混淆。article定义的是一个文档的独立模块,是一个容器元素。section标签定义的是一个文档中的组成内容,和父标签是从属关系。两个允许嵌套。

<body>
    <section >
        <h1>东腾科技</h1>
        <article >
            <h2>张保东</h2>
            <p>公司介绍</p>
            <section >
                <h3>公司职能</h3>
                <p>新概念公司</p>
            </section>
        </article>

    </section>
</body>

7、aside通常包含在article标签中作为主要内容的附属信息部分。通常和article组合使用,作为页面或者站点全局的附属信息部分。

<body>
    <article >
        <h1>东腾科技</h1>
        <p>公司简介</p>
        <aside>
            <h1>新的管理体系</h1>
            <p>
                现代化的潮流科技
            </p>
        </aside>
        <footer >
            <a href="#">正在日益壮大中!</a>
        </footer>
    </article>
</body>


原文地址:https://www.cnblogs.com/dongteng/p/4965233.html