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

Question

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

Sum*_*pta 58 html javascript css css3

在设计网页时,我应该在哪里放置以下代码？

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

我应该把它放入<head>或者我应该把它放入<body>？请澄清以下问题:

如果我把它放在<head>HTML代码周围或其他任何地方,会有什么不同？
如果我有两个CSS(或Javascript)文件怎么办？由于我只能在另一个文件之前包含一个文件,因此网络浏览器将使用哪个文件来显示网页？

Answer 1

bre*_*njt 74

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

顶部"<link>"的原因是浏览器必须重新布局布局,因为当用户尝试与页面交互时,CSS文件加载(如果它们不在"<head>"中)移动元素.对于最后的`<script>`文件,浏览器必须(在大多数情况下)阻止处理HTML文件,同时加载JavaScript文件并运行以防它在Write()调用中进行(你不应再这样做了)这些日子); 如果`<script>`标签在最后,浏览器在处理JavaScript时仍然可以显示`<script>'标签上方的所有HTML. (15认同)
关于`<link />`和`<style />`：您只能将它们放置在`<head />`中，不允许它们进入主体。 (2认同)

Answer 2

Joe*_*Joe 20

将Stylesheets放在顶部 链接讨论

在研究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中,脚本可能会延迟,但不是所需的.如果可以延迟脚本,也可以将其移动到页面底部.这将使您的网页加载速度更快.

您应该包含链接中的内容,以便答案可以自我维持 (5认同)

Answer 3

she*_*mer 8

您应该将样式表链接和javascript <script>放在<head>格式中,这取决于格式.但是,有些人将javascript放在<script>正文的底部,这样页面内容就会加载而不等待<script>,但这是一个权衡,因为脚本执行将被延迟,直到其他资源加载完毕.
CSS优先按照它们链接的顺序(反向):首先被第二个覆盖,被第三个覆盖,等等.

在第1点中,为什么将JavaScript放在身体的底部不赞成？ (3认同)

Answer 4

Mic*_*yen 5

您应该将CSS放入其中,<head>因为这是规范所说的.

如果您有多个CSS文件,它们将按照您将它们放入代码中的顺序加载.如果第二个CSS文件中有样式,它会覆盖第一个样式; 这将通过设计实现.因此,层叠样式表.

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

您可以在文档的任何位置使用JavaScript文件链接.<head>在页面的其他地方使用某些内容有不同的原因.(例如,Google分析代码被指示放在底部.)

归档时间：	14 年，2 月前
查看次数：	94299 次
最近记录：	7 年，1 月前