首页技术文章正文

Web前端开发培训之HTML5标签使用的常见误区

更新时间:2016年11月23日14时33分来源:澳门大阳城APP入口web前端开发培训学院浏览次数:

在这篇文章中，我将给大家分享HTML5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。

不要把

当成简单的容器来定义样式

我们经常看到的一个错误，就是武断的将

标签用

标签来替代，特别是将作为包围容器的

用

来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：

My super duper page

复制代码

现在我看到了下面的代码样子：

My super duper page

复制代码

直观的看，上面的例子是错误的：

并不是一个容器。

元素是有语意的区段，帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素（不论是 HTML 或者 XHTML ），通常的做法是直接对标签定义样式就像Kroc Camen描述的那样子，如果你还需要额外的元素来定义样式，使用

, 就像Dr Mike阐述的那样, div并没有灭亡，如果这里没有其它更合适的，div可能是你最合适的选择。
　　
记住这点，这里我们重新修正了上面的例子，通过使用两个新角色。（你是否需要额外的

取决于你的设计。）

My super duper page

复制代码

如果你还是无法确定哪一个元素更适合使用，我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

只在需要的时候使用

和

标签

使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是，经常发现大家在并不需要的地方使用

和标签。你可以跟进我们关于

和的最新进展，下面是我的简单归纳：

元素通常是通常作为一组解释或者导航辅助工具，通常包含section的标题.
元素会将当有副标题\子标题，各类标识文字时，对
到
标题进行群组，将其作为section的标题.

过度使用的

你肯定知道，在一个文档中，可以使用多次

标签，下面就是一种很受大家欢迎的模式:

My best blog post

复制代码

如果你的

标签只包含一个标题元素时，就不要使用

标签了。

标签肯定会让你的标题在文档大纲中显现出来，而且因为

并不包含多重内容(就像定义中描述的那样子)，我们为何要增加而外的代码呢?应该像下面这样简单才可以:

My best blog post

复制代码
不合理使用　

在标题的这个主题上，经常看到使用

的错误案例。在下面这种情况下你不能将

标签和标签一起使用:

这里只有一个标题,
或者本身就够了(比如：不需要)

第一种情形看上去是下面的样子:

My best blog post

by Rich Clark

复制代码
这种情况下，将移除，只保留标题就好.

My best blog post

by Rich Clark

复制代码

第二种情况也是包含了他们并不需要的标签.

My company
Established 1893

复制代码

　　

当

标签的子元素只有的时候，为什么我们还需要一个额外的

?如果没有额外的元素放到

中(比如的兄弟元素)，我们直接将

元素去掉就好。

My company
Established 1893

复制代码
不要将所有的链接列表都放到

标签

在HTML5新增的30个元素中(在我们写这篇文章的时候)，我们在构建更具语义\结构化的标签的时候，我们的选择变得太丰富。也就是说我们对现在给我们提供的这些超级有语义的标签，我们可能会滥用。

就是一个很悲剧的例子。在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

WHATWG HTML spec

复制代码

　　

这里面的关键词是”重要”导航。我们可能会对”重要”有不同的定义，但是我的理解是:

主要导航
网站搜索
二级导航(这个能是有争议的)
页面内链接(比如一篇很长的文章)

虽然并没有对错之分，但根据我的理解和一个民意投票让我觉得在下面这些情形下，我不会使用

标签:

翻页
社交类的链接（虽然有些社交类的链接也是主要的链接，比如关于我About me和品味Flavours ）
博客文章的标签
博客文章的分类列表
第三级导航
大页脚

如果你不能确定是否使用

，那就先对你问一下下面的几个问题：“这是否是一个主要链接？”，你可以根据下面的几个因素来回答你刚才的问题：

如果用
和标题标签能够解决你的问题，那就不要去使用
–Hixie on IRC
你是不是为了增加可访问性而增加的一个快捷跳转链接呢？

如果上面的回答都是“不”，那可能就不适合使用

。　

My company — ，是很难掌握的标签，下面是经常看到的一些小错误。

并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）　
之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有
标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。　

在规范中关于
的解释如下：“某些流内容，可以有标题，自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述，就是它可以被从主内容中移除——比如放到边拦，而对文档流没有影响。　

如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用
.”这张图片需要对上下文的内容作出解释吗？”，如果答案是”否”，那就可能不是
(可能是
)，“我能把它移到附录里面吗？”，如果这两个问题的答案都是”是”，那就可能是
.
　　
你的标志不是一个
　
将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：

My company name

复制代码

　　

这里就不需要说啥了，这是很明显的错误，可能你认为我们说的是不是将logo放在H1标签里面，但是我们在这里并不讨论这个问题。让我们迷惑的是

元素。

标签只用在当有上下文需要说明或者被

包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单，那就不要去这样做，你需要的仅仅是下面的样子。

My company name

复制代码
figure只能用在标签上的误解　　

另一个对