语义化结构的标签
Posted 雪地里的Alan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了语义化结构的标签相关的知识，希望对你有一定的参考价值。
常见语义化结构标签：
1.header：这个标签表示一个节的头部
hgroup:这个标签表示一组标题
footer:这个标签表示一个节的脚注，可以包含作者，版权等信息
nav:这个标签用于导航链接部分
section:这个标签表示一个通用的文档或者应用程序节
article:这个标签表示文档内容的一个独立块，比如博客条目或者报纸上的文章
aside:这个标签表示与也main其他部分略微相关的内容块
各元素介绍：
1、hgroup：元素代表页面或内容块的标题分组
当元素有多个层级时，该元素可以将h1到h6元素放在其内
譬如文章的主标题和副标题的组合
如果只需要一个h2-h6标签就不要用hgroup
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hgroup</title> </head> <body> <hgroup> <h1>王者农药</h1> <h2>2亿人都在王的游戏</h2> </hgroup> <p>qwertyuio asdfghjk zzxcvbnm wertyui</p> </body> </html>
2、header:元素代表页面或内容块的头部标题(页眉)
通常包含h1-h6元素或hgroup
页面中header 元素的个数没有限制，可以拥有多个
可以为每个内容块增加一个header元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>header</title> <style> header{ border: 1px solid #ff0000; margin: 5px; } div{ border: 1px solid #333333; margin: 5px; } </style> </head> <body> <header> 头部信息 </header> <div> <header> <p>页面正文区域</p> </header> <section> <article> <header> <h1>王者荣耀</h1> <h2>游戏</h2> </header> <p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p> </article> <article> <header> <h1>王者荣耀</h1> <h2>游戏</h2> </header> <p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p> </article> </section> </div> </body> </html>
footer：元素代表页面或内容块的底部部分（页脚）
通常含有该节的一些基本信息（譬如：作者，相关文档连接,版权资料等）
如果footer元素包含了整个节，那么他们就代表附录，索引等类似信息footer 没有个数限制，除了包裹的内容不一样，其他跟header类似
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer</title> <style> div{ border: 2px solid #333333; margin: 5px; } footer{ border: 2px solid brown; margin: 5px; } </style> </head> <body> <header>头部信息</header> <div> 页面正文区域 </div> <footer> <div>©;2017</div> </footer> </body> </html>
以上是关于语义化结构的标签的主要内容，如果未能解决你的问题，请参考以下文章