Question

我知道<link type="stylesheet" href=".." />和<script type="text/javascript" src=".." />是如何运作的。但我对W3C的背景以及良好的编程实践环境有一些了解。我是很多例子，这些都在标题中。我不知道为什么，但似乎合法。但是当他们在HTML代码中的其他地方时会产生什么影响呢？

以PHP中包含的header文件为例，该文件包含自己的CSS \ JS文件。因此，它们可以包含在头文件本身中，然后在页面的HTML主体中间将包含link和script标记，包括头文件。另一个选择是将它们放在每个文件的head部分中，但是必须在每个页面中进行更改。

我的问题：

link和script代码应该在哪里根据W3C？
如果它们位于HTML正文的中间，如上例所示会产生什么影响？
在良好的编程实践方面，最佳解决方案是什么？
如何在拥有符合W3C标准的页面时制作以下include，并且在更改CSS \ JS文件时我不必更新每个页面。
- 请考虑所包含的代码段独立于包含页面。

只是为了清楚一个简短的例子：（对于JS文件也考虑相同的情况）

header.html中：

   <link rel="stylesheet" href="header.css" />     <!--- Should this be here? --->
<nav>
   <ul>
     <li>Menu item1</li>
     <li>Menu item2</li>
   </ul>
</nav>

的index.php：

<html>
   <head>
      <link rel="stylesheet" href="header.css" />     <!--- Or should it be here? --->
   </head>
   <body>
      <?php include('header.html'); ?>
      <!--- Some HTML code ---->
   </body>
</html>

header.css：

nav{ color: #00FF00; }

Answer 1

简单

Put Scripts at the Bottom.
Put Stylesheets at the Top

HTML specification清楚地说明了样式表包含在页面的HEAD中：“与A不同，[LINK]可能只出现在文档的HEAD部分，虽然它可能会出现任意数量 “没有替代品，空白的白色屏幕或闪光灯没有风格的内容，值得冒风险。最佳解决方案是遵循HTML规范并加载样式表文件HEAD。

对于javascipts

脚本引起的问题是它们会阻止并行下载。 HTTP/1.1 specification表示浏览器不再下载每个主机名并行两个组件。如果您提供图像从多个主机名，您可以获得两次以上的下载在平行下。但是，在下载脚本时，浏览器不会即使在不同的主机名上，也可以启动任何其他下载。

供参考： http://developer.yahoo.com/performance/rules.html#css_top
http://developer.yahoo.com/performance/rules.html#js_bottom

<强> [编辑]
对于您的新问题，

将该header.html设为动态页面。
当包含它时，从输出缓冲区读取数据（假设您没有使用ob_get_contents将其清除掉。
然后你可以将css文件注入头部。
回应它。
使用ob_end_clean（）;

某些框架（如zend）允许您使用helpers来控制它。

Answer 2

样式表应始终位于标题中。根据W3C规范，不允许在体内使用样式标签。你应该在体内放置的唯一CSS是内联CSS，但我通常会避免使用内联样式。

Head专为（引用W3C）而设计：

“有关当前文档的信息，例如标题，可能对搜索引擎有用的关键字以及其他不被视为文档内容的数据” 途经：http://www.w3.org/TR/html401/struct/global.html#h-7.4.1

当您需要在用户加载页面之前加载JS时，将JS放在Header中。可以在正文中加载GoogleAnalytics或其他服务或UI元素。网络连接速度慢的人会感谢你。您的尺寸内容将首先加载，而不是网站上的精选元素。

Answer 3

<html>
  <head>

     <link type="stylesheet" href=".." />
     <script type="text/javascript" src=".." />

  </head>
  <body>

     <!-- here html codes -->

  </body>
</html>

Answer 4

您必须使用head部分中的Link和script标记示例代码：

<html>
    <head>
    <link href="YOUR URL" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="YOUR URL"></script>
</head>
<body>
    <!--HTML tags-->
</body>
</html>

如何在页面中包含CSS和JS？

4 个答案: