zoukankan      html  css  js  c++  java
  • 定义化标签之文档元素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>


  • 相关阅读:
    Fbpanel-轻巧的面板措施
    Skype for Linux 1.4 Alpha 公布
    KFTPgrabber 0.8.1
    Ardour:专业的数字音频任务站
    Cinelerra:视频编纂软件
    V2EX::ING 与 INGC
    HandBrake:DVD 转换工具
    XML Copy Editor:XML 编纂器
    Abraca:XMMS2 的客户端
    KMess:MSN Messenger for KDE
  • 原文地址:https://www.cnblogs.com/dongteng/p/4965233.html
Copyright © 2011-2022 走看看