1

私は方法<link type="stylesheet" href=".." />と<script type="text/javascript" src=".." />仕事を知っています。しかし、私は、それらがW3Cのコンテキストで、また優れたプログラミング手法のコンテキストでどこにあるべきかについて、いくつかの理解があります。私はこれらがヘッダーにある多くの例でした。理由はわかりませんが、合法的なようです。しかし、HTMLコードのどこかにある場合、どのような影響がありますか？

たとえば、headerPHPによってWebサイトのすべてのページにインクルードされているファイルを考えてみましょう。このヘッダーファイルには、独自のCSS\JSファイルがあります。したがって、それらはヘッダーファイル自体にインクルードすることができ、ヘッダーファイルを含むページのHTML本文の中央にlinkとscriptタグがあります。別のオプションは、これらheadを各ファイルのセクションに配置することですが、その後、すべてのページで変更を加える必要があります。

私の質問：

  1. W3Cによるlinkとタグはどこにあるべきですか？script
  2. 上記の例のように、HTML本体の中央にある場合、どのような影響がありますか？
  3. 優れたプログラミング手法の観点から、最良の解決策は何ですか？
  4. includeW3C準拠のページを使用し、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; }
4

4 に答える 4

4

単純

Put Scripts at the Bottom.
Put Stylesheets at the Top

HTML 仕様では、スタイルシートはページの HEAD に含める必要があると明確に述べられています。空白の白い画面またはスタイル設定されていないコンテンツのフラッシュのどちらの選択肢も、リスクに値するものではありません。最適な解決策は、HTML 仕様に従い、ドキュメント HEAD にスタイルシートをロードすることです。

JavaScript の場合

スクリプトによって引き起こされる問題は、並列ダウンロードがブロックされることです。HTTP/1.1 仕様では、ブラウザがホスト名ごとに並行して 2 つまでのコンポーネントをダウンロードすることが推奨されています。複数のホスト名からイメージを提供する場合、2 つ以上のダウンロードが並行して発生する可能性があります。ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザーは他のダウンロードを開始しません。

参考までに: http://developer.yahoo.com/performance/rules.html#css_top
http://developer.yahoo.com/performance/rules.html#js_bottom

[編集]
新しい質問については、

  • その header.html を動的ページにします。
  • それが含まれているときはいつでも、ob_get_contentsを使用して出力バッファからデータを読み取ります（フラッシュしないと仮定します）。
  • 次に、css ファイルを head 部分に挿入できます。
  • エコーします。
  • ob_end_clean(); でバッファを消去します。

zend などの一部のフレームワークでは、helpersを使用してこれを制御できます。

于 2012-06-23T11:01:39.933 に答える
0

スタイルシートは常にヘッダーに含める必要があります。W3C仕様によると、スタイルタグは本文内で許可されていません。本文に入れる必要のあるCSSはインラインCSSだけですが、私は通常インラインスタイルを避けています。

ヘッドは（W3Cの引用）のために設計されています：

「タイトル、検索エンジンに役立つ可能性のあるキーワード、ドキュメントのコンテンツとは見なされないその他のデータなど、現在のドキュメントに関する情報」経由：http ://www.w3.org/TR/html401/struct/global .html＃h-7.4.1

ユーザーがページをロードする前にJSをロードする必要がある場合は、ヘッダーにJSを配置します。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 に答える