为什么我们对脚本使用<script>而不对外部CSS使用<style>？

76

我的一个亲戚开始学习Web开发时问了我这个问题。

为什么<script src="min.js"></script>和<link rel="stylesheet" href="min.css">？为什么不呢<style href="min.css"></style>？为什么我们使用linktag在页面中添加外部CSS，但是将CSS链接到页面却<style>...</style>在内部编写CSS时使用<head>？

我告诉他这是因为规格。还有更多要给他的信息吗？

— Jitendra Vyas
source

6

您也可以这样做：<style type="text/css">@import url("style.css");</style>。

— 火箭Hazmat

1

@Rocket，但Yslow团队developer.yahoo.com/performance/rules.html#csslink

— Jitendra Vyas

1

他们在IE中

— Jitendra Vyas

3

我只是以为我会指出另一种方法来使事情变得更有趣。

— 火箭Hazmat

6

IE，最好不要使用它。FIFY

— Rocket Hazmat

45

这是历史...巧合吗？您可以推荐他阅读有关diveintohtml5.info的过去的内容，其中有一些有趣的故事，实际上是Web开发人员之间的邮件通信。Web开发人员实际上意味着他们正在开发我们当今所见的Web;）

即<img>标签，我们习惯于：

<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">

可能：

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

要么

<A HREF="..." INCLUDE>See photo</A>

要么

<INCLUDE HREF="...">

但最终开发人员决定继续使用<img>已实施的：

我们目前不准备支持INCLUDE / EMBED。…所以我们可能会继续使用（不是ICON，因为并非所有内联图像都可以有意义地称为图标）。目前，内联图像不会被明确地内容类型化；今后，我们计划对此进行支持（以及MIME的一般改编）。实际上，我们当前使用的图像读取例程会实时计算出图像格式，因此文件扩展名甚至都不重要。

我不知道您问题的直接答案，但我也对<link>标记感到好奇。寻找答案可能包括一些Web档案的挖掘。

— Xaerxess
source

1

我正要写一个类似的答案-可能只是实现问题。一个浏览器以一种方式实现了它，另一个浏览器做了其他事情，最终一个人进入了规范。但是，我真的很想听听那些曾经写过规范的人的信。

— easwee 2011年

1

过去的任何决定都是可以的，但是W3C将来可以更改，例如HTML 5 text/css，text/javascript并且不是必需的。

— Jitendra Vyas

我喜欢这个答案，但这不是头脑中实际问题的答案。也许我们可以让更多的人对此发表评论，以便我们找到实际的答案？

— brainkim

27

至少从W3C的角度来看是有区别的。

甲<style>元件引入的应用于当前文档的CSS规则的块。但是，外部样式表实际上被视为与当前页面相关的整个文档，并且用户代理可以自由地忽略此类文档，具体取决于链接的type和media属性。例如：

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

在这种情况下，用户代理通常只会跟随链接之一，一个链接screen（用于正常渲染）或print一个链接（用于打印）。想法是通过仅下载适当的资源来保留带宽，而不是稍后获取所有内容并过滤媒体类型。

在规范中提到了这一点：

当LINK元素将外部样式表链接到文档时，该 type属性指定样式表语言，而该media 属性指定所需的呈现媒体。用户代理可以通过仅从网络检索适用于当前设备的样式表来节省时间。

— 弗雷德里克·哈米迪（FrédéricHamidi）
source

但是我们也可以在外部CSS文件中定义媒体。这些天来首选保存HTTP请求

— Jitendra Vyas

1

@Jitendra，确实可以，但是随后我们必须下载CSS文件才能检查其媒体类型。将这些信息放在<link>元素中可以使用户代理完全无视资源，而不必先决定加载资源。

— 弗雷德里克·哈米迪

1

@hamidi实现者并不总是遵循规范。

— 2011年

2

但是样式元素还支持media诸如这样的属性，<style type="text/css" media="screen">我们可以有两个样式元素，一个用于media="screen"和另一个用于media="print"。我不明白为什么src样式元素不允许使用属性。

— user31782 '16

2

@ user31782，您可以根据需要向W3C提出请愿，但是这里的人对此无能为力。

— 尖尖的2016年

4

它们的含义基本相同，并且您发现HTML中存在某种不一致之处。原因是这些标准基于不同浏览器的实现。不同的浏览器提供了不同标签中的属性，W3C只是决定保留一些不一致之处，以保持向后兼容性。

使用的元素src：script img iframe input video frame

使用的元素href：a link base

— 彼得·奥尔森
source

7

HTML中没有不一致的地方。src用于替换的元素。这些元素是HTML文档的一部分。While，href用于链接到其他文档。在这里，我们指定外部文档与当前文档的“关系”。

— apnerve'2

2

@FelipeElia：实际上，我认为使用<script>的src属性不是链接，而是替换。无论您使用src还是包括脚本内联页面，页面的行为都将相同（将其视为“替换”）。

— rinogo '19

1

@rinogo是的，您在那里很高兴！现在考虑一下，图像也是如此。尽管我们通常指向其他文件，但我们始终可以将它们嵌入base64中，而href元素则不然。要使用内联CSS，我们必须使用<style>而不是<link>。

— 费利佩·埃里亚

1

我想这可能会解释一些事情：http : //www.w3.org/TR/html4/struct/links.html

— 埃德加
source

1

该<link>标签是用来“链接”等文件到当前的一个，并描述它的关系，或者rel，用它。

您还可以使用<link>将其他内容链接到文档。例如，收藏夹图标：

<link rel="shortcut icon" href="favicon.ico" />

— 火箭危险品
source

3

同意：link可用于链接到许多东西（每种rel类型一个），因此关于接口的真正令人惊讶的一点是，为什么不link按此处的要求将其用于脚本。

— 西罗Santilli郝海东冠状病六四事件法轮功2013年

1

link refvs的可能原因style：

link只能在head允许“元数据内容”的上继续，通常是head，

style无法使用bodyHTML5之前的版本（现在可以使用scoped，但仍然不能使用外部样式）。因此，在link ref和之间进行选择style src是任意的。

script但是，body在HTML5之前的版本中可能已经包含了外部脚本，因此必须有script src。但是由于它必须存在，为什么不也允许它存在head（script已经允许了），又不允许link rel=script避免重复？

— Ciro Santilli郝海东冠状病六四事件法轮功
source

这是一个很好的答案，但是<a>使用href且总是可以将其保存在体内...

— Felipe Elia