Heim  >  Artikel  >  Web-Frontend  >  避免常见的六种HTML5错误用法 (5-6)

避免常见的六种HTML5错误用法 (5-6)

PHP中文网
PHP中文网Original
2016-05-17 09:09:351219Durchsuche

避免常见的六种HTML5错误用法 (5-6)

5.不要使用不必要的type属性

这是个常见的问题,但并不是一个错误,我认为我们应该通过最佳实践来避免这种风格。

在HTML5中,script和style元素不再需要type属性。然而这些很可能会被你的CMS自动加上,所以要移除也不是那么的轻松。但如果你是手工编码或者你完全可以控制你的模板的话,那真的没有什么理由再去包含type属性。所有的浏览器都认为脚本是javascript而样式是css样式,你没必要再多此一举了。

view sourceprint?
1    <!-- 请不要复制这段代码!它太冗余了! -->    
2    <link type="text/css" rel="stylesheet" href="css/styles.css" />     
3    <script type="text/javascript" src="js/scripts" /></script>


其实只需要这样写:

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

甚至指定字符集的代码都可以省略掉。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

6.form属性的错误使用

HTML5引入了一些form的新属性,以下是一些使用上的注意事项:

布尔属性

一些多媒体元素和其他元素也具有布尔属性。这里所说的规则也同样适用。

有一些新的form属性是布尔型的,意味着它们只要出现在标签中,就保证了相应的行为已经设置。这些属性包括:

  • autofocus

  • autocomplete

  • required

坦白的说,我很少看到这样的。以required为例,常见的是下面这种:

1    <!-- 请不要复制这段代码! 这是错的! -->    
2    <input type="email" name="email" required="true" />     
3    <!-- 另一个错误的例子 -->    
4    <input type="email" name="email" required="1" />


严格来说,这并没有大碍。浏览器的HTML解析器只要看到required属性出现在标签中,那么它的功能就会被应用。但是如果你反过来写equired=”false”呢?

1    <!-- 请不要复制这段代码! 这是错的! -->    
2    <input type="email" name="email" required="false" />

解析器仍然会将required属性视为有效并执行相应的行为,尽管你试着告诉它不要去执行了。这显然不是你想要的。

有三种有效的方式去使用布尔属性。(后两种只在xthml中有效)

  • required

  • required=""

  • required="required"

上述例子的正确写法应该是:

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

以上就是避免常见的六种HTML5错误用法 (5-6)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn