在工作上虽然大多数都是移动端的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是没有语义的所以可以用在任何地方。
深圳 · 龙岗 · 大运软件小镇22栋201
电话:400 182 8580
邮箱:szhulian@qq.com