HTML和CSS - 放 外面的标签

问题描述 投票:24回答:7

是否可以将<link>放入<head/>标签中的css文件中,例如在页脚端?

这有什么不好的结果呢?

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

谢谢

html css performance hyperlink head
7个回答
22
投票

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

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

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


17
投票

根据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应该只出现在文档的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,但目前尚不清楚其优点是什么。


3
投票

这是一个古老的讨论,但我认为值得注意的是,Google Pagespeed Insights实际上现在(2017)推荐deferring the loading of large CSS files until below the fold以确保它们不会阻止加载html。


2
投票

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


0
投票

WHATWG HTML Standard允许在<link>身体中使用quite many specified cases

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

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

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


0
投票

作为软件开发的一切,事情都会发生变化现在它被认为是身体中的好习惯,例如:

<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/


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.