HTML & CSS - 将 <link> 标签放在 <head> 之外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18392418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML & CSS - put <link> tag outside of the <head>
提问by itsme
Is it ok to put the <link>to a css file out of the <head/>tag, for example in the footer side?
是否可以将<link>css 文件放在<head/>标签之外，例如在页脚一侧？
Which are bad and good results of this?
这有哪些不好和好的结果？
I ask this, cause actually i have a css file which doesn't styles anything but brings just some css3 animations to my website, so i would like to put it to the end of the html just for performance reason...
我问这个，因为实际上我有一个 css 文件，它没有任何样式，只是给我的网站带来了一些 css3 动画，所以我想把它放在 html 的末尾，只是出于性能原因......
thanks
谢谢
采纳答案by itsme
Style sheets are linked in the <head>so that the browser can style the HTML and render it as it goes. If you put the style information at the bottom of the document the browser will have to restyle and render the whole document from the top again.
样式表在 中链接，<head>以便浏览器可以设置 HTML 的样式并随其呈现。如果您将样式信息放在文档底部，浏览器将不得不重新设置样式并再次从顶部渲染整个文档。
This firstly, takes longer, and secondly, looks really ugly.
这首先，需要更长的时间，其次，看起来真的很丑。
This differs from included scripts as scripts will block loading until they are done, so you load them as late as possible in the process.
这与包含的脚本不同，因为脚本会在加载完成之前阻止加载，因此您在该过程中尽可能晚地加载它们。
回答by Marc Audet
According to the W3 specs, <link>tags are only supposed to go in the <head>section:
根据 W3 规范，<link>标签只应该出现在以下<head>部分：
References
参考
For HTML 4.01:http://www.w3.org/TR/html401/struct/links.html#edef-LINK
对于 HTML 4.01：http : //www.w3.org/TR/html401/struct/links.html#edef-LINK
For HTML5:http://www.w3.org/TR/html5/document-metadata.html#the-link-element
对于 HTML5：http : //www.w3.org/TR/html5/document-metadata.html#the-link-element
Validation Issues: Updated October 27, 2017
验证问题：2017 年 10 月 27 日更新
Back in 2013, if you put a linktag within the bodyof the HTML document, it would not validate using validate.w3.orgwith rules based on HTML 4.01.
早在 2013 年，如果您在 HTML 文档的 中放置一个link标签body，它就不会使用基于 HTML 4.01 的规则使用validate.w3.org进行验证。
(You can try out HTML 4.01 versus HTML 5.0 validation at https://validator.nu)
（您可以在https://validator.nu尝试 HTML 4.01 与 HTML 5.0 验证）
On a first reading, the HTML 5.0 specification document seems to imply that link's should appear only in the headelement of the document. However, if you validate using a HTML 5.0 validator, then the documents appears okay even if you have a linkin the flow content.
初读时，HTML 5.0 规范文档似乎暗示link's 应该只出现在head文档的元素中。但是，如果您使用 HTML 5.0 验证器进行验证，那么即使您link在流内容中有 ，文档看起来也没有问题。
The best explanation for this discrepancy may be as follows.
这种差异的最佳解释可能如下。
If you read the MDN documentation for the linkentry (MDN Link entry), you see that if the linkelement has an itempropattribute, then the linkcan appear in flow and phrasing content, thus, in the body.
如果您阅读link条目（MDN 链接条目）的 MDN 文档，您会看到如果link元素具有itemprop属性，则link可以出现在流和短语内容中，因此，在body.
This may be the reason why HTML 5.0 validators do not issue a warning even if the itempropattribute is not present.
这可能是即使该itemprop属性不存在HTML 5.0 验证器也不会发出警告的原因。
The itempropis part of the microdata specification and is relatively new (read about HTML Microdata)and it is worth reading.
这itemprop是微数据规范的一部分，相对较新（阅读 HTML 微数据），值得一读。
For the moment, one could add a linkto a stylesheet within the body, but it is not clear what the advantages are.
目前，可以在link中的样式表中添加body，但尚不清楚其优点是什么。
回答by daamsie
This is an old discussion, but I think it's worth noting in here that Google Pagespeed Insights actually now (2017) recommends deferring the loading of large CSS files until below the foldto ensure they don't block loading of html.
这是一个古老的讨论，但我认为这里值得注意的是，Google Pagespeed Insights 实际上现在（2017 年）建议将大型 CSS 文件的加载推迟到折叠以下，以确保它们不会阻止 html 的加载。
回答by Jonas ?ppelgran
Yes, it's okay with HTML5 specifications to put a link element inside the body element. If it's a bad or good idea depends on what your linking. If it's not crucial to render the first view of your site then I'd consider it a good idea to load it as late as possible.
是的，HTML5 规范可以在 body 元素中放置一个链接元素。这是一个坏主意还是好主意取决于您的链接。如果呈现网站的第一个视图并不重要，那么我认为尽可能晚地加载它是个好主意。
回答by Konstantin Smolyanin
WHATWG HTML Standard allows <link>in the body in quite many specified cases.
WHATWG HTML 标准允许<link>在很多特定情况下在正文中使用。
As for "reasonableness" of placing <link>before the </body>, recently I've used it for preloading some big images in gallery:
至于放置<link>在 之前的“合理性” </body>，最近我用它来预加载画廊中的一些大图像：
<link rel="preload" href="images/big/01.jpg" as="image">
So when user clicked on the thumbnail usually there was no need to wait for server response because image was already loaded into browser cache.
所以当用户点击缩略图时，通常不需要等待服务器响应，因为图像已经加载到浏览器缓存中。
回答by Johann Echavarria
As everything in software development, things change. Now it's considered good practice CSS in the body, something like:
随着软件开发中的一切，事情发生了变化。现在它被认为是正文中的良好实践 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>
回答by Nathan
You must put <!DOCTYPE html>before any <link>tags. From experience, it can cause some pages to malfunction.
您必须放在<!DOCTYPE html>任何<link>标签之前。根据经验，它可能会导致某些页面出现故障。
