HTML ページ ヘッダー コード例の詳細な説明

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定する

ベース URL の本質は、ハイパーリンクの属性を均一に設定することです。ベース URL タグは </base> で、href と _target の 2 つの属性があります。 href はベース URL のパスを設定するために使用され、_target はハイパーリンクを開く方法を設定するために使用されます。

ベース URL を追加すると、ページ内のすべての相対 Web サイト ルート ディレクトリ アドレスを絶対アドレスに変換できます。ブラウザがページを参照すると、相対的な Web サイトとディレクトリ アドレスが <base> タグを通じてベース URL パスに追加され、絶対アドレスに変換されます。まず、base.htm を作成し、次のように HTML コードを記述します。


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<title>ベース URL 設定</title>
<base href="<a href="https://www.jb51.net">https://www.jb51.net</a>" _target="_blank" />
</head>
<本文>
</本文>
</html>

ベース URL は上記のコードを通じて設定されます。 Base.htm ページ内のすべてのハイパーリンクのアドレスの前には「https://www.jb51.net」が付きます。つまり、絶対アドレスに変換されます。さらに、ページ上のすべてのハイパーリンクが新しいウィンドウで開かれます。

知識ポイント2: ヘッダー情報のメタ情報タグ

メタ情報タグはヘッダー情報の基本タグであり、プロフェッショナルな Web ページ コードにはメタ情報の詳細な設定があります。メタ情報タグは </meta> という単一のタグです。 Meta 要素によって提供される情報は閲覧ユーザーには表示されず、通常はページ情報の名前、キーワード、作成者などを定義するために使用されます。 HTML ページでは、メタ タグにメタ コンテンツが含まれ、HTML ヘッド ページには複数のメタ要素が存在する場合があります。

メタ タグ属性には、ページ説明属性 (name) と http タイトル情報 (http-equiv) の 2 種類があります。

名前属性

name 属性は主に Web ページのコンテンツを説明するために使用され、検索エンジンの最適化にも使用されるため、習得する必要があります。検索エンジン(Google、Baidu など)が見つけて分類できるように、name 属性を正しく設定します。検索エンジンは通常、メタ値を自動的に探して Web ページを分類します。 name の値は次のとおりです。

<1>キーワード。つまり、キーワードは、Web ページに含まれるキーワードやその他の情報を説明するために使用され、検索エンジンによって検索される可能性が高まります。記述形式は<meta name="keywords" content = "keywords"/>で、content属性の値はユーザーが設定した特定のキーワードとなります。 (一般的には、カンマで区切って複数のキーワードを設定できます。検索エンジンではキーワードの数に制限があるため、キーワードの内容は簡潔にする必要があります。)

<2>説明。中国語の意味は「説明」で、Webページの主な内容やテーマなどを説明するために使用されます。適切な設定により、検索エンジンに見つかる可能性も高まります。形式は <meta name="description" content = "ページの説明"/> です。content 属性値は、ユーザーが設定したページの具体的な説明で、最大 1024 文字まで入力できますが、検索エンジンでは最初の約 175 文字しか表示されません。

<3>著者。著者: ウェブサイトの著者名を設定するために使用され、プロフェッショナルなウェブサイトでよく使用されます。形式は<meta name="author" content = "著者名"/>です。

<4>ジェネレータ。ウェブサイト編集ツールの名前を設定するために使用されるジェネレーターは、専門的なウェブサイトのページでよく使用されます。形式: <meta name="generator" content = "Webサイト編集ツール名"/>

<5>ロボット。ロボット。ページの検索方法を制限するために使用されます。検索エンジンの検索ロボットは、Web ページ上のリンク (http リンクや src リンクなど) に沿って継続的に情報を取得し、独自のデータベースを構築します。このメタタグにより、一部のコンテンツが検索エンジンによって検出されなくなり、一部の情報の公開性が低下する可能性があります。記述形式は<meta name="robots" content="command combination">です。この属性の値には、index、noindex、follow、nofollow の 4 つのコマンドが含まれます。順列と組み合わせにより、4 つの組み合わせが存在します。 Index と follow の組み合わせは all とも呼ばれ、noindex と nofollow は none とも呼ばれます。

http-equiv 属性

http-equiv属性の値は次のとおりです。

<1>コンテンツ タイプ、コンテンツ カテゴリ。ページのカテゴリと言語の文字セットを設定するために使用されます。記述形式は <meta http-equiv="content-type" context="text/html"; charset="gb2312"/> です。content 属性の値は、ページが HTML コードで出力されることを示し、文字セットは gb2312 (簡体字中国語) です。国際的な Web サイト開発では、文字を統一するために文字セットとして utf-8 を使用することをお勧めします。

<2>リフレッシュします。更新は、ウェブページが更新される時間、または一定時間後に自動的に他のページに移動する時間を設定するために使用されます。最初の形式 <meta http-equiv="refresh" context="30"/> は、30 秒ごとに更新することを意味します。2 番目の形式 <meta http-equiv="refresh" context="30;url=www.google.com"/> は、ページが 30 秒後に自動的に www.google.com に移動することを意味します。

