logo标签列表

在<head>标签中，哪个应该先出现：<meta>还是<title>？

htmltitlemeta-tags
51

在标签中，meta和title哪一个应该放在前面？

我看到了这个：

这个[meta]标签应该放在HEAD部分的最前面，因为服务器将处理文本并将其视为ASCII格式，而不会考虑只有在分析标签后才会知道的特定格式。

http://www.xul.fr/en/html5/html.php

HTML标准是否规定了顺序？

两者的顺序是否存在缺点？

没关系，但我通常会先放置<meta>。 - Seth
5个回答
50

正如其他答案已经指出的那样，通常情况下这并不重要。以下是更多关于何时重要以及原因的信息。

首先，由于您问及标准，您可能想知道您引用的文本来自HTML 4的W3C建议：

http://www.w3.org/TR/html4/charset.html#h-5.2.2

在HTML 5草稿标准中也有类似的讨论：

http://dev.w3.org/html5/markup/syntax.html#encoding-declaration

这里潜在的问题是，浏览器必须使用一些字符集编码来开始处理从服务器接收到的文档。那么，如果它开始使用一个字符集，然后<meta>标签告诉它使用其他内容会发生什么？答案是：这取决于...

服务器应在HTTP响应头的Content-Type字段中指定字符集。如果这样做了，则浏览器应使用该字符集并忽略在所提供的文档中可能指定的任何字符集。

不幸的是，许多服务器没有提供此信息。在这种情况下，浏览器必须假设一些内容以开始处理。这些内容必须是“ASCII兼容的”，这意味着它对于ASCII范围内的任何字符都与ASCII一致。如果文档中指定了字符集，则浏览器将开始使用该字符集。因此，如果您的标题出现在此之前，则已经将其解释为ASCII，这可能是错误的，具体取决于标题中有什么内容。

总结一下：如果服务器没有指定编码方式，而标题的编码不是 ASCII，那么您需要放置首先指定字符集的 <meta> 标签。否则，这并不重要。因此，为了安全起见，最好先放置字符集的 <meta> 标签。
12

标签的顺序几乎完全不重要。

这句话是在谈论<meta http-equiv="content-type">标签。
如果您使用该标签，应该将其放在第一位，这样浏览器就知道使用哪种编码来解析文档的其余部分。

只要在它之前没有任何非ASCII字符，其位置就无关紧要。

2
请注意，如果服务器已经指定了 content-type，则忽略 content-type。我提供的答案更加详细。+1 - Joel Lee
尽管你是第一个回答我的问题的人，但Joel提供了更详细的答案。我希望我能将每个人的回答合并成一个，并选择其中的最佳答案。谢谢大家！ - XP1
8

除非你要处理IE并且想使用X-UA-COMPATIBLE，否则这没有什么关系。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

如果要由IE评估，这应该是头部中的第一个元素... (否则它会忽略它)

2
在大多数情况下，这并不重要。通常我会把<title>放在最前面，但完全取决于您的个人喜好。
1

@Gaby aka G. Petrioli -

很长一段时间，我也认为“X-UA-Compatible”元标记需要放在第一位，否则IE会忽略它。需要注意的是<title>标记可以放在第一位。 此外，在IE兼容性meta标记之前不能有其他类型的标记（<link>或<script>）。

请参见https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx并注意：

X-UA-Compatible头不区分大小写；但是，它必须出现在网页的头部（HEAD部分）中，除了标题元素和其他meta元素之外的所有其他元素之前。

因此，为了与原帖问题保持主题，再次强调，无论meta标签还是标题标签先出现都无所谓。唯一需要注意的是字符集meta标签（如Joel Lee在上面的答案中指出的那样）。

我想补充一点的是，一个良好的实践方法是将字符集meta标签放在<head>的第一位，紧随其后的是IE兼容性meta标签，然后是<title>。就像这样：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>Cool Page</title>

任何其他存在于<head>中的标签都可以跟在<title>后面。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接