html - 标签的顺序

Question

<link>or <script>or<meta>标签在中的顺序是否重要<head></head>？

（愚蠢的问题，但直到现在我从未考虑过的事情之一。）

score 42 · Accepted Answer

优化

据雅虎的人说！您应该将 CSS 放在顶部，将脚本放在底部，因为脚本会阻止并行下载。但这主要是优化问题，对于实际工作的页面并不重要。Joeri Sebrechts指出，Cuzillion是一种很好的测试方法，可以让您自己了解速度的提升。

多个样式表

如果您要链接多个样式表，它们链接的顺序可能会影响您的页面样式，具体取决于您的选择器的特殊性。换句话说，如果您有两个样式表以两种不同的方式定义相同的选择器，则后者将优先。例如：

样式表 1：

h1 { color: #f00; }

样式表 2：

h1 { color: #00f; }

在此示例中，h1元素将具有颜色#00f，因为它是最后定义的，具有相同的特性：

多个脚本

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

score 16 · Accepted Answer

16

于 2008-10-10T15:02:14.653 回答

score 11 · Accepted Answer

建议将字符编码的元标记放在尽可能高的位置。如果编码不包含在请求页面的响应标头中（或不同于），浏览器将不得不猜测编码是什么。只有当它找到这个元标记时，它才知道它正在处理什么，并且它必须再次读取它已经解析过的所有内容。

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

score 8 · Accepted Answer

需要注意的重要一点：如果您使用 Internet Explorer 元 X-UA-Compatible 标记来切换 IE 的呈现模式，它必须是 HEAD 中的第一件事：

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

score 5 · Accepted Answer

元无关紧要，但链接（用于css）和脚本很重要。

脚本将阻止大多数浏览器呈现页面，直到加载脚本。因此，如果可能的话，不要把它们放在头上，而是放在身体上。

css 链接不会阻止页面呈现。

score 2 · Accepted Answer

通常建议将<script>标签尽可能放在页面下方（不是在头部，而是在正文中）。

<head>除此之外，我认为这没有太大区别，因为除非您完全加载了该部分，否则无法解析正文。而且，您希望您的<link>标签出现在头部，因为您希望您的样式在浏览器呈现您的页面时出现，而不是在那之后！

score 2 · Accepted Answer

2

如果您在元元素中声明字符集，则应在任何其他元素之前进行。

于 2008-10-10T11:35:36.580 回答

score 2 · Accepted Answer

根本不是一个愚蠢的问题。
CSS 上面的 Script 标签，原因已经提到。

CSS 是按照你放置标签的顺序应用的——样式表越具体，它应该的顺序就越低。

脚本也是如此 - 使用在其他文件中声明的函数的脚本应该在加载依赖项后加载。

score 2 · Accepted Answer

将声明字符集的元标记作为 head 中的第一个元素。到目前为止，浏览器只搜索标签。如果您在元元素之前有太多东西，则可能不会应用字符集。

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

score 1 · Accepted Answer

只有其中一个链接文件（CSS/Javascript）依赖于另一个文件才有意义。在这种情况下，必须首先加载所有依赖项。

例如，假设您正在加载一个 jQuery 插件，那么您需要首先加载 jQuery 本身。当您有一个带有一些规则扩展其他规则的 CSS 文件时也是如此。

score 1 · Accepted Answer

As already pointed out meta describing content charset should be the first otherwise it could actually be a security hole in a certain situation. (sorry i dont remember that situation well enought to describe here but it was demostrated to me at web security training course)

score 1 · Accepted Answer

I recently was having a problem with a draggable jquery ui element. It was behaving properly in Firefox, but not Safari. After a ton of trial and error, the fix was to move my css links above the javascript links in the head. Very odd, but will now become my standard practice.

score 1 · Accepted Answer

For the purposes of validation as XHTML, yes. Otherwise you're probably going to care about the optimization answers.

score 0 · Accepted Answer

不，没关系，除了 CSS 链接或包含，因为 CSS 继承以及它覆盖了已经样式化的事实（对不起我的英语，我认为我的句子不是很清楚:-/）。

html - 标签的顺序

14 回答 14

Related

Reference