HTML Web ページのヘッダーコード例の詳細な説明-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-09 16:15:03

オリジナル

3277 人が閲覧しました

HTML では、通常、この部分を Web ページの先頭と呼びます。ヘッド部分の内容はページには表示されませんが、検索エンジンによる Web ページの包含や並べ替え、また Web ページのさまざまなグローバル設定に影響を与える可能性があるため、非常に重要であると言えます

。知識ポイント 1: ヘッド情報に Web ページのベース URL を設定する本質は、ハイパーリンクの属性を統一的に設定することです。ベース URL タグは、href と _target の 2 つの属性を持ちます。 href はベース URL のパスを設定するために使用され、_target はハイパーリンクの開始方法を設定するために使用されます。

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

コードは次のとおりです:

<html> 
<head> 
<title>基底网址的设置</title> 
<base href="<a href="http://www.php.cn">http://www.php.cn/;/a>" _target="_blank" /> 
</head> 
<body> 
</body> 
</html>

ログイン後にコピー

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

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

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

metaタグの属性は、ページ説明属性(name)とhttpタイトル情報(http-equiv)の2種類に分かれます。

name属性

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

<1>キーワード。つまり、キーワードは Web ページに含まれるキーワードやその他の情報を説明するために使用され、それによって検索エンジンによって検索される可能性が高まります。記述形式はであり、content属性の値はユーザーが設定した特定のキーワードになります。（通常、キーワードは英語の半角カンマで区切って複数設定できます。検索エンジンではキーワードの数に制限があるため、キーワードの内容は簡潔にまとめてください）

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

<3>著者。作成者。Web サイト作成者の名前を設定するために使用され、より専門的な Web サイトでよく使用されます。形式は

<4>ジェネレーターです。ジェネレーターは、Web サイト編集ツールの名前を設定するために使用され、より専門的な Web サイトのページでよく使用されます。

<5>ロボットの形式をとります。ボット。ページの検索方法を制限するために使用されます。検索エンジンの検索ロボットは継続的に情報を取得し、Web ページ上のリンク (http リンクや src リンクなど) に沿って独自のデータベースを構築します。このメタタグにより、一部のコンテンツが検索エンジンによって検出されるのを制限し、一部の情報の開示を減らすことができます。記述形式は、<メタネーム="ロボット" コンテンツ="コマンドの組み合わせ"> となります。この属性の値には、index、noindex、follow、nofollow の 4 つのコマンドが含まれており、その配置と組み合わせにより 4 つの組み合わせがあります。 Index と follow の組み合わせを all と呼ぶこともできますし、noindex と nofollow を none と呼ぶこともできます。

http-equiv 属性

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

<1>content-type、コンテンツカテゴリ。ページのカテゴリと言語文字セットを設定するために使用されます。記述形式、content 属性の値はページが HTML コードで出力されることを表し、文字セットは gb2312 (簡体字中国語) です。国際的なウェブサイト開発の場合、文字を統一するために、文字セットに utf-8 を使用することをお勧めします。

<2>更新。 Refresh は、Web ページが自動的に更新される時間を設定するか、一定期間内に他のページに自動的にジャンプするかを設定するために使用されます。は、更新間隔を 1 回意味します。 2 番目の書き込み形式はで、ページは 30 秒後に自動的に www.google にジャンプします。 .comウェブサイト

<3>expires，中文意思为“到期”，用于设置页面到期时间。一旦网页过期，必须到服务器上重新调用网页。第一种编写格式为，content值代表网页过期的时间，必须使用GMT时间格式。第二种编写格式为，表示多少秒后过期。

<4>cache-control，缓存控制。用于禁止在缓存中调用网页，编写格式为，no-cache代表不允许缓存。

<5>set-cookie，设置cookie，用于设置本页面cookie多久过期，编写格式为，代表到这个时间，cookie将被删除。

知识点三：头部信息实现与CSS及JavaScript混编

CSS负责HTML网页的样式，JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。
<1>加入CSS只需在头部信息中加入标签对。范例代码如下

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
</head> 
<body> 
</body> 
</html>

ログイン後にコピー

<2>加入JavaScript只需要在头部信息中加入标签对。范例代码如下：

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
<script type=“text/javascript”> 
JavaScript具体内容 
</script> 
</head> 
<body> 
</body> 
</html>

ログイン後にコピー

知识点四：常用头部信息功能推荐

<1>页面切换特效，其中一种特效的编写格式如下：

代码如下:

<meta http-equiv=“page-enter” content=“blendtrans（duration=0.5）”/>

ログイン後にコピー

http-equiv属性的值为page-enter时表进入该页面时启用特效，http-equiv属性的值为page-exit时代表退出（离开）该页面时启用特效。

Content属性的值代表特效的种类，这种特效也叫动态滤镜。滤镜种类很多，比如blendtrans就是很常见得一种，效果为淡入淡出，duration值表示效果持续的时间（单位为秒）。

另一种滤镜特效编写格式如下：

代码如下:

<meta http-equiv=“page-enter” content=“revealTrans（duration=6）”/>

ログイン後にコピー

动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间（单位为秒），Transition是滤镜类型，表示想使用哪种特效，取值为0~23。

<2>强制页面在当前窗口以独立页面显示，可以防止网页被其他网站框架，编写格式如下：

代码如下:

<meta http-equiv="window-target" content=“_top">

ログイン後にコピー

<3>页面图标设置，编写格式如下：

代码如下:

<link rel="Shortcut Icon" href="/myicon.ico">

ログイン後にコピー

href属性的值是ico图标文件的路径，这里采用的是相对根目录路径

以上がHTML Web ページのヘッダーコード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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