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

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

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

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

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

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 ;)

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

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

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.

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.

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

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 related to the current page, and user agents are free to ignore such documents, depending on the type and media attributes of the link. For instance:

<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 screen one (for normal rendering) or the print one (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.

This is mentioned in the specification:

When the LINK element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute 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.

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.

Elements that use src: script img iframe input video frame

Elements that use href: a link base

Possible reason for link ref vs style:

link can only go on the head, where "Metadata content" is allowed, typically head,

style could not go in the body before HTML5 (now you can with scoped, but still not to external styles). Therefore, the choice between link ref and style src is arbitrary.

script, however, could already include an external script in the body before HTML5, so there had to be script src. But since it had to exist, why not allow it in the head as well (where script was already allowed), and disallow link rel=script to avoid duplication?

Apparently Tim Berners-Lee wanted everything to be done with <a: https://youtu.be/3QEoJRjxnxQ?t=901 !