技术开发 频道

盘点 HTML5标签使用的常见误区

  figure只能用在标签上的误解

  另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在<vedio><audio> , 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。

  这里有一篇更深入讲解<figure>的文章I wrote about <figure>,很值得阅读的。

  不要去使用那些不必要的type属性

  这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。

  HTML5中,我们并不需要给<script><script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript<css>标签是CSS,你不再需要那个type属性了:

1 <!-- Don’t copy this code! It’s attribute overload! -->  
2
<link type="text/css" rel="stylesheet" href="css/styles.css" />  
3
<script type="text/javascript

   现在我们可以写成下面的样子:

1 <link rel="stylesheet" href="css/styles.css" />  
2
<script src="js/scripts.js"></script>

   你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

  不要包含错误的表单属性

  你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

  布尔值属性

  新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:autofocus、autocomplete、required

  坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:

1 <!-- Don’t copy this code! It’s wrong! -->  
2
<input type="email" name="email" required="true" />  
3
<!-- Another bad example -->  
4
<input type="email" name="email" required="1" />

   基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?

1 <!-- Don’t copy this code! It’s wrong! -->  
2
<input type="email" name="email" required="false" />

         解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。

  这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)

  我们上面的例子可以写成下面的样子:

1 <input type="email" name="email" required />

   总结

  对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。

  英文原文阅读:Avoiding common HTML5 mistakes

0
相关文章