HTMLドキュメントのヘッド部分には通常、指定されたページタイトルが含まれています。これは、ページ自体に関する情報を提供し、スタイルテーブルをロードし、JavaScriptファイルをロードします(パフォーマンスの考慮事項のために、ほとんどの場合、ページの下部に配置されます< /body>ラベルが終了する前にロードJavaScript)。タイトルを除いて、ヘッドのコンテンツはページ訪問者には見えません。
以下は、HTMLドキュメントのヘッド部分の例です。
<head> <meta charset = utf-8/> <meta name =著者コンテンツ= adam freeman/> <title>あなたのページタイトル</title> <base href = http:// the thetings/target = _ blank/> <スタイルタイプ=テキスト/css> {background-color:grey;タイトル要素
ヘッド要素には、ブラウザのタブまたはブラウザウィンドウの上部にWebページのタイトルとして表示され、ブラウザに関連するタイトル要素を含める必要があります。
ベース要素ベース要素は、これに基づいてHTMLドキュメントの相対リンクを分析するためにベンチマークURLを設定するために使用されます。指定されていない場合は、現在のロードドキュメントのURLを使用します。ベース要素は、ユーザーがクリックするとリンクを開く方法を設定し、フォームを送信するときにブラウザの反応方法を設定することもできます。
<base href = http:// bjpowernode/listings/target = _blank/>
1)HREFは指定されたベンチマークURLです。
2)値を含むターゲット属性が開かれる場所を含む、ページ上のすべてのリンクを開く場所:
1)_blank:新しいウィンドウで接続されたドキュメントを開きます。
2)_Self:デフォルトでは、同じフレームワークでリンクドキュメントを開きます。
3)_Parent:親フレームでリンクされたドキュメントを開きます。
4)_TOP:ウィンドウ全体でリンクドキュメントを開きます。
5)フレームネーム:指定されたフレームワークでリンクドキュメントを開きます。
メタ要素メタ要素は、ドキュメントのさまざまなメタデータを定義するために使用されますが、各メタ要素は1つ以上の目的でのみ使用できます。ヘッド要素。
名前/値メタデータペアを指定します<メタ名=著者コンテンツ= adam freeman/>
名前属性は、コンテンツ属性の値を提供するメタデータのタイプを表すために使用されます。名前属性には、次の値が含まれています。
1)アプリケーション名:現在のページに属するWebアプリケーションシステムの名前。
2)著者:現在のページの著者名。
3)説明:現在のページの指示。
4)ジェネレーター:HTMLの生成に使用されるソフトウェア名。
5)キーワード:ページの内容を説明します。
上記の5つの事前に定義されたメタデータ名に加えて、ここではメタデータの拡張を使用できます(http://wiki.whatwg.org/wiki/metaextensions)。 HTMLドキュメントの著者は、ロボットメタデータなど、いくつかの拡張機能を使用しています。
<Meta name = robots content = noindex/>
この属性には、ほとんどの検索エンジンが認識される値があります。
1)nondex:このページをインデックスしないでください。
2)noarchive:このページをアーカイブまたはキャッシュしないでください。
3)nofollow:このページのリンクに沿って検索を続けないでください。
ほとんどの検索エンジンは、WebページまたはWebサイト全体を最適化するためのガイドラインを提供し、対応する検索エンジンが提供するWebページまたはWebサイトの最適化ガイドラインを表示できます。
宣言文字コード<メタcharset = utf-8 />
ヘッド要素のメタ要素宣言ドキュメントの文字コーディングは、UTF-8(デフォルト)です。
シミュレーションHTTPヘッダーフィールドメタ要素を使用して、3つのHTTPヘッダーフィールドの値をシミュレートまたは交換できます。
<Meta http-equiv = reffress content = 5/>
HTTP-Equiv属性の使用は、シミュレートされたヘッダーを指定するヘッダーフィールド名の名前であり、フィールド値はコンテンツプロパティで指定されています。 HTTP-Equivプロパティのオプションの値は次のとおりです。
1)更新:秒単位で時間間隔を指定します。また、ブラウザがロードできるようにURLを個別に指定することもできます。
<Meta http-equiv = Refresshコンテンツ= 5;
2)デフォルトスタイル:コンテンツ属性の値は、同じドキュメントのスタイル要素のタイトルプロパティ値である必要があります。
3)Content-Type:HTMLページで使用されている文字コーディングを宣言する別の方法::
<メタhttp-equiv = content-type content = text/html charset = utf-8/>スタイル要素
HTMLドキュメントに埋め込まれたCSSスタイルを定義します。
<style type = text/css> a {background-color:white:0.5em;} </style>
新しいスタイルは、A要素のために設計されています。スタイル要素は、HTMLドキュメントのさまざまな部分に表示できます。
スタイル要素のスタイルを指定できるメディア:
<スタイルメディア=画面と(最小:500px)タイプ= text/css> ...... </style>
メディア属性の画面はデバイスタイプであり、オプションの値の範囲には以下が含まれます。
1)すべて:すべてのデバイス(デフォルト値)にスタイルを使用します。
2)聴覚:音声シンセサイザーにスタイルを使用します。
3)点字:スタイルを使用してデバイスに尋ねます。
4)ハンドヘルド:ハンドヘルドデバイスにスタイルを使用します。
5)プロジェクト:プロジェクターにスタイルを使用します。
6)印刷:スタイルを使用してプレビューと印刷ページを印刷する場合。
7)画面:コンピューターディスプレイ画面のスタイルを使用します。
8)TTY:電気通過機などの等しい幅の機器にスタイルを使用します。
9)テレビ:テレビにスタイルを使用します。
(Min-Width:500PX)メディアの帰属で指定された機能を含む。
1)幅の高さ:ブラウザウィンドウの幅と高さ、ユニットPX、例:幅:200px
2)デバイス幅デバイス - ハイト:デバイス全体の幅と高さ(ブラウザウィンドウだけでなく)、ユニットPX、例:MIN-DEVICE-HEIGHT:200PX
3)解像度:デバイスのピクセル密度、ユニットDPI(ポイント/インチ)またはDPCM(ポイント/cm)、例:最大解像度:600DPI
4)方向:指定されたデバイスの長い方向、オプションの値はポートレートと風景です
5)アスペクト-ratioデバイスアスペクト比:ブラウザウィンドウまたはデバイス全体のピクセル幅比を指定します。
6)色モノクロ:色または白黒デバイスの各ピクセルの各ピクセルが占めるバイナリ数字を指定します。例:Min-Monochrome:2
7)カラーインデックス:指定されたデバイスで表示できる色の数。
8)スキャン:Value ProgressiveとInterlationを含むテレビのスキャンモードを指定します
9)グリッド:指定されたデバイスのタイプ、サポート値は0と1です(1は、固定グリッドディスプレイコンテンツを使用して、グリッドタイプのデバイスを表します)
リンク要素これは、HTMLドキュメントと外部リソース(CSSスタイルテーブルなど)の間の接続を確立するために使用されます。リンク要素には、次のように6つのローカル属性が含まれています。
1)HREF:リンク要素を指すリソースのURLを指定します。
2)hreflang:関連するリソースで使用される言語を説明します。
3)メディア:関連するコンテンツで使用されているデバイスと、スタイルのメディア属性を説明します。
4)REL:ドキュメントと関連するリソースとの関係の範囲は次のとおりです。
---代替:別の言語の翻訳など、ドキュメントへのリンクの代替バージョン。
---著者:ドキュメントへのリンクの著者。
---ヘルプ:現在のドキュメントに接続された説明文書。
---アイコン:アイコンリソースを指定します。
---ライセンス:関連するライセンスへのリンク現在のドキュメント。
--- Pingback:他のWebサイトからブログにリンクするときに自動的に通知できるPingbackサーバーを指定します。
---プリフェッチ:事前にリソースを取得します。
--- StyleSheet:外部スタイルのテーブルをロードします。
5)サイズ:アイコンのサイズを指定します。
6)タイプ:テキスト/CSS、Image/X-Iconなど、関連するリソースのMIMEタイプを指定します。
外部スタイルのテーブルをロードします<link rel = styleSheet type = text/css href = styles.css/>
複数のリンク要素を使用して、複数の外部リソースをロードできます。
ページのWebサイトロゴを定義します<link rel =ショートカットアイコンhref = favicon.ico type = image /x-icon />
ブラウザにHTMLページがロードされると、Webサイトのロゴが読み込まれて表示されます。
注:Webサイトのロゴファイルが/Favicon.ico(Webサーバーのルートディレクトリ)にある場合、ほとんどのブラウザは、ページをロードするときにこのファイルを自動的にリクエストする必要はありません。リンク要素なし。
事前にリソース
ブラウザは、すぐに使用されると予想されるリソースを取得するために必要です。
<link rel = prefetch href =/page2.html/>
注:すべてのブラウザが現在この機能をサポートしているわけではありません。
スクリプト要素ページにスクリプトを追加するために使用すると、スクリプトを定義し、ドキュメント内のスクリプトを直接参照できます。この要素によってサポートされるローカル属性は次のとおりです。
1)タイプ:JavaScriptスクリプトの属性について、参照または定義されたスクリプトのタイプは省略できます
2)SRC:外部スクリプトファイルのURLを指定する
3)ASYNCの延期(HTML5新しい追加):スクリプトの実行方法を設定すると、これら2つの属性はSRC属性でのみ使用できます
4)charset:src属性でのみ使用できる外部スクリプトファイルで使用される文字エンコードを説明します
組み込みスクリプトのドキュメントを定義します<script> document.write(これはスクリプトからです);
デフォルトでは、スクリプトがページに遭遇するとすぐにブラウザが実行されます。
外部スクリプトライブラリをロードしますスクリプトを別のファイルに配置してから、HTMLドキュメントにスクリプト要素をロードできます。
<スクリプトsrc = simple.js> </script>スクリプトの実行を排出します
AsyncおよびDefer属性を使用して、スクリプトの実行方法を制御します。
<Script Defer src = simple2.js> </script>
HTMLはスクリプトに遭遇するときに実行されるため、スクリプトがHTMLスクリプトでコンテンツを使用する必要がある場合、通常は対応するHTMLスクリプトにスクリプトを配置する必要がありますが、HTML5では、同じ目的をDeFerで達成できます。財産。
ブラウザがスクリプト要素を遭遇すると、デフォルトの動作は、スクリプトの読み込みと実行中に処理ページを一時停止することであり、各スクリプト要素が順番に実行されます。 Async属性は、ブラウザのHTMLドキュメントを適切に使用すると、非同期の読み込みと実行される可能性があります。
<スクリプトasync src = simple2.js> </script>NoScript要素
NoScript要素は、JavaScriptまたはブラウザがJavaScriptをサポートしていないユーザーにいくつかのコンテンツを表示するために使用されます。
<NoScript> <H1> JavaScriptが必要です</h1> <p> JavaScriptでこのページを使用できません</p> </noscript>
別の選択肢は、ブラウザがJavaScriptをサポートしていない場合、別のURLに導くことです。
<noscript> <meta http-equiv = refresh content = 0;