首页 > web前端 > html/css/css3 > HTML5文档结构语义:页眉的header和hgroup标签使用
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-09

HTML5文档结构语义:页眉的header和hgroup标签使用

HTML5提供了新的结构元素——例如headerhgroup、article、section、footer、nav等来定义网页,将使网页结构更加简洁严谨,语义更加结构化,而不用迂回通过class或id来为结构命名。

这里就先来了解一下HTML5页眉的header和hgroup标签使用。

header标签在语法规范中包含标题、标题介绍和标题导航。header并不仅仅只能出现在页面顶部作为页眉使用,也可以出现在文档的其他位置。但header不允许嵌套,也不允许出现在地址或者footer元素内。

先来看一个示例

<header>
   <img src="" alt=""/>
   <hgroup>
        <h1>标题</h1>
        <h2>副标题</h2>
   </hgroup>
</header>

在上面的示例中,header由一个作为logo的img元素,以及包含在hgroup元素中的两行标题h1(主标题) 和 h2(副标题)组成。

在以往的常规做法中是直接书写h1和h2标签,并通过位置的先后来决定主标题和副标题;但是在HTML5中不再允许这种写法了,我们用hgroup标签来组织这些元素。hgroup的位置取决于首个标题出现的位置。虽然hgroup中可以出现其它元素,但是为了语义规范,通过只使用h1-h6这些标签。

这里有朋友可能就要问了,现在的浏览器并不完全支持html5,应该怎么处理呢,这个问题主要集中在IE8及以下浏览器,我们可以使用一段代码来实现。

<!--[if lt IE 9]>
   <script>
     document.createElement("<header>");
   </script>
   <style>
   </style>
<!-- [endif]-->

 

 

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*