我应该在哪里把CSS和Javascript代码放在HTML网页中?

在devise一个网页的时候,我应该把下面的代码放在哪里?

<link rel=stylesheet type="text/css" href="css/layout.css">

我应该把它放在<head>还是放在<body> ? 请澄清以下问题:

  1. 如果我把它放在<head>或者HTML代码的其他地方,它有什么不同?
  2. 如果我有两个CSS(或Javascript)文件呢? 由于我只能在另一个文件之前包含一个文件,Web浏览器将使用哪个文件来显示网页?

在我看来,最好的做法是将CSS文件放在标题中

 <head> <link rel="stylesheet" href="css/layout.css" type="text/css"> </head> 

和closures之前的Javascript文件</body>标记

  <script type="text/javascript" src="script.js"></script> </body> 

另外如果你有,像你说的两个CSS文件。 浏览器将使用两者。 如果有任何select器,即。 .content {}在两个CSS文件中都是相同的,浏览器会覆盖第一个属性与第二个属性的相似属性。 如果这是有道理的。

将样式表放在顶部 链接进行讨论

在研究Yahoo!的性能的同时,我们发现将样式表移动到文档HEAD中会使页面加载更快。 这是因为将样式表放在HEAD中允许页面逐步呈现。

关注性能的前端工程师希望页面逐步加载; 也就是说,我们希望浏览器尽快显示它所拥有的任何内容。 这对于有很多内容的网页和Internet连接速度较慢的用户尤其重要。 进度指标等给用户视觉反馈的重要性已经得到很好的研究和logging。 在我们的例子中,HTML页面是进度指示器! 当浏览器逐渐加载页面时,页眉,导航栏,顶部的标志等都作为等待页面的用户的视觉反馈。 这改善了整体用户体验。

将样式表放在文档底部附近的问题是,它禁止在许多浏览器(包括Internet Explorer)中进行渐进式呈现。 这些浏览器会阻止渲染,以避免在样式更改时重新绘制页面的元素。 用户被困在查看空白页面。

HTML规范明确指出,样式表将包含在页面的HEAD中:“与A不同,[LINK]可能只出现在文档的HEAD部分,尽pipe它可能出现多次。 这两种替代scheme,空白屏幕或无风格内容的闪光都是值得冒险的。 最佳解决scheme是遵循HTML规范,并将样式表加载到文档HEAD中。

把脚本放在底部

脚本造成的问题是阻止并行下载。 HTTP / 1.1规范build议浏览器每个主机名并行下载至less两个组件。 如果您从多个主机名提供图像,则可以同时进行两个以上的下载。 然而,当脚本正在下载时,浏览器将不会启动任何其他下载,即使在不同的主机名上。

在某些情况下,将脚本移动到底部并不容易。 例如,如果脚本使用document.write插入页面内容的一部分,则不能在页面中移动较小的内容。 也可能有范围问题。 在许多情况下,有办法解决这些情况。

经常出现的另一个build议是使用延迟脚本。 DEFER属性指示该脚本不包含document.write,并且是浏览器可以继续呈现的线索。 不幸的是,Firefox不支持DEFER属性。 在Internet Explorer中,脚本可能会被延期,但不会如预期的那么多。 如果一个脚本可以被延期,它也可以被移动到页面的底部。 这将使您的网页加载速度更快。

  1. 您应该将样式表链接和JavaScript <script>放在<head> ,这是由格式规定的。 然而,有些人把javascript <script>放在主体的底部,这样页面内容就不用等待<script>加载了,但是这是一个折衷,因为脚本执行会被延迟,直到其他资源被加载。
  2. CSS的链接顺序优先(反向):先被第二个覆盖,被第三个覆盖等。

你应该把CSS放在<head>因为这是规范说的。

如果您有多个CSS文件,它们将按您将其放入代码的顺序加载。 如果第二个CSS文件中有样式,则会覆盖第一个样式; 这将通过devise发生。 因此, 层叠样式表。

大多数浏览器仍然会有效地渲染CSS文件,但是你的代码在语义上是不正确的。

您可以在文档的任何位置使用JavaScript文件链接。 在<head>和页面的其他地方使用一些有不同的理由。 (例如,谷歌分析代码被指示放在底部。)

包括CSS在内的任何js脚本都应该包括在内。 JavaScript可以去任何地方,但真正的文件的function可以确定的位置。 如果它build立的页面内容把它放在头上。 如果它用于事件或跟踪,可以把它放在</body>

你应该把它放在<head>中。 我通常把样式引用上面的JS和我命令我的JS从上到下,如果他们中的一些依赖于其他人,但我相信所有的引用加载之前页面呈现。

关于<link /><style /> ,你没有select,他们必须<head />部分(见一和二 )。

关于<script />可以出现在<head /><body /> (见三 ),通常最好的做法是将它们放在<head />因为它们不是真正的“内容” “是用户在屏幕上看到的),他们更多的是”内容“上的”作品“。

W3C的HTML4规范 FTW!

如果您有多个.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>