<3>expires は中国語で「有効期限」を意味し、ページの有効期限を設定するために使用されます。 Web ページの有効期限が切れると、サーバーからコールバックされる必要があります。最初の形式は <meta http-equiv="expires" context="Wed,10 Mar 2011 12:00:00 GMT"/> です。コンテンツの値は Web ページの有効期限を表し、GMT の時間形式を使用する必要があります。 2 番目の記述形式は <meta http-equiv="expires" context="30"/> で、有効期限が何秒であるかを示します。

<4>キャッシュ制御、キャッシュ制御。キャッシュ内の Web ページの呼び出しを禁止するために使用されます。記述形式は <meta http-equiv="cache-control" context="no-cache"/> です。no-cache はキャッシュが許可されないことを意味します。

<5>set-cookie、set cookie、このページのクッキーの有効期限を設定するために使用されます。記述形式は <meta http-equiv="set-cookie" context="Wed,10 Mar 2011 12:00:00 GMT"/> で、これはクッキーがこの時点で削除されることを意味します。


知識ポイント3: ヘッダー情報の実装とCSSとJavaScriptの混在

CSS は HTML Web ページのスタイルを担当し、JavaScript は HTML Web ページの動的な動作を担当します。 CSS と JavaScript を組み合わせる最も一般的な方法は、それらをヘッダー情報に書き込むことです。
<1>CSS を追加するには、ヘッダー情報に <style type="text/css"></style> タグ ペアを追加するだけです。サンプルコードは次のとおりです

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<title>CSS 設定</title>
<スタイル タイプ="text/css">
CSS固有のコンテンツ
</スタイル>
</head>
<本文>
</本文>
</html>

<2>JavaScript を追加するには、ヘッダー情報に <script type="text/javascript"></script> タグ ペアを追加するだけです。サンプルコードは次のとおりです。


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<title>CSS 設定</title>
<スタイル タイプ="text/css">
CSS固有のコンテンツ
</スタイル>
<script type="text/javascript">
JavaScript 固有のコンテンツ
</スクリプト>
</head>
<本文>
</本文>
</html>

知識ポイント4: よく使われるヘッダー情報機能の推奨事項

<1> ページ切り替え効果。そのうちの 1 つは次の形式で記述されます。

コードをコピー
コードは次のとおりです。

<meta http-equiv="page-enter" content="blendtrans(duration=0.5)"/>

http-equiv 属性の値が page-enter の場合、ページに入るときに特殊効果が有効になることを意味します。http-equiv 属性の値が page-exit の場合、ページを終了する (離れる) ときに特殊効果が有効になることを意味します。

コンテンツ属性の値は特殊効果の種類を表し、動的フィルターとも呼ばれます。フィルターには多くの種類がありますが、その中でも最も一般的なのが blendtrans です。効果はフェードインとフェードアウトで、持続時間の値は効果が持続する時間 (秒単位) を示します。

別のフィルター効果の記述形式は次のとおりです。


コードをコピー
コードは次のとおりです。

<meta http-equiv="page-enter" content="revealTrans(duration=6)"/>

revealTrans 動的フィルターは、ページの入口と出口の効果にも使用できます。 Duration はフィルター効果の持続時間 (秒単位) を示し、Transition は使用する効果を示すフィルター タイプです。値の範囲は 0 ~ 23 です。

<2> 他のウェブサイトによってウェブページがフレーム化されるのを防ぐために、現在のウィンドウにページを独立したページとして表示するように強制します。記述形式は次のとおりです。

コードをコピー
コードは次のとおりです。

<meta http-equiv="ウィンドウターゲット" コンテンツ="_top">

<3>ページアイコンの設定、書き込み形式は次のとおりです。

コードをコピー
コードは次のとおりです。

<link rel="ショートカットアイコン" href="/myicon.ico">

href 属性の値は、ico アイコン ファイルのパスであり、相対ルート ディレクトリ パスです。

<<:  Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

>>:  CSS ボックスを中央揃えするためのよく使われるいくつかの方法 (要約)

推薦する

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

HTML でさまざまなスペースの特徴と表現を探る (推奨)

I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...

6ull が Linux ドライバ モジュールをロードできない問題の解決方法

目次0x01 ドライバーモジュールのロードに失敗しました0x02 ソリューション要約する0x01 ド...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...

MySQLの遅いクエリ問題の詳細な分析データ送信

例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...

Expressはログイン認証を実装

この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...

イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します

コマンドを実行します: docker run --name centos8 -d centos /b...

Vue でのテキストエリア適応高さソリューションの実装

目次隠れた問題適応高さのソリューションまず解決策を提示してください。Vueスタックが必要な学生はvu...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

yum の基本的な使い方と例(推奨)

yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...