1

我知道如何<link type="stylesheet" href=".." />工作<script type="text/javascript" src=".." />。但是我对它们应该在 W3C 的上下文中以及在良好的编程实践的上下文中的位置有一些明确的理解。我有很多例子，这些都在标题中。我不知道为什么，但似乎合法。但是，当它们位于 HTML 代码的其他位置时会产生什么影响？

以 PHP 包含在网站所有页面中的文件为例header，该头文件有自己的 CSS\JS 文件。所以它们可以要么包含在头文件本身中，然后在包含头文件的页面的 HTML 正文中间会有一个link和一个script标签。另一种选择是将这些放在head每个文件的部分中，但是必须在每个页面中进行更改。

我的问题：

  1. 根据 W3C ， linkand标签应该在哪里？script
  2. 如果它们像上面的示例一样位于 HTML 正文的中间，会有什么影响？
  3. 就良好的编程实践而言，最佳解决方案是什么？
  4. 如何include在拥有符合 W3C 的页面的同时进行以下操作，并且在更改 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>

索引.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; }
4

4 回答 4

4

简单的

Put Scripts at the Bottom.
Put Stylesheets at the Top

HTML 规范明确规定样式表将包含在页面的 HEAD 中：“与 A 不同，[LINK] 只能出现在文档的 HEAD 部分，尽管它可能出现多次。” 这两种选择，空白的白屏或无样式内容的闪烁，都不值得冒险。最佳解决方案是遵循 HTML 规范并将样式表加载到文档 HEAD 中。

对于javascipts

脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

仅供参考： 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来控制它。

于 2012-06-23T11:01:39.933 回答
0

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

Head 设计用于（引用 W3C）：

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

当您需要在用户加载页面之前加载它们时，您将 JS 放在 Header 中。GoogleAnalytics 或其他服务或 UI 元素可以加载到正文中。互联网连接速度慢的人会感谢你。您大小的内容将首先加载，而不是 nice2have 您网站的元素。

于 2012-06-23T11:00:53.003 回答
0 
<html>
  <head>

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

  </head>
  <body>

     <!-- here html codes -->

  </body>
</html>
于 2012-06-23T11:23:06.087 回答
0

您必须在 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>
于 2012-06-23T13:29:20.800 回答