一个真实世界的例子

Question

我想使用Tag Link的Attribute type =“text”将html内容转换为css内容，但它不起作用！

这是我的PHP代码：

//url with (http://127.0.0.1/test.php);
//I know it should be: header("Content-type: text/css; charset=utf-8");
header("Content-type: text/html; charset=utf-8");
echo "BODY{background-color:#f00;}"

html代码：

<html>
    <head>
        <!-- 
            it not works!why?
            I've pointed that type="text/css"
            why it can't be convert to text/css
         -->
        <link rel="stylesheet" type="text/css" href="http://127.0.0.1/test.php">
    </head>
    <body>
        anything ...
    </body>
</html>

为什么标签链接的属性类型不起作用？
但脚本标签效果很好！

我的英语很差，如果你无法理解我的话，请给我留言！谢谢你的回答！

综述
@Luke Briggs的回答帮助我理解为什么有时会起作用！ @ Dekel的回答帮助我理解@Luke Briggs的答案好多了！

Answer 1

您应该使用Content-type: text/css而不是text/html：

header("Content-type: text/css; charset=utf-8");
echo "body {background-color:#f00;}";

当前代码无法正常工作的原因是浏览器正在尝试获取资源并对其进行解析，但服务器会告诉浏览器资源的内容为{{ 1}}。由于服务器告诉浏览器内容为text/html - 浏览器不会尝试将该内容用作CSS。

Answer 2

链接标记的type属性为“纯粹建议”，如HTML5 specification中所述：

用户代理不得将type属性视为权威的 - 在获取资源时，用户代理不得使用type属性来确定其实际类型。

链接标记描述了各种各样的东西而不仅仅是CSS - 用户代理使用该类型属性立即知道它是否支持该文件：

type属性用作用户代理的提示，以便他们可以避免获取他们不支持的资源。

简而言之，它只是作为一个提示。来自服务器的标头在link标签内使用时是“事实上”类型。

一个真实世界的例子

在Twitter页面的来源中，您会看到：

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">

我的普通网络浏览器不知道application/opensearchdescription+xml是什么，所以它避免完全加载该xml文件（并且作为附注，如果它确实加载了XML文件，它将不知道该怎么做无论如何）。

脚本元素怎么样？为什么它适用于他们？

script个元素在HTML5规范中定义了它们的类型属性very differently：

{src}属性的值必须是有效的非空URL，可能由标识由type属性的类型的脚本资源的空格包围

这次type属性不仅仅是一个提示 - 它定义了要使用的实际类型。

为什么<link type =“text / css”src =“html content”/>无效

2 个答案:

一个真实世界的例子

脚本元素怎么样？为什么它适用于他们？