HTML5技术

HTML5制作网页中常见的页面错误误区_HTML教程(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-17 16:22 我要评论( )

这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是figure元素。figure标签只用在当有上下文需要说明或者被section包围的时候

这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。

1 <header>

2 <h1>My company name</h1>

3 <!-- More stuff in here -->

4 </header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<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" src="js/scripts.js"></script>

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

1 <link rel="stylesheet" href="css/styles.css" />

2 <script src="js/scripts.js"></script>

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

不要包含错误的表单属性

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

布尔值属性

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

坦白的说,下面的这种情况对我来说并不常见,但我们从 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 />

总结

我不能将所有的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评