Question

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

这是不好的结果？

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

感谢

Answer 1

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

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

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

Answer 2

根据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标记，则不会使用validate.w3.org验证基于HTML 4.01的规则。

（您可以在https://validator.nu）

尝试HTML 4.01与HTML 5.0验证

在第一次阅读时，HTML 5.0规范文档似乎暗示link只应出现在文档的head元素中。但是，如果使用HTML 5.0验证程序进行验证，即使流内容中包含link，文档仍然可以正常显示。

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

如果您阅读link条目MDN Link entry)的MDN文档，则会看到如果link元素具有itemprop属性，那么{{1}因此，可以在link。

中显示流量和短语内容

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

itemprop是微数据规范的一部分，相对较新（read about HTML Microdata)，值得一读。

目前，可以在itemprop内的样式表中添加link，但目前尚不清楚其优势是什么。

Answer 3

这是一个陈旧的讨论，但我认为值得注意的是，Google Pagespeed Insights实际上现在（2017年）建议deferring the loading of large CSS files until below the fold确保他们不会阻止加载HTML。< / p>

Answer 4

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

Answer 5

WHATWG HTML Standard允许quite many specified cases中正文中的 <link> 。

关于在<link>之前放置</body>的“合理性”，最近我用它来预览库中的一些大图片：

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

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

Answer 6

在软件开发中，一切都会发生变化。现在，它被认为是体内的最佳实践CSS，例如：

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

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

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

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

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

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

Answer 7

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

HTML＆amp; CSS - 将<link />标记放在

7 个答案:

<强>参考

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