While designing a webpage, where should I put the following code?
在设计网页时，我应该在哪里放置以下代码？
<link rel=stylesheet type="text/css" href="css/layout.css">
Should I put it in the <head> or should I put it in the <body>? Please clarify the following questions:
我应该把它放在中还是应该把它放在中？请澄清以下问题：
- What difference does it make if I put it in
<head>or anywhere else around the HTML code? - 如果我将它放在或HTML代码周围的任何其他地方，会有什么不同？
- What if I am having two CSS (or Javascript) files? Since I can only include one file before another one, which file will be used by the web-browser to display the webpage?
- 如果我有两个CSS（或Javascript）文件怎么办？由于我只能在另一个文件之前包含一个文件，因此Web浏览器将使用哪个文件来显示网页？
9 个解决方案
#1
60
In my opinion the best practice is to place the CSS file in the header
在我看来，最好的做法是将CSS文件放在标题中
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
and the Javascript file before the closing </body> tag
关闭 标记之前的Javascript文件
<script type="text/javascript" src="script.js"></script>
</body>
Also if you have, like you said two CSS files. The browser would use both. If there were any selectors, ie. .content {} that were the same in both CSS files the browser would overwrite the similar properties of the first one with the second one's properties. If that makes sense.
如果你有，就像你说的两个CSS文件一样。浏览器将使用两者。如果有任何选择者，即。 .content {}在两个CSS文件中都相同，浏览器会用第二个属性覆盖第一个类似属性。如果这是有道理的。
#2
15
Put Stylesheets at the Top Links to discussion
将Stylesheets放在顶部链接讨论
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
在研究Yahoo!的性能时，我们发现将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。
Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
关注性能的前端工程师希望页面逐步加载;也就是说，我们希望浏览器尽快显示它拥有的任何内容。这对于具有大量内容的页面和对较慢Internet连接的用户尤其重要。为用户提供视觉反馈（例如进度指示器）的重要性已得到很好的研究和记录。在我们的例子中，HTML页面是进度指示器！当浏览器逐步加载页面时，标题，导航栏，顶部的徽标等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
将样式表放在文档底部附近的问题是它禁止在许多浏览器（包括Internet Explorer）中逐行渲染。这些浏览器会阻止渲染，以避免在样式发生变化时重绘页面元素。用户查看空白页面时卡住了。
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
HTML规范明确指出样式表将包含在页面的HEAD中：“与A不同，[LINK]可能只出现在文档的HEAD部分，尽管它可能会出现任意次。”这些替代品，空白的白色屏幕或无风格内容的闪光都是值得冒险的。最佳解决方案是遵循HTML规范并在文档HEAD中加载样式表。
Put Scripts at the Bottom
把脚本放在底部
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用document.write插入页面内容的一部分，则无法在页面中向下移动。可能还存在范围问题。在许多情况下，有办法解决这些问题。
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
经常出现的另一种建议是使用延迟脚本。 DEFER属性指示脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持DEFER属性。在Internet Explorer中，脚本可能会延迟，但不是所需的。如果可以延迟脚本，也可以将其移动到页面底部。这将使您的网页加载速度更快。
#3
8
- You should put the stylesheet links and javascript
<script>in the<head>, as that is dictated by the formats. However, some put javascript<script>s at the bottom of the body, so that the page content will load without waiting for the<script>, but this is a tradeoff since script execution will be delayed until other resources have loaded. - 您应该将样式表链接和javascript
- CSS takes precedence in the order by which they are linked (in reverse): first overridden by second, overridden by third, etc.
- CSS优先于它们链接的顺序（反向）：首先被第二个覆盖，被第三个覆盖，等等。
#4
4
You should put CSS in the <head> because that's what the specification says do to.
你应该把CSS放在中，因为这就是规范所说的。
If you have more than one CSS file, they will be loaded in the order you put them in the code. If there is style in the second CSS file, it overwrites the style in the first; That will happen by design. Thus, Cascading Style Sheets.
如果您有多个CSS文件，它们将按照您将它们放入代码中的顺序加载。如果第二个CSS文件中有样式，它会覆盖第一个样式;这将通过设计实现。因此，层叠样式表。
Most browser will still effectivly render CSS files out of the head, but your code is not semantically correct.
大多数浏览器仍会有效地渲染CSS文件，但您的代码在语义上并不正确。
You can use JavaScript file links anywhere on the document. There are different reasons to use some in the <head> and some elsewhere on the page. (For example, Google analytic code is instructed to be put at the bottom.)
您可以在文档的任何位置使用JavaScript文件链接。在和页面上的其他地方使用某些内容有不同的原因。 （例如，Google分析代码被指示放在底部。）
#5
4
In my opinion best way is 1) place the CSS file in the header part in between head tag reason is first page show the view for that css require 2)and all js file should place before the body closing tag. reason is after all component display js can apply
在我看来，最好的方法是1）将CSS文件放在标题部分之间的头标记原因是第一页显示该css需要的视图2）并且所有js文件应该放在正文结束标记之前。原因是所有组件显示js都可以应用
#6
2
CSS includes should go in the head before any js script includes. Javascript can go anywhere, but really the function of the file could determine the location. If it builds page content put it on the head. If its used for events or tracking, you can put it before the </body>
CSS包含应该在任何js脚本包含之前进入头部。 Javascript可以去任何地方，但实际上文件的功能可以确定位置。如果它构建页面内容就把它放在头上。如果它用于事件或跟踪，您可以将它放在 之前
#7
1
You should put it in the <head>. I typically put style references above JS and I order my JS from top to bottom if some of them are dependent on others, but I beleive all of the references are loaded before the page is rendered.
你应该把它放在中。我通常把样式引用放在JS上面，如果其中一些依赖于其他的，我从上到下命令我的JS，但我相信所有的引用都是在呈现页面之前加载的。
#8
1
Regarding <link /> and <style />, you don't have a choice, they must be in the <head /> section (see one and two).
关于 和，你没有选择，它们必须在<head />部分（见一和二）。</p>
Regarding <script /> it can appear both in <head /> and <body /> (see three), usually it is best practice to put them in the <head /> since they are not really "content" (where "content" is what the user sees on screen), they are more something which "works on" the "content".
关于，它可以出现在和（见三）中，通常最好将它们放在中，因为它们不是真正的“内容”（其中“内容”） “是用户在屏幕上看到的内容”，它们更像是“在”内容上“工作”。
W3C's HTML4 specification FTW!
W3C的HTML4规范FTW！
#9
0
And if you have more than one .css or .js file to call, just include them one after another, or:
如果您要调用多个.css或.js文件，请将它们一个接一个地包含在内，或者：
<head>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
</head>
#1
60
In my opinion the best practice is to place the CSS file in the header
在我看来，最好的做法是将CSS文件放在标题中
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
and the Javascript file before the closing </body> tag
关闭 标记之前的Javascript文件
<script type="text/javascript" src="script.js"></script>
</body>
Also if you have, like you said two CSS files. The browser would use both. If there were any selectors, ie. .content {} that were the same in both CSS files the browser would overwrite the similar properties of the first one with the second one's properties. If that makes sense.
如果你有，就像你说的两个CSS文件一样。浏览器将使用两者。如果有任何选择者，即。 .content {}在两个CSS文件中都相同，浏览器会用第二个属性覆盖第一个类似属性。如果这是有道理的。
#2
15
Put Stylesheets at the Top Links to discussion
将Stylesheets放在顶部链接讨论
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
在研究Yahoo!的性能时，我们发现将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。
Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
关注性能的前端工程师希望页面逐步加载;也就是说，我们希望浏览器尽快显示它拥有的任何内容。这对于具有大量内容的页面和对较慢Internet连接的用户尤其重要。为用户提供视觉反馈（例如进度指示器）的重要性已得到很好的研究和记录。在我们的例子中，HTML页面是进度指示器！当浏览器逐步加载页面时，标题，导航栏，顶部的徽标等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
将样式表放在文档底部附近的问题是它禁止在许多浏览器（包括Internet Explorer）中逐行渲染。这些浏览器会阻止渲染，以避免在样式发生变化时重绘页面元素。用户查看空白页面时卡住了。
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
HTML规范明确指出样式表将包含在页面的HEAD中：“与A不同，[LINK]可能只出现在文档的HEAD部分，尽管它可能会出现任意次。”这些替代品，空白的白色屏幕或无风格内容的闪光都是值得冒险的。最佳解决方案是遵循HTML规范并在文档HEAD中加载样式表。
Put Scripts at the Bottom
把脚本放在底部
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用document.write插入页面内容的一部分，则无法在页面中向下移动。可能还存在范围问题。在许多情况下，有办法解决这些问题。
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
经常出现的另一种建议是使用延迟脚本。 DEFER属性指示脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持DEFER属性。在Internet Explorer中，脚本可能会延迟，但不是所需的。如果可以延迟脚本，也可以将其移动到页面底部。这将使您的网页加载速度更快。
#3
8
- You should put the stylesheet links and javascript
<script>in the<head>, as that is dictated by the formats. However, some put javascript<script>s at the bottom of the body, so that the page content will load without waiting for the<script>, but this is a tradeoff since script execution will be delayed until other resources have loaded. - 您应该将样式表链接和javascript
- CSS takes precedence in the order by which they are linked (in reverse): first overridden by second, overridden by third, etc.
- CSS优先于它们链接的顺序（反向）：首先被第二个覆盖，被第三个覆盖，等等。
#4
4
You should put CSS in the <head> because that's what the specification says do to.
你应该把CSS放在中，因为这就是规范所说的。
If you have more than one CSS file, they will be loaded in the order you put them in the code. If there is style in the second CSS file, it overwrites the style in the first; That will happen by design. Thus, Cascading Style Sheets.
如果您有多个CSS文件，它们将按照您将它们放入代码中的顺序加载。如果第二个CSS文件中有样式，它会覆盖第一个样式;这将通过设计实现。因此，层叠样式表。
Most browser will still effectivly render CSS files out of the head, but your code is not semantically correct.
大多数浏览器仍会有效地渲染CSS文件，但您的代码在语义上并不正确。
You can use JavaScript file links anywhere on the document. There are different reasons to use some in the <head> and some elsewhere on the page. (For example, Google analytic code is instructed to be put at the bottom.)
您可以在文档的任何位置使用JavaScript文件链接。在和页面上的其他地方使用某些内容有不同的原因。 （例如，Google分析代码被指示放在底部。）
#5
4
In my opinion best way is 1) place the CSS file in the header part in between head tag reason is first page show the view for that css require 2)and all js file should place before the body closing tag. reason is after all component display js can apply
在我看来，最好的方法是1）将CSS文件放在标题部分之间的头标记原因是第一页显示该css需要的视图2）并且所有js文件应该放在正文结束标记之前。原因是所有组件显示js都可以应用
#6
2
CSS includes should go in the head before any js script includes. Javascript can go anywhere, but really the function of the file could determine the location. If it builds page content put it on the head. If its used for events or tracking, you can put it before the </body>
CSS包含应该在任何js脚本包含之前进入头部。 Javascript可以去任何地方，但实际上文件的功能可以确定位置。如果它构建页面内容就把它放在头上。如果它用于事件或跟踪，您可以将它放在 之前
#7
1
You should put it in the <head>. I typically put style references above JS and I order my JS from top to bottom if some of them are dependent on others, but I beleive all of the references are loaded before the page is rendered.
你应该把它放在中。我通常把样式引用放在JS上面，如果其中一些依赖于其他的，我从上到下命令我的JS，但我相信所有的引用都是在呈现页面之前加载的。
#8
1
Regarding <link /> and <style />, you don't have a choice, they must be in the <head /> section (see one and two).
关于 和，你没有选择，它们必须在<head />部分（见一和二）。</p>
Regarding <script /> it can appear both in <head /> and <body /> (see three), usually it is best practice to put them in the <head /> since they are not really "content" (where "content" is what the user sees on screen), they are more something which "works on" the "content".
关于，它可以出现在和（见三）中，通常最好将它们放在中，因为它们不是真正的“内容”（其中“内容”） “是用户在屏幕上看到的内容”，它们更像是“在”内容上“工作”。
W3C's HTML4 specification FTW!
W3C的HTML4规范FTW！
#9
0
And if you have more than one .css or .js file to call, just include them one after another, or:
如果您要调用多个.css或.js文件，请将它们一个接一个地包含在内，或者：
<head>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
</head>