97

任意の順序で何かを使用できますか? 前にの配置<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">は重要ですか<title>

これが最もよく使われますが、これが最善の方法ですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

このサイトhttp://stackoverflow.comにはエンコーディングがなく、<meta>

<meta>すべてのjsとcssの後にSEOのためにすべてを追加するSEOコンポーネントを持つCMSを使用しています。ファイル。<head>ドキュメントの互換性とエンコーディングに影響を与えることが許可されている要素を任意の順序で配置できますか?

4

7 に答える 7

113

HTMLでは、最初に、要素を含む要素を含むDOCTYPE単一の要素が続き、その後に要素が続く<html>必要があります。HTML4.01およびHTML5ドラフトのHTMLドキュメントのグローバル構造の説明を参照してください。実際の要件は、以外はほとんど同じですが、説明が異なります。<head><title><body>DOCTYPE

実際のタグ（、、、<html>など</html>）<head>はオプションです。タグが存在しない場合、要素は自動的に作成されます。<title>HTMLで必要な唯一のタグです。最短の有効なHTML4.01ドキュメント（少なくとも、私が生成できるもの）は次のとおりです（有効<p>であるためには何かが必要なため、が必要<body>です）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

そして、最短の有効なHTML5ドキュメント：

<!DOCTYPE html><title></title>

XHTMLでは、すべてのタグを明示的に指定する必要があることに注意してください。要素は暗黙的に挿入されません。

ブラウザは、状況によってはコンテンツタイプスニッフィングを実行して、HTTPヘッダーを使用して指定されていないリソースのタイプを判別します。また、ヘッダーが提供されていないContent-Typeか、ヘッダーが含まれていない場合は、文字エンコードスニッフィングを実行します（通常、これらのヘッダーを含め、それらが正しいことを確認しますが、ローカルファイルがHTTP経由で転送されないなど、できない状況もあります）。ただし、これらの目的のために、ドキュメントの先頭で限られた数のバイトをスニッフィングするだけなので、コンテンツスニッフィングまたは文字エンコードスニッフィングに影響を与えることを目的としたものはすべて、ドキュメントの先頭近くにある必要があります。Content-Typecharset

このため、HTML5では、文字セット（または単に）を指定するために使用されるmetaタグは、有効にするためにファイルの最初の1024バイト内にある必要があると指定されています。したがって、ドキュメント内に文字エンコード情報を含める場合は、ファイルの早い段階で、場合によっては要素の前であっても、タグを配置する必要があります。ただし、ヘッダーを適切に指定すれば、このタグは不要であることを思い出してください。<meta http-equiv="Content-type" content="text/html; charset=..."><meta charset=...><title>Content-type

CSSでは、後のスタイル宣言が前のスタイル宣言よりも優先され、他のすべては同じです。したがって、通常は、以前にオーバーライドされる可能性のある最も一般的なスタイルシートを配置し、より具体的なスタイルシートを後で配置する必要があります。

</body>パフォーマンス上の理由から、スクリプトをロードするとページのレンダリングがブロックされるため、スクリプトをページの下部、直前に配置することをお勧めします。

明らかに、<script>タグは、各順序に依存するスクリプトが最初に依存関係をロードするように順序付けする必要があります。

全体として、私がすでに指定した制約を除いて、内部のタグの順序は<head>、読みやすさを除いて、それほど重要ではありません。私は上に向かって見たいと思う傾向があり<title>、他の<meta>タグをある種の論理的な順序で配置します。

ほとんどの場合、HTMLドキュメントの本文に配置する順序は、表示する順序、またはアクセスする順序にする必要があります。CSSを使用して物事を並べ替えることができますが、スクリーンリーダーは通常、物事をソース順に読み取り、検索インデックスは物事をソース順に抽出します。

于 2009-12-31T21:46:39.057 に答える
35

これは私が使用するテンプレートです。新しいプロジェクトに必要のないものはすべて削除してください。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>
于 2015-06-10T19:54:07.650 に答える
8

Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:

  • Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
  • Title near the top so the browser can render it asap and user has a sense something is happening
  • Favicon and touch icons
  • CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
  • Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
  • Everything else (e.g. necessary metadata in the form of links and meta tags)

You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.

Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.

于 2014-08-30T10:04:17.517 に答える
6

ほとんどのブラウザーは要素の順序を気にしませんが、常にcharset最初に指定する必要があります。

IE7+ のベスト プラクティスでcharsetは、 、X-UA-Compatible、およびbase宣言が 内の他の何よりも前に発生する必要がありますhead。そうでない場合、ブラウザーは最初からやり直し、前にあったすべてのものを再解析します。

于 2012-03-24T23:18:15.867 に答える
5

これは文字エンコードを示すため、最初にコンテンツタイプが必要です。そうでない場合、後で来ると、一部のブラウザはエンコードを推測しようとします。（詳細は思い出せませんが、IEはドキュメントの最初の75文字にエンコーディングが見つからないかどうかを推測すると思いますか？）

ほとんどのWebサーバーはHTTPヘッダーでエンコードを送信しますが、ユーザーがページを保存した場合、ヘッダーは一緒に保存されません。

CSS参照を2番目に配置して、ブラウザーができるだけ早くそれらをダウンロードできるようにします。

JavaScript私は頭に入れませんが、ダウンロードするとページのレンダリングがブロックされるため、ページの下部に配置する必要があります。

于 2009-12-31T21:48:04.737 に答える
0

content-typeIIRC、一部のブラウザーは、要素に遭遇するとドキュメントを再読み込みします。headしたがって、その要素はおそらくドキュメントの要素内で最初に来るはずです。

于 2009-12-31T22:23:05.153 に答える