最近在Twitter上看到这样一个有趣的话题，为什么现在用的是 <link rel=“stylesheet” href=""> 引入外部共享的样式文件，而不使用 <style src=""> ？详情请点击https://twitter.com/csswizardry/status/1068154542192242688我们都知道，内联的JavaScript是在页面的 <script> … </script> 标签内添加，内联的样式是在 <style> … </style> 标签内添加；而外部共享的JavaScript文件，则是通过 <script src="…"></script> 来引入，共享的样式文件不是通过 <style src=""></style> 的形式引入，而是通过 <link rel=“stylesheet” href="…"> 形式引入，这是为什么呢？既然JavaScript代码片段可以通过 <script src="…"></script> 这样的共享方式引入，那么样式文件就不可以通过类似的形式引入？w3c为什么要这样设计，是不是因为历史的局限性，或者是… 好了，不扯淡了。w3c这样设计是因为JavaScript代码片段的引入和样式文件有本质的不同。一个重要原因是，他们压根没有考虑过要实现 <style src=""></style> 来引入当前文档外部共享的样式文件，他们的想法就是使用 <link rel="…" href="…"> 来引入当前文档外部的资源，如：父文档，翻译，或者层叠样式表等。<link rel="" href="" meidia=""> 元素规定了当前文档和外部资源之间的关系，它常用来引入外部的样式表，我们可以通过rel属性设置为stylesheet来使用。通过<link>的设计原理，我们知道它应该是可以引入scripts的，但是没有定义与JavaScript相关的rel属性值，奇怪的是在HTML 3.2 中，也只是定义了<script>而没有定义属性src ，到了后来不知怎么的就添加这个属性，现在我们通过<script src="…"></script> 来引入外部共享的JavaScript文件，至于具体原因我想下面的内容可能会回答这个问题。注：其中rel 属性它用来表示引入的外部资源和当前文档的关系，href 属性表示引入的外部资源的url，media 属性就是媒体查询，我们可以定义它的值为支持媒体查询的css代码片段，也可以是像print, screen 这样的名词，当然还有其它一些优秀的特性，如：preload，prefetch等。详情可参考MDN link。Bruce Lawson的解释可能会给你打开一些思路，他认为 <foo src=""> 形式的元素，如：<img src=""> 和 <script src=""></script> 它引入的外部文件是被插入当文档中的，而样式表不是，它是关联当前这个文档，它作用于不止一个页面，而<style><style>将样式限制在了一个文档中。更多有趣的前端知识，可关注我的github