前端：常见的6种HTML5错误用法

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！

一、不要应用section作为div的替代品

前端：常见的6种HTML5缺点用法

人们在标签应用中最常见到的缺点之一就是随便将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到如许的代码：

<!-- HTML 4-style code --><div id="wrapper"> 
    <div id="header"> 
        <h1>My super duper page</h1> 
        Header content  </div> 
    <div id="main"> 
        Page content    </div> 
    <div id="secondary"> 
        Secondary content   </div> 
    <div id="footer"> 
        Footer content  </div></div>

而如今在HTML5中，会是如许：

请不要复制这些代码!这是缺点的!

<section id="wrapper"> 
    <header> 
        <h1>My super duper page</h1> 
        <!-- Header content --> 
    </header> 
    <section id="main"> 
        <!-- Page content --> 
    </section> 
    <section id="secondary"> 
        <!-- Secondary content --> 
    </section> 
    <footer> 
        <!-- Footer content --> 
    </footer></section>

如许应用处不精确：**并不是样式容器。**section元素表示的是内容顶用来赞助构建文档概要的语义部分。它应当包含一个头部。如不雅你想找一个用作页面庞器的元素(就像HTML或者XHTML的风格)，那么推敲如Kroc Camen所说，直接榜样式写到body元素上吧。如不雅你仍然须要额外的样式容器，照样持续应用div吧。

基于上述思惟，下面才是精确的应用HTML5和一些ARIA roles特点的例子(留意，根据你本身的设计，你也可能须要参加div)

<body><header> 
    <h1>My super duper page</h1> 
    <!-- Header content --></header><div role="main"> 
    <!	
			 1/4    1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　人工智能将创建未来银行，推动金融行业变革创新
            沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！
            结论回看汗青，你会发明，金融业是最难实现变革的。但弗成避免的是，大年夜银行和创虻公司在金融业方面仍取>>>详细阅读


本文标题：前端：常见的6种HTML5错误用法
地址：http://www.17bianji.com/lsqh/38080.html
 1/2    1