是否可以将<link>
放入<head/>
标签中的css文件中,例如在页脚端?
这有什么不好的结果呢?
我问这个,因为实际上我有一个css文件,它没有任何样式,但只为我的网站带来了一些css3动画,所以我想把它放到html的末尾只是为了性能原因...
谢谢
样式表在<head>
中链接,以便浏览器可以设置HTML的样式并按原样呈现它。如果您将样式信息放在文档的底部,则浏览器必须重新设置并再次从顶部呈现整个文档。
首先,需要更长的时间,其次,看起来真的很难看。
这与包含的脚本不同,因为脚本会在完成之前阻止加载,因此您在过程中尽可能晚地加载它们。
根据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
早在2013年,如果您在HTML文档的link
中放置body
标记,则不会使用基于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 Link entry))的MDN文档,您会看到如果link
元素具有itemprop
属性,那么link
可以出现在流量和措辞内容中,因此,在body
中。
这可能是HTML 5.0验证器即使没有itemprop
属性也不发出警告的原因。
itemprop
是微数据规范的一部分,相对较新(read about HTML Microdata),值得一读。
目前,人们可以在link
中的样式表中添加body
,但目前尚不清楚其优点是什么。
这是一个古老的讨论,但我认为值得注意的是,Google Pagespeed Insights实际上现在(2017)推荐deferring the loading of large CSS files until below the fold以确保它们不会阻止加载html。
是的,使用HTML5规范将链接元素放在body元素中是可以的。如果这是一个坏或好主意取决于你的链接。如果渲染您网站的第一个视图并不重要,那么我认为尽可能晚地加载它是个好主意。
WHATWG HTML Standard允许在<link>
身体中使用quite many specified cases。
至于在<link>
之前放置</body>
的“合理性”,最近我用它来预加载画廊中的一些大图像:
<link rel="preload" href="images/big/01.jpg" as="image">
因此,当用户点击缩略图时,通常不需要等待服务器响应,因为图像已经加载到浏览器缓存中。
作为软件开发的一切,事情都会发生变化现在它被认为是身体中的好习惯,例如:
<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>
你必须在任何<!DOCTYPE html>
标签之前放置<link>
。根据经验,它可能会导致某些页面出现故障。