定义化标签之文档元素1

最新推荐文章于 2021-11-23 23:07:26 发布

weixin_34367257

最新推荐文章于 2021-11-23 23:07:26 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/dongteng/blog/684459

2019独角兽企业重金招聘Python工程师标准>>>

在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>