在设计网页时，我应该把下面的代码放在哪里？
<link rel=stylesheet type="text/css" href="css/layout.css">
我应该把它放在里面<head>还是我应该把它放在里面<body>？请澄清以下问题：
- 如果我把它放在
<head>HTML 代码周围或其他任何地方，会有什么不同？ - 如果我有两个 CSS（或 Javascript）文件怎么办？由于我只能在另一个文件之前包含一个文件，网络浏览器将使用哪个文件来显示网页？
我应该将 CSS 和 Javascript 代码放在 HTML 网页中的什么位置？
IT技术
javascript
html
css
2021-02-02 09:34:38
6个回答
在我看来，最佳做法是将 CSS 文件放在标题中
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
和结束</body>标记前的 Javascript 文件
<script type="text/javascript" src="script.js"></script>
</body>
另外，如果你有，就像你说的两个 CSS 文件。浏览器会同时使用两者。如果有任何选择器，即。.content {}在两个 CSS 文件中相同的浏览器会用第二个的属性覆盖第一个的相似属性。如果这是有道理的。
在 Yahoo! 研究性能时，我们发现将样式表移动到文档 HEAD 会使页面看起来加载速度更快。这是因为将样式表放在 HEAD 中允许页面逐步呈现。
关心性能的前端工程师希望页面逐步加载；也就是说，我们希望浏览器尽快显示它所拥有的任何内容。这对于包含大量内容的页面和 Internet 连接速度较慢的用户尤其重要。向用户提供视觉反馈（例如进度指示器）的重要性已得到充分研究和记录。在我们的例子中，HTML 页面是进度指示器！当浏览器逐步加载页面时，标题、导航栏、顶部的标志等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
将样式表放在文档底部附近的问题在于它禁止在许多浏览器（包括 Internet Explorer）中进行渐进式呈现。这些浏览器会阻止渲染，以避免在样式更改时重新绘制页面元素。用户被困在查看空白页面。
HTML 规范明确指出样式表将包含在页面的 HEAD 中：“与 A 不同，[LINK] 可能只出现在文档的 HEAD 部分，尽管它可能出现多次。” 无论是空白的白屏还是无样式内容的闪烁，这两种选择都不值得冒险。最佳解决方案是遵循 HTML 规范并在文档 HEAD 中加载您的样式表。
将脚本放在底部
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。
经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会被推迟，但不会如您所愿。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。
- 您应该将样式表链接和 javascript
<script>放在 中<head>，因为这是由格式决定的。然而，有些人将 javascript 放在<script>正文的底部，这样页面内容就会加载而无需等待<script>，但这是一种权衡，因为脚本执行将延迟到其他资源加载完毕。 - CSS 以它们链接的顺序（反向）优先：第一个被第二个覆盖，第三个覆盖，等等。
你应该把 CSS 放在里面，<head>因为这就是规范所说的。
如果您有多个 CSS 文件，它们将按照您在代码中的顺序加载。如果第二个 CSS 文件中有样式，则覆盖第一个中的样式；这将是设计使然。因此，级联样式表。
大多数浏览器仍然会有效地渲染 CSS 文件，但是您的代码在语义上是不正确的。
您可以在文档的任何位置使用 JavaScript 文件链接。在页面中使用某些内容<head>和在其他地方使用某些内容的原因各不相同。（例如，谷歌分析代码被指示放在底部。）
CSS 包含应该放在head任何js脚本包含之前。Javascript 可以去任何地方，但实际上文件的功能可以确定位置。如果它构建了页面内容，就把它放在头上。如果它用于事件或跟踪，你可以把它放在</body>
其它你可能感兴趣的问题