HTMLヘッダー要素

HTML <head> 要素

<head> 要素は、すべての head 要素のコンテナです。 head要素タグの内容には、、<base>、<link>、<meta>、<script>、<style>が含まれます。表示される<title>タグの内容を除き、残りのタグの内容は非表示の情報となります。 </p><p><title> 要素タグはドキュメントのタイトルを定義します。 <br/><base> 要素タグ: ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのターゲットを指定します。 <br/><link>要素タグは、ドキュメントと外部リソース間の関係を定義します。スタイルシートを接続するために最も一般的に使用されます。 <br/><script> 要素タグは、JavaScript などのクライアント側のスクリプトを定義するために使用されます。 <br/><style> 要素タグは、HTML ドキュメントのスタイル情報を定義するために使用されます。 <br/><meta> タグは、作成者、日付と時刻、Web ページの説明、キーワード、ページの更新など、HTML Web ページドキュメントの非表示の情報を記述するために使用されます。メタは大きくHTTPヘッダー情報（http-equiv）とページ記述情報（name）に分かれます。ヘッダー情報には、ドキュメントタイプ、文字セット、言語などの情報と、Web ページを正しく表示するためのブラウザーの処理アクションが含まれます。コンテンツのキーワード、要約、作成者、ロボットの動作の定義などは、検索エンジンのインデックス作成のための情報を提供します。 (一部の検索エンジンは、メタ要素の name 属性と content 属性を使用してページのインデックスを作成します。) cheme="" 属性値を解釈するスキームに名前を付けます </p> http-equiv="" HTTP サーバーは、次のような HTTP 応答ヘッダーを収集します。この属性 -------------- <p> <br/>知識ポイント 1: 頭情報に Web ページのベース URL を設定する本質 <br/><br/><br/><br/>ハイパーリンクの属性を均一に設定することです。ベース URL タグは </base> で、これには href と _target の 2 つの属性があります。 href はベース URL のパスを設定するために使用され、_target はハイパーリンクの開始方法を設定するために使用されます。 <br/><p>ベース URL を追加すると、ページ内のすべての相対 Web サイトのルートアドレスを絶対アドレスに変換できます。ブラウザがページを閲覧すると、相対的な Web サイトとディレクトリのアドレスが <base> タグを通じてベース URL パスの後ろに追加され、絶対アドレスに変換されます。まず、base.htm を作成し、次のように HTML コードを記述します: </p><pre class="brush:php;toolbar:false"><html> <head> <title>基底网址的设置</title> <base href="<a href="http://www.php.cn">http://www.php.cn</a>" _target="_blank" /> </head> <body> </body> </html></pre><p><span style="line-height: 1.76em;"> 上記のコードを通じてベース URL を設定します。 Base.htm ページ内のハイパーリンクのアドレスの前には「http://www.php.cn」が付き、これは絶対アドレスに変換されます。さらに、ページ上のハイパーリンクは新しいウィンドウで開きます。 </span><br/></p><p><span style="font-size: 18px;"><strong>知識ポイント２：ヘッダー情報のメタ情報タグ</strong></span></p><p>メタ情報タグは、ヘッダー情報の基本的なタグであり、プロのWebページコードにはメタ情報の詳細な設定があります。メタ情報タグは </meta> であり、単一のタグです。 Meta 要素によって提供される情報は閲覧ユーザーには見えず、通常はページ情報の名前、キーワード、作成者などを定義するために使用されます。 HTML ページでは、メタタグにメタコンテンツが含まれており、HTML ヘッダーページには複数のメタ要素が存在する場合があります。 </p><p>metaタグの属性は、ページ説明属性(name)とhttpタイトル情報(http-equiv)の2種類に分かれます。 </p><p><strong>name属性</strong></p><p> name属性は主にWebページのコンテンツを記述するために使用され、検索エンジンの最適化に使用されるため、習得する必要があります。検索エンジン (Google や Baidu など) の検索ロボットが Web ページを検索して分類できるように、name 属性を正しく設定します。通常、検索エンジンは Web ページを分類するためのメタ値を自動的に見つけます。 name の値は次のとおりです: </p><p><1>キーワード。つまり、キーワードは Web ページに含まれるキーワードやその他の情報を説明するために使用され、それによって検索エンジンによって検索される可能性が高まります。記述形式は<meta name="keywords" content = "keywords"/>であり、content属性の値はユーザーが設定した特定のキーワードになります。（通常、キーワードは英語の半角カンマで区切って複数設定できます。検索エンジンではキーワードの数に制限があるため、キーワードの内容は簡潔にまとめてください） </p><p><2>説明。中国語で「説明」を意味し、Web ページの主なコンテンツやテーマなどを説明するために使用されます。適切な設定により、検索エンジンで検索される可能性も高まります。形式は <meta name="description" content = "ページの説明"/> です。content 属性値は、ユーザーが設定したページの具体的な説明です。最大 1024 文字まで入力できます。エンジンはページの前半約 175 文字のみを表示します。 </p><p><3>著者。作成者。Web サイト作成者の名前を設定するために使用され、より専門的な Web サイトでよく使用されます。形式は <meta name="著者" content ="著者名"/></p><p><strong>http-equiv 属性</strong></p><p> http-equiv 属性の値は次のとおりです:</p><p><1>content-type、コンテンツカテゴリ。ページのカテゴリと言語文字セットを設定するために使用されます。記述形式 <meta http-equiv="content-type" context="text/html"/> 、content 属性の値はページが HTML コードで出力されることを表し、文字セットは gb2312 (簡体字中国語) です。国際的なウェブサイト開発の場合、文字を統一するために、文字セットに utf-8 を使用することをお勧めします。</p><p><2>更新。 Refresh は、Web ページが自動的に更新される時間を設定するか、一定期間内に他のページに自動的にジャンプするかを設定するために使用されます。<meta http-equiv="refresh" context="30"/> は、更新間隔を 1 回意味します。 2 番目の書き込み形式は <meta http-equiv="refresh" context="30; url=www.google.com"/> で、ページは 30 秒後に自動的に www.google にジャンプします。 .com Web サイト </p><p><span style="font-size: 18px;"><strong>知識ポイント 3: CSS と JavaScript を組み合わせたヘッダー情報 </strong></span></p><p>CSS は HTML Web ページのスタイルを担当し、JaveScript は HTML Web ページの動的な動作を担当します。 CSS と JavaScript を統合する最も一般的な方法は、ヘッダー情報を記述することです。 <br/><1>CSS を追加するには、ヘッダー情報に <style type="text/css"></style> タグのペアを追加するだけです。サンプルコードは次のとおりです <br/><span style="line-height: 1.76em;"></span></p><pre class="brush:php;toolbar:false"><html> <head> <title>CSS的设置</title> <style type=“text/css”> CSS具体内容 </style> </head> <body> </body> </html></pre><p><span style="line-height: 1.76em;"><2>JavaScript を追加するには、ヘッダー情報に <script type="text/javascript"></script> タグペアを追加するだけです。。サンプルコードは次のとおりです。 </div> </div> <a class="course-btn course_code_header_next" href="https://www.php.cn/ja">学び続ける</a> </div> <div class="layui-col-md6 editor-box" > <div id="code_spread_shrink"> <div id="code_spread_shrink_show" unselectable="on"><span>|| </span></div> </div> <div class="editor-tab js-editor-tab"> <div class="editor-left icon-left editor-op"></div> <div class="editor-view"> <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"> <li class="ui-tabs-active"> <a href="javascript:;">新しいファイル</a> </li> </ul> </div> <div class="editor-right icon-right editor-op"></div> </div> <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Ståle Refsnes"> <meta charset="UTF-8"> </head> <body> <p>本文档的 meta 属性描述了该文档和它的关键词。</p> </body> </html> </div> <div class="editor-btn"><div class="editor-btn-inner"><a href="javascript:;" class="code-btn-submit" id="J_Commit" title="提出する">提出する</a><a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="リセットコード">リセットコード</a><div class="aotorun" style="display: block;"><input type="checkbox" id="aotoruncheck" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です"><label for="aotoruncheck" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です">自動運転</label></div></div></div> </div> <div class="layui-col-md3" id="viewPort-content"></div>  </div> </div> <div class="phpSyyBox"> <div class="phpSyyLeft"> <div class="phpSyySyj"> <span class="right"><a href="https://www.php.cn/ja/code/438.html" title="HTMLリンク"><b class="icon3"></b>前のセクション</a></span> <em></em> <span class="right"><a href="https://www.php.cn/ja/code/452.html" title="HTML CSS"><b class="icon2"></b>次のセクション</a></span> </div> <div class="phpSyyQhlx"><a href="https://www.php.cn/ja/course.html" target="_blank" title="チュートリアルリスト"><b></b>チュートリアルリスト</a></div> <div class="phpSyyHqbz"><a href="https://www.php.cn/ja/wenda.html" target="_blank" title="ヘルプの取得"><b></b>ヘルプの取得</a></div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="layui-main"> <div class="layui-row"> <div class="layui-col-md9"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">おすすめコース</li> <li id="code_down_li">コースウェアのダウンロード</li> </ul> <div class="layui-tab-content">  <div class="layui-tab-item layui-show"> <ul class="diy-vodeo diy-li-left php-video-ul"> <li> <a href='https://www.php.cn/ja/course/8.html' title="html/cssクイックスタート" > <img alt="html/cssクイックスタート" src="https://img.php.cn/upload/course/000/000/068/625908118aa86152.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>html/cssクイックスタート</h3> </div> <div class="php-course-bottom"> <span class="l">20029 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1441.html' title="HTML+CSS クイックスタート" > <img alt="HTML+CSS クイックスタート" src="https://img.php.cn/upload/course/000/000/068/62ea1e8b3c8e0915.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS クイックスタート</h3> </div> <div class="php-course-bottom"> <span class="l">4233 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1451.html' title="HTML+CSS+JavaScript フロントエンド開発を基礎ゼロでクイックスタート" > <img alt="HTML+CSS+JavaScript フロントエンド開発を基礎ゼロでクイックスタート" src="https://img.php.cn/upload/course/000/000/068/62f9e448f3122851.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS+JavaScript フロントエンド開発を基礎ゼロでクイックスタート</h3> </div> <div class="php-course-bottom"> <span class="l">16886 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1022.html' title="HTML+CSS Web ページの基本" > <img alt="HTML+CSS Web ページの基本" src="https://img.php.cn/upload/course/000/000/068/6256990bbf04e971.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS Web ページの基本</h3> </div> <div class="php-course-bottom"> <span class="l">18931 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1047.html' title="HTML+CSSの基礎知識" > <img alt="HTML+CSSの基礎知識" src="https://img.php.cn/upload/course/000/000/010/5cbd225e3a348614.jpeg" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSSの基礎知識</h3> </div> <div class="php-course-bottom"> <span class="l">22276 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/11.html' title="HTML+CSS 簡単入門チュートリアル" > <img alt="HTML+CSS 簡単入門チュートリアル" src="https://img.php.cn/upload/course/000/000/068/6253eb19a38f5133.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS 簡単入門チュートリアル</h3> </div> <div class="php-course-bottom"> <span class="l">21235 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/12.html' title="HTML+CSS基礎入門チュートリアル" > <img alt="HTML+CSS基礎入門チュートリアル" src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS基礎入門チュートリアル</h3> </div> <div class="php-course-bottom"> <span class="l">82551 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1056.html' title="HTML+CSS の簡単な紹介" > <img alt="HTML+CSS の簡単な紹介" src="https://img.php.cn/upload/course/000/000/067/64be2dec04de7806.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSS の簡単な紹介</h3> </div> <div class="php-course-bottom"> <span class="l">17845 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1566.html' title="HTML+CSSの基礎と実践" > <img alt="HTML+CSSの基礎と実践" src="https://img.php.cn/upload/course/000/000/067/6497af87c2a31936.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSSの基礎と実践</h3> </div> <div class="php-course-bottom"> <span class="l">2947 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/210.html' title="2016年度新カリキュラムシステムhtml+css動画" > <img alt="2016年度新カリキュラムシステムhtml+css動画" src="https://img.php.cn/upload/course/000/000/068/625686f8a1bca597.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>2016年度新カリキュラムシステムhtml+css動画</h3> </div> <div class="php-course-bottom"> <span class="l">17475 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/1033.html' title="HTML+CSS+PHP を始めましょう" > <img alt="HTML+CSS+PHP を始めましょう" src="https://img.php.cn/upload/course/000/000/067/64be2bcc4c3bf736.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>中級</i>HTML+CSS+PHP を始めましょう</h3> </div> <div class="php-course-bottom"> <span class="l">31087 人が視聴しています</span> </div> </a> </li> <li> <a href='https://www.php.cn/ja/course/10.html' title="HTML+CSSをすぐに学べます" > <img alt="HTML+CSSをすぐに学べます" src="https://img.php.cn/upload/course/000/000/068/6253e1723d354580.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>初級</i>HTML+CSSをすぐに学べます</h3> </div> <div class="php-course-bottom"> <span class="l">37076 人が視聴しています</span> </div> </a> </li> </ul> </div> <div class="layui-tab-item"> <div id="code_down" style="margin: 0 30px 26px;"> <div class="no_data" style="text-align: center;min-height: 490px;line-height:112px;padding: 190px 0;box-sizing: border-box;color: #e3e3e3;font-size: 20px;"><div style="background: url(/static/images/lesson_video_lists.png) no-repeat;margin-right: 20px;width: 118px;height: 112px;background-position: 0 -389px;float:left;"></div> 現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜</div> </ul> </div> </div> </div> </div> </div> <div class="layui-col-md3 video-right-course"> <div class="layui-col-md12 title" > <p>このコースを視聴した生徒はこちらも学んでいます</p> </div> <div class="layui-col-md12 php-video-img" > <a class="recommend" href="https://www.php.cn/ja/course/812.html" target="_blank"><img width='300' height='160' src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"><span class="font14"> 494423 回再生</span></a> </div> <div class="layui-col-md12 php-video-list" > <ul> <li><a class="font14 color66" title="PHP でビジネスを始めることについて簡単に説明しましょう" href="https://www.php.cn/ja/course/1503.html" target="_blank">PHP でビジネスを始めることについて簡単に説明しましょう</a></li> <li><a class="font14 color66" title="Web フロントエンド開発の簡単な紹介" href="https://www.php.cn/ja/course/901.html" target="_blank">Web フロントエンド開発の簡単な紹介</a></li> <li><a class="font14 color66" title="恥ずかしいことの百科事典サイトを模倣したミニ版MVCフレームワークの大規模実践天龍宝開発" href="https://www.php.cn/ja/course/836.html" target="_blank">恥ずかしいことの百科事典サイトを模倣したミニ版MVCフレームワークの大規模実践天龍宝開発</a></li> <li><a class="font14 color66" title="PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]" href="https://www.php.cn/ja/course/902.html" target="_blank">PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]</a></li> <li><a class="font14 color66" title="ログイン認証と従来の掲示板" href="https://www.php.cn/ja/course/866.html" target="_blank">ログイン認証と従来の掲示板</a></li> <li><a class="font14 color66" title="コンピュータネットワークの知識収集" href="https://www.php.cn/ja/course/1463.html" target="_blank">コンピュータネットワークの知識収集</a></li> <li><a class="font14 color66" title="クイックスタート Node.JS フルバージョン" href="https://www.php.cn/ja/course/1462.html" target="_blank">クイックスタート Node.JS フルバージョン</a></li> <li><a class="font14 color66" title="あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]" href="https://www.php.cn/ja/course/1455.html" target="_blank">あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]</a></li> <li><a class="font14 color66" title="独自の PHP MVC フレームワークを作成する (40 章の詳細/詳細/初心者が先に進むには必読)" href="https://www.php.cn/ja/course/1467.html" target="_blank">独自の PHP MVC フレームワークを作成する (40 章の詳細/詳細/初心者が先に進むには必読)</a></li> </ul> </div> </div> </div> </div> <div class="phpcn-modal-layer fixed" style="z-index:9004;visibility:visible;opacity:1;display:none;"> <div class="phpcn-modal-title"> <div class="phpcn-modal-draggable dragging"> <span>注</span> <a href="javascript:void(0)" class="phpcn-icon-close phpcn-modal-close js-modal-close">X</a> </div> </div> <div class="phpcn-modal-inner"> <div class="phpcn-modal-dialog"> </div> </div> </div> <script id="noteTpl" type="text/html"> <div class="note-pop"> <div id="js-note-input-fake" class="textarea-wrap"> <textarea data-maxlength="1000" id="js-note-textarea" class="js-placeholder" name="" placeholder="内容を入力してください"></textarea> <p class="note-text-counter"><span id="js-note-limit">0</span>/1000</p> </div> <div class="publish-note-btns input-btm clearfix"> <div class="verify-code clearfix"></div> <input type="button" value="保存＃ホゾン＃" id="js-note-submit" class="phpcn-btn phpcn-btn-green r" data-media_id="443"/> </div> <a style="margin:30px 0 40px;float:right;color:red;border:1px solid red;padding:5px 10px;" href="/login" target="_blank">私のメモを見る</a> </div> </script> <script id="askTpl" type="text/html"> <div class="qa-pop"> <div class="question-area"> <div class="qa-control qa-ipt-title"> <input type="text" id="js-qa-title" maxlength="255" class="js-placeholder autocomplete" placeholder="質問のタイトルを入力してください"/> </div> </div> <div class="qa-control-wrap clearfix"> <div class="qa-control"> <div class="rich-text-editor" id="container"></div> </div> </div> <div id="js-discuss-btm" class="discuss-bottom input-btm clearfix pop-footer"> <div class="verify-code clearfix"> <input type="text" maxlength="4" class="verify-code-ipt" placeholder="確認コードを入力してください"/> <img class="verify-img-wrap js-verify-refresh" onclick="refreshVerify(this)" src="/captcha.html"> <a class="icon-refresh js-verify-refresh" hidefocus="true" title="リフレッシュ" href="javascript:refreshVerify('.js-verify-refresh')">リフレッシュ</a> <span class="errtip"></span> </div> <input id="js-discuss-submit" class="r phpcn-btn phpcn-btn-green" type="button" value="リリース"/> </div> </div> </script> <script>isSpaceExe=true;</script> <script src="/static/ueditor/ueditor.config.js"></script> <script src="/static/ueditor/ueditor.user.all.js"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <script src="/static/src-min-noconflict/ace.js"></script> <script>learn = "443";</script> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744660943"></script> <script>$('.ylwTopBox').hover(function() { $(this).find('.ylwTopSub').show(); },function(){ $(this).find('.ylwTopSub').hide(); });</script> </body> </html>