html - タグの順序

Question

<link>または<script>または<meta>タグがにある順序はまったく重要<head></head>ですか?

（ばかげた質問ですが、今まで考えたことのないものの1つです。）

score 42 · Accepted Answer

最適化

Yahoo! の関係者によると、スクリプトは並列ダウンロードをブロックするため、CSS を上部に、スクリプトを下部に配置する必要があります。しかし、これは主に最適化の問題であり、ページが実際に機能するためには重要ではありません。Joeri Sebrechtsさんは、 Cuzillionはこれをテストして速度の向上を自分で確認するための優れた方法であると指摘しました。

複数のスタイルシート

複数のスタイルシートをリンクしている場合、それらがリンクされている順序は、セレクターの特異性に応じてページのスタイルに影響を与える可能性があります。つまり、同じセレクターを 2 つの異なる方法で定義する 2 つのスタイルシートがある場合、後者が優先されます。例えば：

スタイルシート 1:

h1 { color: #f00; }

スタイルシート 2:

h1 { color: #00f; }

この例では、同じ特異性で最後に定義されているため、h1要素に色が付けられます。#00f

複数のスクリプト

複数のスクリプトを使用している場合、スクリプトの 1 つが別のスクリプトの何かに依存している場合は、使用する順序が重要になる場合があります。この場合、スクリプトが間違った順序でリンクされていると、一部のスクリプトでエラーがスローされたり、期待どおりに動作しない場合があります。ただし、これは使用しているスクリプトに大きく依存します。

score 16 · Accepted Answer

16

于 2008-10-10T15:02:14.653 に答える

score 11 · Accepted Answer

できるだけ高い文字エンコーディングでメタタグを配置することをお勧めします。エンコードが要求されたページの応答ヘッダーに含まれていない (または異なる) 場合、ブラウザーはエンコードが何であるかを推測する必要があります。このメタタグが見つかった場合にのみ、何を処理しているかを認識し、既に解析したすべてのものを再度読み取る必要があります。

たとえば、文字セットを示す方法を参照してください。

score 8 · Accepted Answer

1 つの重要な注意事項: Internet Explorer のメタ X-UA-Compatible タグを使用して IE のレンダリングモードを切り替える場合は、HEAD の最初にある必要があります。

<頭>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>ページのタイトル</title>
  ...等
</head>

score 5 · Accepted Answer

メタは重要ではありませんが、リンク (css 用) とスクリプトは重要です。

スクリプトは、スクリプトがロードされるまで、ほとんどのブラウザーがページをレンダリングするのをブロックします。したがって、可能であれば、それらを頭ではなく体に入れます。

css リンクはページのレンダリングをブロックしません。

score 2 · Accepted Answer

文字セットを宣言するメタタグを head の最初の要素として配置します。ブラウザはこれまでタグを検索するだけです。meta 要素の前に要素が多すぎると、文字セットが適用されない場合があります。

BASE 要素を使用する場合は、URI をロードする要素の前に置きます (必要な場合)。

score 2 · Accepted Answer

通常、<script>タグはできるだけページの下部 (頭ではなく本文) に配置することをお勧めします。

それ以外は、<head>セクションを完全にロードしないと本文を解析できないため、大きな違いはないと思います。そして、<link>ブラウザがページをレンダリングした後ではなく、ページをレンダリングするときにスタイルを設定したいので、タグをヘッドに配置する必要があります。

score 2 · Accepted Answer

メタ要素で文字セットを宣言する場合は、他の要素の前に行う必要があります。

score 2 · Accepted Answer

まったくばかげた質問ではありません。
前述の理由により、スクリプトタグの上の CSS。

CSS は、タグを配置した順序で適用されます。スタイルシートが具体的であるほど、順序は低くなります。

スクリプトについても同様です。他のファイルで宣言された関数を使用するスクリプトは、依存関係が読み込まれた後に読み込まれる必要があります。

score 1 · Accepted Answer

XHTMLとして検証するために、はい。そうでなければ、おそらく最適化の答えを気にするでしょう。

score 1 · Accepted Answer

最近、ドラッグ可能な jquery ui 要素に問題がありました。Firefox では正常に動作しましたが、Safari では正常に動作しませんでした。試行錯誤を重ねた結果、頭の中の CSS リンクを JavaScript リンクの上に移動するという修正が行われました。非常に奇妙ですが、今では私の標準的な習慣になります。

score 1 · Accepted Answer

リンクされたファイル (CSS/Javascript) の 1 つが別のファイルに依存している場合にのみ問題になります。その場合、すべての依存関係を最初にロードする必要があります。

たとえば、jQuery プラグインをロードしている場合、最初に jQuery 自体をロードする必要があります。他のルールを拡張するいくつかのルールを含む CSS ファイルがある場合も同様です。

score 1 · Accepted Answer

すでに指摘したように、コンテンツの文字セットを記述するメタを最初にする必要があります。そうしないと、特定の状況で実際にセキュリティホールになる可能性があります。（申し訳ありませんが、その状況をここで説明するのに十分なほどよく覚えていませんが、Webセキュリティトレーニングコースでデモンストレーションされました）

score 0 · Accepted Answer

いいえ、CSS の継承と既にスタイル設定されたものを上書きするという事実のため、CSS のリンクまたはインクルージョンを除いて、それは問題ではありません (私の英語で申し訳ありませんが、私の文は本当に明確ではないと思います :-/)。

html - タグの順序

14 に答える 14

Related

Reference