html5新标签main用法

<main>标签是html5的新标签,详细用法参考:http://w3c.github.io/html/grouping-content.html#the-main-element

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的子元素:<article>、<aside>、<footer>、<header> 或 <nav>。

 

在下面的例子中,我们看到两篇(<article>)关于滑板的文章(网页的主题),主题内容通过使用主要元素<main>来标识。

 


案例

下面示例中,页眉<header>和页脚<footer>都位于主元素<main>之外,因为它们对于网站来说是通用的,而不是针对main的内容。

 


案例:

下边的案例中,相同的通用页眉和页脚元素保持在main之外,但是在main元素中有一个额外的header元素,因为它的内容与main内的内容相关,因为它包含相关的标题和页内导航。 页内导航在页脚内重复,页脚再次位于主元素内。

 

案例一:

下边的例子中,aside元素出现在main标签之外,因为aside内容和main元素中的内容没有多少关系,所以把aside放在main之外。


案例二

下边的例子中,aside和main中的元素内容相关,所以我们把aside放到mian中。

 

Views: 74 Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注