30

是否可以将<link>css 文件放在<head/>标签之外，例如在页脚侧？

哪些是坏的和好的结果？

我问这个，因为实际上我有一个 css 文件，它没有任何样式，只是为我的网站带来了一些 css3 动画，所以出于性能原因，我想把它放在 html 的末尾......

谢谢

4

7 回答 7

31

样式表在 中链接，<head>以便浏览器可以设置 HTML 的样式并在运行时呈现它。如果您将样式信息放在文档的底部，浏览器将不得不重新设置样式并再次从顶部呈现整个文档。

首先，这需要更长的时间，其次，看起来真的很难看。

这与包含的脚本不同，因为脚本将阻止加载，直到它们完成，因此您在此过程中尽可能晚地加载它们。

于 2013-08-22T23:40:43.910 回答
20

根据 W3 规范，<link>标签只应该放在以下<head>部分：

参考

对于 HTML 4.01： http ://www.w3.org/TR/html401/struct/links.html#edef-LINK

对于 HTML5： http ://www.w3.org/TR/html5/document-metadata.html#the-link-element

验证问题：2017 年 10 月 27 日更新

早在 2013 年，如果您在 HTML 文档中放置一个link标签body，它就不会使用基于 HTML 4.01 的规则的validate.w3.org 进行验证。

（您可以在https://validator.nu试用 HTML 4.01 与 HTML 5.0 验证）

初读时，HTML 5.0 规范文档似乎暗示link's 应该只出现在head文档的元素中。但是，如果您使用 HTML 5.0 验证器进行验证，那么即使您link在流内容中有一个文档，文档也会显示正常。

对这种差异的最佳解释可能如下。

如果您阅读该条目的 MDN 文档link（MDN 链接条目），您会看到如果link元素具有itemprop属性，则link可以出现在流和短语内容中，因此，在body.

这可能是 HTML 5.0 验证器即使该itemprop属性不存在也不发出警告的原因。

它itemprop是微数据规范的一部分，相对较新（阅读 HTML 微数据），值得一读。

目前，可以在link中添加一个样式表body，但不清楚有什么优势。

于 2013-08-22T23:41:03.313 回答
3

这是一个古老的讨论，但我认为在这里值得注意的是，Google Pagespeed Insights 实际上现在（2017 年）建议将大型 CSS 文件的加载推迟到首屏以下，以确保它们不会阻止 html 的加载。

于 2017-03-29T23:38:35.540 回答
2

是的，HTML5 规范可以在 body 元素中放置一个链接元素。如果这是一个坏主意或好主意取决于您的链接。如果呈现您网站的第一个视图并不重要，那么我认为尽可能晚地加载它是一个好主意。

于 2017-10-27T13:23:11.030 回答
2

WHATWG HTML Standard 允许<link>在相当多的特定情况下在正文中。

至于放在<link>之前的“合理性” </body>，最近我用它来预加载画廊中的一些大图：

<link rel="preload" href="images/big/01.jpg" as="image">

因此，当用户单击缩略图时，通常无需等待服务器响应，因为图像已经加载到浏览器缓存中。

于 2018-05-02T19:32:40.723 回答
1

您必须<!DOCTYPE html>在任何<link>标签之前放置。根据经验，它可能会导致某些页面出现故障。

于 2019-03-21T15:51:49.430 回答
0

随着软件开发中的一切，事情发生了变化。现在它被认为是正文中的良好实践 CSS，例如：

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…&lt;/header>

  <link rel="stylesheet" href="/article.css">
  <main>…&lt;/main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…&lt;/section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…&lt;/section>

  <link rel="stylesheet" href="/site-footer.css">
  <footer>…&lt;/footer>
</body>

来源：https ://jakearchibald.com/2016/link-in-body/

于 2018-07-31T21:16:48.307 回答