Javascript 为什么我们用 <script> 表示脚本,而不用 <style> 表示外部 CSS?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7122492/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:56:03  来源:igfitidea点击:

Why do we use <script> for scripts, but not <style> for external CSS?

javascriptcsshtmlw3c

提问by Jitendra Vyas

A relative of mine who started to learn Web Development asked me this question.

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

Why <script src="min.js"></script>and <link rel="stylesheet" href="min.css">? Why not <style href="min.css"></style>. Why do we use linktag to add external CSS in the page but when we link CSS to page but we use <style>...</style>when we write CSS inside <head>?

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

I told him that it's because of spec. Is there any more info to give to him?

我告诉他这是因为规格。有没有更多的信息可以提供给他?

采纳答案by Xaerxess

It's historical... coincidence? You can recommend him reading part about Past of diveintohtml5.info, where there are some interesting stories, actually mail correspondences, between web developers. Web developers means they were, in fact, developing the Web we see nowadays ;)

这是历史……巧合?你可以推荐他阅读关于diveintohtml5.info 的过去的部分,其中有一些有趣的故事,实际上是网络开发人员之间的邮件通信。Web 开发人员意味着他们实际上开发我们现在看到的 Web ;)

I.e. <img>tag we are used to:

<img>我们习惯的标签:

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

could be:

可能:

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

or

或者

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

or

或者

<INCLUDE HREF="...">

but finally devs decided to stick with <img>, which was already implemented:

最终开发人员决定坚持使用<img>,它已经实施

We're not prepared to support INCLUDE/EMBED at this point. … So we're probably going to go with (not ICON, since not all inlined images can be meaningfully called icons). For the time being, inlined images won't be explicitly content-type'd; down the road, we plan to support that (along with the general adaptation of MIME). Actually, the image reading routines we're currently using figure out the image format on the fly, so the filename extension won't even be significant.

我们目前不准备支持 INCLUDE/EMBED。... 所以我们可能会选择(不是 ICON,因为并非所有内联图像都可以有意义地称为图标)。目前,内联图像不会被明确地进行内容类型化;在未来,我们计划支持(连同 MIME 的一般改编)。实际上,我们当前使用的图像读取例程会即时确定图像格式,因此文件扩展名甚至不会很重要。

I don't know direct answer to your question, but I'm pretty curious about <link>tag, too. Finding answer would probably include some web archives digging.

我不知道你的问题的直接答案,但我对<link>标签也很好奇。寻找答案可能包括一些网络档案挖掘。

回答by Frédéric Hamidi

There is a difference, at least from the W3C's point of view.

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

A <style>element introduces a block of CSS rules that apply to the current document. However, external style sheets are actually considered as whole documents relatedto the current page, and user agents are free to ignore such documents, depending on the typeand mediaattributes of the link. For instance:

<style>元件引入的应用于当前文档的CSS规则的块。然而,外部样式表实际上被认为是当前页面相关的整个文档,用户代理可以随意忽略这些文档,具体取决于链接的typemedia属性。例如:

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

In this situation, user agents would typically only follow one of the links, either the screenone (for normal rendering) or the printone (for, well, printing). The idea was to preserve bandwidth by only downloading the appropriate resource, instead of fetching everything and filtering on the media type later.

在这种情况下,用户代理通常只会遵循其中一个链接,要么是screen(用于正常渲染)要么是print(用于打印)。这个想法是通过仅下载适当的资源来保留带宽,而不是稍后获取所有内容并过滤媒体类型。

This is mentioned in the specification:

规范中提到了这一点:

When the LINKelement links an external style sheet to a document, the typeattribute specifies the style sheet language and the mediaattribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.

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

回答by Peter Olson

They both have a basically identical meaning, and you have spotted a sort of inconsistency in HTML. The cause of this is that the standards were based on the implementations of different browsers. Different browsers came up with the attributes in the different tags, and the W3C just decided to keep some of the inconsistencies in order to maintain backwards compatability.

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

Elements that use src: script img iframe input video frame

使用的元素srcscript img iframe input video frame

Elements that use href: a link base

使用的元素hrefa link base

回答by Rocket Hazmat

The <link>tag is used to "link" other documents to the current one, and describe it's relationship, or rel, with it.

<link>标签用于将其他文档“链接”到当前文档,并描述它的关系,或者rel,与它的关系。

You can also use <link>to link other things to the document. For example, favicons:

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

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

回答by Edgar

This might explain things, I guess: http://www.w3.org/TR/html4/struct/links.html

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