<head></head>中标签的顺序

Question

<head></head>中标签的顺序

htmlxhtml

49

在<head></head>标签中，<link>、<script>和<meta>标签的排列顺序是否重要？

(这是一个愚蠢的问题，但是直到现在我才开始考虑这些事情。)

- Pickledegg

14个回答

16

接受的答案在文档编码方面有点错误，这取决于文档的编码方式。如果HTTP头部没有发送编码信息，则浏览器必须从文档本身确定编码。

如果文档使用<meta http-equiv="Content-Type" …声明其编码方式，则在此语句之前出现的任何ASCII值字符（字符代码< 128）必须是ASCII值，根据HTML 4规范。因此，重要的是此meta声明出现在可能包含非ASCII字符的任何其他元素之前。

- Konrad Rudolph

11

建议尽可能将字符编码的元标记放置在最高处。如果请求页面的响应头中未包含或与之不同的编码，则浏览器将必须猜测编码方式。只有找到这个元标记，它才知道正在处理什么，它将不得不重新读取已解析的所有内容。

例如，请参见指示字符集的方法。

- Bno

8

需要注意的重要一点是：如果你使用了Internet Explorer中的meta X-UA-Compatible标签来切换IE的呈现模式，它需要位于HEAD中的第一行:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>页面标题</title>
  ...等等
</head>

- Keith Williams

5

标签不重要，但（用于CSS）和

- yuku

2

通常建议将<script>标签放在页面尽可能靠下的位置(不要放在头部，而是放在正文中)。除此之外，我认为这并没有太大的区别，因为正文无法解析，除非你完全加载了<head>部分。而且，你希望你的<link>标签在头部，因为你希望浏览器在呈现页面之前对其进行样式设置！

- Adhip Gupta

2

如果您在 meta 元素中声明字符集，应该在任何其他元素之前这样做。

- olavk

2

这并不是一个愚蠢的问题。
如前所述，CSS应该放在Script标签之上。

CSS的应用顺序取决于你放置标签的顺序 - 样式表越具体，则越应该靠下。

同样适用于脚本 - 使用在其他文件中声明的函数的脚本应在依赖项加载后加载。

- Raithlin

2

将声明字符集的meta标签作为head中的第一个元素。浏览器只会查找标记到一定程度，如果在meta元素之前有太多的内容，则字符集可能不会被应用。

如果使用BASE元素，请将其放置在加载URI的任何元素之前（如果需要）。

- Shadow2531

1

只有在链接的文件（CSS / Javascript）之一依赖于另一个文件时，才会产生影响。在这种情况下，必须首先加载所有依赖项。

例如，假设您正在加载jQuery插件，则需要首先加载jQuery本身。同样，当您拥有具有扩展其他规则的某些规则的CSS文件时也是如此。

- davidg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe Lencioni · Accepted Answer

优化

根据雅虎的人所说，你应该将CSS放在顶部, 将脚本放在底部，因为脚本会阻止并行下载。但这主要是一种优化方式，对于页面实际运行并不关键。Joeri Sebrechts指出，Cuzillion是测试这一点并查看自己的速度改进的好方法。

多个样式表

如果您链接多个样式表，它们链接的顺序可能会影响您的页面样式，具体取决于您选择器的特异性。换句话说，如果您有两个定义同一个选择器的样式表，那么后者将具有优先权。例如：

样式表1：

h1 { color: #f00; }

样式表 2：

h1 { color: #00f; }

在这个例子中，h1元素将具有颜色#00f，因为它是最后使用相同特异性进行定义的：

多个脚本

如果您正在使用多个脚本，则它们被使用的顺序可能很重要，如果其中一个脚本依赖于另一个脚本中的某些内容，则情况就是如此。在这种情况下，如果脚本以错误的顺序链接，一些脚本可能会抛出错误或无法按预期工作。然而，这高度取决于您使用的脚本是什么。