html5中常见的6中错误用法： 一、不要使用section作为div的替代品 （学习视频分享：html视频教程） 人们在标签使用中最常见到的错误之一就是随意将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吧。 <body><header> <h1>My super duper page</h1> <!-- Header content --></header><div role="main"> <!-- Page content --></div><aside role="complementary"> <!-- Secondary content --></aside><footer> <!-- Footer content --></footer></body> 如果你还是无法确定使用哪种元素，那么我建议你参考HTML5 sectioning content element flowchart 二、只在需要的时候使用header和hgroup 写不需要写的标签当然是毫无意义的。不幸的是，我经常看到header和hgroup被无意义的滥用。你可以阅读一下关于header和hgroup元素的两篇文章做一个详细的了解，其中内容我简单总结如下： header元素表示的是一组介绍性或者导航性质的辅助文字，经常用作section的头部当头部有多层结构时，比如有子头部，副标题，各种标识文字等，使用hgroup将h1-h6元素组合起来作为section的头部 由于header可以在一个文档中使用多次，可能使得这样代码风格受到欢迎： <header> <h1>My best blog post</h1> </header> <!-- Article content --></article> 如果你的header元素只包含一个头部元素，那么丢弃header元素吧。既然article元素已经保证了头部会出现在文档概要中，而header又不能包含多个元素（如上文所定义的），那么为什么要写多余的代码。简单点写成这样就行了： <article> <h1>My best blog post</h1> <!-- Article content --></article> 的错误使用 如果只有一个子头部如果hgroup自己就能工作的很好。。。这不废话么 <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header> 此例中，直接拿掉hgroup，让heading果奔吧。 <header> <h1>My best blog post</h1> <p>by Rich Clark</p></header> 第二个问题是另一个不必要的例子： <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup></header> 如果header唯一的子元素是hgroup，那还要header干神马？如果header中没有其他的元素（比如多个hgroup），还是直接拿掉header吧。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！） <hgroup> <h1>My company</h1> <h2>Established 1893</h2></hgroup> 三、不要把所有列表式的链接放在nav里 随着HTML5引入了30个新元素（截止到原文发布时），我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说，我们不应该滥用超语义化的元素。不幸的是，nav就是这样一个被滥用的例子。nav元素的规范描述如下：
四、figure元素的常见错误 figure以及figcaption的正确使用，确实是难以驾驭。让我们来看看一些常见的错误， 。其他视情况而定，但一开始可以问自己：“这个图片是否必须和上下文有关？”如果不是，那可能也不是（也许是个）。继续：“我可以把它移动到附录中吗？”如果两个问题都符合，则它可能是 。 <!-- 请不要复制这段代码!这是错的 --><header> <h1> <figure>  </figure> My company name </h1></header> <!-- 请不要复制这段代码!这也是错的 --><header> <figure>  </figure></header> 另一个常见的关于figure的误解是它只被图片使用。figure可以是视频，音频，图表，一段引用文字，表格，一段代码，一段散文，以及任何它们或者其他的组合。不要把figure局限于图片。web标准的职责是精确的用标签描述内容。 五、不要使用不必要的type属性 这是个常见的问题，但并不是一个错误，我认为我们应该通过最佳实践来避免这种风格。 <!-- 请不要复制这段代码!它太冗余了! --><link type="text/css" rel="stylesheet" href="css/styles.css" /><script type="text/javascript" src="js/scripts" /></script> 其实只需要这样写： <link rel="stylesheet" href="css/styles.css" /><script src="js/scripts" /></script> 甚至指定字符集的代码都可以省略掉。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。 六、form属性的错误使用 HTML5引入了一些form的新属性，以下是一些使用上的注意事项：
坦白的说，我很少看到这样的。以required为例，常见的是下面这种： <!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!-- 另一个错误的例子 --><input type="email" name="email" required="1" /> 严格来说，这并没有大碍。浏览器的HTML解析器只要看到required属性出现在标签中，那么它的功能就会被应用。但是如果你反过来写equired=”false”呢？ <!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="false" /> 解析器仍然会将required属性视为有效并执行相应的行为，尽管你试着告诉它不要去执行了。这显然不是你想要的。
上述例子的正确写法应该是: <input type="email" name="email" required /> |
免责声明：本站部分文章和图片均来自用户投稿和网络收集，旨在传播知识，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系我们及时修正或删除。谢谢！
始终以前瞻性的眼光聚焦站长、创业、互联网等领域，为您提供最新最全的互联网资讯，帮助站长转型升级，为互联网创业者提供更加优质的创业信息和品牌营销服务，与站长一起进步！让互联网创业者不再孤独！
扫一扫，关注站长网微信
大家都在看
