HTML & CSS - 将 <link> 标签放在 <head> 之外 [重复]
Posted
技术标签:
【中文标题】HTML & CSS - 将 <link> 标签放在 <head> 之外 [重复]【英文标题】：HTML & CSS - put <link> tag outside of the <head> [duplicate] 【发布时间】：2013-08-25 21:22:20 【问题描述】：是否可以将<link> 放在<head/> 标签之外的css 文件中，例如在页脚一侧？
这有哪些坏的和好的结果？
我问这个，因为实际上我有一个 css 文件，它没有任何样式，只是给我的网站带来了一些 css3 动画，所以出于性能原因，我想把它放在 html 的末尾......
谢谢
【问题讨论】：
【参考方案1】：样式表在<head> 中链接，以便浏览器可以设置 HTML 样式并在运行时呈现它。如果您将样式信息放在文档的底部，浏览器将不得不重新设置样式并再次从顶部呈现整个文档。
首先，这需要更长的时间，其次，看起来很丑。
这与包含的脚本不同，因为脚本会在加载完成之前阻止加载，因此您在此过程中尽可能晚地加载它们。
【讨论】：
你能检查我更新的问题吗，你能不能说明为什么这需要“更长”？ 如果浏览器必须等到到达文档末尾才能应用任何样式信息，它可能必须渲染页面两次 - 因此速度较慢。在你的具体情况下，现在你解释得更清楚了，可能没有性能损失，但如果 CSS 相对较小，也可能没有性能提升。【参考方案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 文档的 body 中放置 link 标记，则使用基于 HTML 4.01 的规则的 validate.w3.org 将无法验证。
（您可以在https://validator.nu 试用 HTML 4.01 与 HTML 5.0 验证）
在初读时，HTML 5.0 规范文档似乎暗示link 应该只出现在文档的head 元素中。但是，如果您使用 HTML 5.0 验证器进行验证，那么即使您在流内容中有 link，文档也会显示正常。
对这种差异的最佳解释可能如下。
如果您阅读了 link 条目的 MDN 文档（MDN Link entry)，您会看到如果 link 元素具有 itemprop 属性，则 link 可以出现在流和短语内容中，因此，在body。
这可能是 HTML 5.0 验证器即使 itemprop 属性不存在也不发出警告的原因。
itemprop 是微数据规范的一部分，相对较新（read about HTML Microdata)，值得一读。
目前，可以将link 添加到body 内的样式表中，但不清楚有什么优势。
【讨论】：
好的，明白了，所以这会导致标准错误验证错误，对吧？ 我没有看到在<head> 之外使用 <link> 的任何验证错误。
HTML5 规范没有提到链接元素只进入头部元素。这是一个谎言。正如马特指出的那样，HTML5 的 w3 验证器也没有任何反对意见。【参考方案3】：
这是一个古老的讨论，但我认为这里值得注意的是，Google Pagespeed Insights 实际上现在（2017 年）推荐 deferring the loading of large CSS files until below the fold 以确保它们不会阻止加载 html。
【讨论】：
嗯，这实际上是一个不好的建议——它可能不会阻止加载 HTML，但会阻止准确呈现 直到加载 CSS - 正如@user1864610 指出的那样，当 CSS 是 已加载 - 这将增加感知的页面加载时间。 建议内联“呈现首屏内容所需的 CSS”。【参考方案4】：是的，在 HTML5 规范中可以在 body 元素中放置一个链接元素。如果这是一个坏主意或好主意取决于您的链接。如果呈现您网站的第一个视图并不重要，那么我认为尽可能晚地加载它是个好主意。
【讨论】：
根据 HTML5 规范第 4.2.4 节，link元素是元数据内容类别的一部分，可以在需要元数据内容的地方使用，即在 head 元素中. （见w3.org/TR/html5/document-metadata.html#the-link-element）。 body 元素包含流内容，根据规范，link 不被视为流内容。根据浏览器行为，可以在body 元素中放置link，但这与说明规范允许这样做不同。
您好 Jonas，我根据您的评论做了一些研究，并更新了我的原始答案（从 2013 年开始）以反映 HTML 5.0 带来的新思想，感谢您的帮助！跨度>
Marc：您可能是对的，但我没有看到“预期元数据内容在哪里”的说法。在任何地方定义。例如，如果您将link 的规范与meta 进行比较，他们明确提到在某些情况下meta 只能在head 内部使用。【参考方案5】：
WHATWG HTML 标准允许 <link> 在 quite many specified cases 的正文中。
关于将<link>放在</body>之前的“合理性”，最近我用它来预加载画廊中的一些大图：
<link rel="preload" href="images/big/01.jpg" as="image">
所以当用户点击缩略图时，通常不需要等待服务器响应，因为图像已经加载到浏览器缓存中。
【讨论】：
【参考方案6】：您必须将<!DOCTYPE html> 放在任何<link> 标记之前。根据经验，它可能会导致某些页面出现故障。
【讨论】：
您能进一步解释一下吗？为什么这是必要的？是什么让您认为 OP 没有这样做？【参考方案7】：随着软件开发中的一切，事情发生了变化。现在它被认为是正文中的良好实践 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/
【讨论】：
我试图找到更多这种用法的例子。用 HTTP/2 这样做对我来说很有意义，但我没有发现很多人在谈论它。以上是关于HTML & CSS - 将 <link> 标签放在 <head> 之外 [重复]的主要内容，如果未能解决你的问题，请参考以下文章