可以在 <html> 之外包含 css 和 js 文件吗？答案

【问题标题】：ok to include css and js files outside <html>?可以在 <html> 之外包含 css 和 js 文件吗？
【发布时间】：2011-01-11 13:28:01
【问题描述】：

我想知道是否可以在 html 文档范围上方嵌入 js 和 css 文件：

<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />

<html>
   <head>
   </head>
   <body>
   <body>
</html>

这是因为我想将它们放在包含所有文件（php、js 和 css）的同一个 php 文件中。我已经尝试过了，它似乎有效。 html 文件的输出将像上面的代码一样显示，包含行位于 html 标记上方。

这里面有什么隐藏的缺点吗？

【问题讨论】：

您能否详细说明您需要这样做的原因？将它们放在同一个 php 文件中如何迫使您将它们放在顶部？
是的，您绝对没有理由在输出<html><head>之后不能进行包含。

标签： php javascript html css

【解决方案1】：

即使它有效，你也不应该这样做。这种类型的东西是草率的，因此不能保证明天或未来的浏览器都能正常工作。如果你现在感觉不到这种方法的痛苦，你最终会的。无论如何，你没有理由这样做。

【讨论】：

true.but 话又说回来，许多框架使用这种技术并将它们保存在单独的 php 文件中。
@pixeltocode：你可以这样做并且仍然将它们加载到正确的位置。

【解决方案2】：

这不是有效的 html。放置 javascript 的最佳位置是在正文关闭之前（除非有需要加载这些脚本的内联脚本）。这样可以防止页面加载时出现阻塞。

【讨论】：

这不是有效的 HTML，没有 DTD。

【解决方案3】：

将不是有效的 (X)HTML。

【讨论】：

工作和验证是不同的。 Google 的页面可在所有浏览器中运行，但无法成功验证。
浏览器被设计为尽其所能来处理损坏的 HTML，因此 Firefox 正在尽其所能。它可能会在开始时添加一个隐式并丢弃下一个。
我在页面底部看到了标题标签。浏览器非常宽容。也许太宽容了。

【解决方案4】：

这适用于大多数浏览器，但这并不是说它没有错误。这是错误。

它不是有效的 HTML，几乎所有遇到您的代码的人都会感到困惑，虽然我不知道哪些浏览器可能无法克服这种风格固有的错误，但我还是没有承诺它会起作用。从某种意义上说，它应该，但在另一种意义上，它绝对不应该。

【讨论】：

【解决方案5】：

也许输出缓冲在这种情况下会起作用？缓冲“包含”文件的输出，然后在 <html> 声明之后获取缓冲区的内容以稍后输出。大致是这样的：

在您的 includes.php 文件中：

<?php 
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>

这是您的主页：

<html>
 <head>
  <title>Hello</title>
  <?php echo $includes ?>
 </head>
 <body>
 ...

【讨论】：

【解决方案6】：

我知道这已经很老了，但我想补充一点，Google 建议在某些情况下这样做。

看看这个：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

您对 Google 为何提倡不正确的 HTML 编码有何想法？

【讨论】：