介绍
这篇文章主要介绍了HTML5常见的错误用法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
人们在标签使用中最常见到的错误之一就是随意将HTML5的& lt; section>等价于& lt; div> -具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,我们常看到这样的代码:
& lt; !——HTML 4-style代码祝辞& lt; div id=皐rapper"比;
& lt; div id=癶eader"祝辞
& lt; h2>我的超级page
页眉内容& lt;/div>
& lt; div id=癿ain"祝辞
页面内容& lt;/div>
& lt; div id=皊econdary"祝辞
二级内容& lt;/div>
& lt; div id=癴ooter"祝辞
页脚内容& lt;/div> & lt;/div> 而现在在HTML5中,会是这样:
请不要复制这些代码!这是错误的!
& lt;部分id=皐rapper"比;
& lt; header>
& lt; h2>我的超级page
& lt; !——页眉内容比;
& lt;/header>
& lt;部分id=癿ain"祝辞
& lt; !——页面内容比;
& lt;/section>
& lt;部分id=皊econdary"祝辞
& lt; !——二级内容比;
& lt;/section>
& lt; footer>
& lt; !——页脚内容比;
& lt;/footer> & lt;/section> 这样使用并不正确:* *
并不是样式容器。* *部分元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或XHTML者的风格),那么考虑如Kroc卡门所说,直接把样式写到身体元素上吧。如果你仍然需要额外的样式容器,还是继续使用div吧。
基于上述思想,下面才是正确的使用HTML5和一些咏叹调角色特性的例子(注意,根据你自己的设计,你也可能需要加入div)
& lt;部分id=皐rapper"比;
& lt; header>
& lt; h2>我的超级page
& lt; !——页眉内容比;
& lt;/header>
& lt;部分id=癿ain"祝辞
& lt; !——页面内容比;
& lt;/section>
& lt;部分id=皊econdary"祝辞
& lt; !——二级内容比;
& lt;/section>
& lt; footer>
& lt; !——页脚内容比;
& lt;/footer> & lt;/section> 这样使用并不正确:* *
并不是样式容器。* *部分元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或XHTML者的风格),那么考虑如Kroc卡门所说,直接把样式写到身体元素上吧。如果你仍然需要额外的样式容器,还是继续使用div吧。
基于上述思想,下面才是正确的使用HTML5和一些咏叹调角色特性的例子(注意,根据你自己的设计,你也可能需要加入div)
& lt; body> & lt; header>
& lt; h2>我的超级page
& lt; !——页眉内容祝辞& lt;/header> & lt; div=敖巧玬ain"祝辞
& lt; !——页面内容祝辞& lt;/div> & lt;除了角色=癱omplementary"比;
& lt; !——二级内容祝辞& lt;/aside> & lt; footer>
& lt; !页脚内容——祝辞& lt;/footer> & lt;/body> 二,只在需要的时候使用头和hgroup
写不需要写的标签当然是毫无意义的。不幸的是,我经常看到头部和hgroup被无意义的滥用。你可以阅读一下关于头和hgroup元素的两篇文章做一个详细的了解,其中内容我简单总结如下:
头元素表示的是一组介绍性或者导航性质的辅助文字,经常用作部分的头部
当头部有多层结构时,比如有子头部,副标题,各种标识文字等,使用hgroup将h2-h7元素组合起来作为部分的头部
头的滥用
由于头可以在一个文档中使用多次,可能使得这样代码风格受到欢迎:
请不要复制这段代码!此处并不需要头→
& lt; header>
& lt; h2>我最好的博客post
& lt;/header>
& lt; !——文章内容祝辞& lt;/article> 如果你的头元素只包含一个头部元素,那么丢弃头元素吧。既然条元素已经保证了头部会出现在文档概要中,而头又不能包含多个元素(如上文所定义的),那么为什么要写多余的代码。简单点写成这样就行了:
& lt; article>
& lt; h2>我最好的博客post
& lt; !——文章内容祝辞& lt;/article> 的错误使用
在头这个主题上,我也经常看到hgroup的错误使用。有时候不应该同时使用hgroup和标题:
如果只有一个子头部
