【代码】html5语义化标签说明

2016-10-12 09:41:00 3676 0 编辑:深色多郎 来源:程序开发书籍

在工作上虽然大多数都是移动端的webapp,但是用到的html5语义化标签还是不多,大部分还是以div这个容器为主,今天就来整理一下那些html5新增的容器标签。

1、header,主要包括hgroup和h1-h6,可以是网页的头部,也可以是不同段落的头部。

<header>

    <hgroup>

        <h1>标题</h1>

        <h2>副标题</h2>

    </hgroup>

</header>

2、nav,主要代表页面的导航部分。

<nav>

    <ul>

        <li>temp1</li>

        <li>temp2</li>

        <li>temp3</li>

    </ul>

</nav>

3、section,代表文档中的段,会带标题。

<section>

    <h1>section</h1>

    <article>

        <h2>section使用</h2>

        <p>内容</p>

    </article>

</section>

4、article,代表一个文档或者页面,很容易跟section混淆。通常会带有footer

<article>

    <header>

        <h1>标题</h1>        

    </header>

    <p>内容</p>

    <footer>

        <p>版权</p>

    </footer>

</article>

5、footer,代表网页或section的页脚。

<footer>

    <p>版权信息</p>

</footer>

最后说一下,不要因为有了html5标签就舍弃div,html5标签还是有他不适用的地方,div是没有语义的所以可以用在任何地方。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通