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="//m.sbmmt.com">//m.sbmmt.com</a>" _target="_blank" />
</head>
<body>
</body>
</html></pre><p><span style="line-height: 1.76em;"> 上記のコードを通じてベース URL を設定します。 Base.htm ページ内のハイパーリンクのアドレスの前には「//m.sbmmt.com」が付き、これは絶対アドレスに変換されます。さらに、ページ上のハイパーリンクは新しいウィンドウで開きます。 </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 class="editorplayL_next">
<a href="//m.sbmmt.com/global/ja/code/452.html">学び続ける</a>
</div>
</div>
<div class="editorplayM js-editor-tab">
<div class="editor-right icon-right editor-op"></div>
<div class="editorplayM_top editor-view ">
<span class="ui-tabs-active">新しいファイル</span>
</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-right icon-right editor-op"></div>
<div class="editorplayM_button">
<a href="javascript:;" id="J_EditorReset" title="リセットコード">リセットコード</a>
<div>
<div>
<input type="checkbox" id="aotoruncheck" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です">
<span>自動運転</span>
</div>
<a href="javascript:;" id="J_Commit">提出する</a>
</div>
</div>
</div>
<div class="editorplayR">
<div class="m_editormain12main_top">
<img src="/static/imghwm/logo.png" alt="logo" />
<a href="javascript:;" title="" id="editorplayR_close">
<i class="layui-icon layui-icon-close"></i>
</a>
</div>
<div class="editorplayR_top">
<span>プレビュー</span>
<a href="javascript:;">Clear</a>
</div>
<div class="layui-col-md3" id="viewPort-content"></div>
</div>
</div>
<div class="videoplay_info">
<a href="//m.sbmmt.com/global/ja/code/438.html">
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangyijie"></use>
</svg>
</div>
<span>前のセクション</span>
</a>
<a href="//m.sbmmt.com/global/ja/code/452.html">
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiayijie"></use>
</svg>
</div>
<span>次のセクション</span>
</a>
<a href="//m.sbmmt.com/global/ja/course.html">
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiahao"></use>
</svg>
</div>
<span>チュートリアルリスト</span>
</a>
<a href="//m.sbmmt.com/global/ja/wenda.html">
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenhao"></use>
</svg>
</div>
<span>ヘルプの取得</span>
</a>
</div>
</div>
<div class="videoplay_buttom">
<div>
<div class="videoplay_buttomL">
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">おすすめコース</li>
<li id="studydownload">コースウェアのダウンロード</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="studylistmain2M">
<div class="studylistmain2Ms">
<span>¥ 99</span>
<a href="//m.sbmmt.com/global/ja/course/1441.html"><img src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/course/000/000/068/62ea1e8b3c8e0915.png" alt="HTML+CSS クイックスタート" /></a>
<div>
<a href="//m.sbmmt.com/global/ja/course/1441.html"><span class="level1">初級</span>HTML+CSS クイックスタート</a>
<div>
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing-"></use>
</svg>
<span>4654</span>
</div>
<a href="javascript:;" class="courseICollection" data-id="1441">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star1.png" alt="コレクション" />
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star2.png" alt="コレクション" />
</a>
</div>
</div>
</div>
<div class="studylistmain2Ms">
<span>無料</span>
<a href="//m.sbmmt.com/global/ja/course/8.html"><img src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/course/000/000/068/625908118aa86152.png" alt="html/cssクイックスタート" /></a>
<div>
<a href="//m.sbmmt.com/global/ja/course/8.html"><span class="level1">初級</span>html/cssクイックスタート</a>
<div>
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing-"></use>
</svg>
<span>20601</span>
</div>
<a href="javascript:;" class="courseICollection" data-id="8">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star1.png" alt="コレクション" />
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star2.png" alt="コレクション" />
</a>
</div>
</div>
</div>
<div class="studylistmain2Ms">
<span>無料</span>
<a href="//m.sbmmt.com/global/ja/course/1451.html"><img src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/course/000/000/068/62f9e448f3122851.png" alt="HTML+CSS+JavaScript フロントエンド開発を基礎ゼロでクイックスタート" /></a>
<div>
<a href="//m.sbmmt.com/global/ja/course/1451.html"><span class="level1">初級</span>HTML+CSS+JavaScript フロントエンド開発を基礎ゼロでクイックスタート</a>
<div>
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing-"></use>
</svg>
<span>17447</span>
</div>
<a href="javascript:;" class="courseICollection" data-id="1451">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star1.png" alt="コレクション" />
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star2.png" alt="コレクション" />
</a>
</div>
</div>
</div>
<div class="studylistmain2Ms">
<span>無料</span>
<a href="//m.sbmmt.com/global/ja/course/1047.html"><img src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/course/000/000/010/5cbd225e3a348614.jpeg" alt="HTML+CSSの基礎知識" /></a>
<div>
<a href="//m.sbmmt.com/global/ja/course/1047.html"><span class="level1">初級</span>HTML+CSSの基礎知識</a>
<div>
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing-"></use>
</svg>
<span>22881</span>
</div>
<a href="javascript:;" class="courseICollection" data-id="1047">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star1.png" alt="コレクション" />
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/index2_star2.png" alt="コレクション" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="studydatadown_nothing">
<img src="/static/imghw/studydatadown_nothing.png" alt="" />
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 </div>
</div>
</div>
</div>
</div>
<div class="videoplay_buttomR">
<div class="phpmain1_2_top">
<span class="phpmain1_2_top_title">このコースを視聴した生徒はこちらも学んでいます</span>
</div>
<div class="videoplay_buttomRM">
<div class="videoplay_buttomRM_top">
<a href="//m.sbmmt.com/global/ja/course/812.html"><img class="lazy" data-src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" src="/static/imghw/default1.png" onerror="this.onerror='';this.src='/static/imghw/default1.png'" alt="" /></a>
<div>
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing"></use>
</svg>
<span>496451</span>
</div>
<a href="javascript:;" class="courseICollection" data-id="812">
<div class="icon_f">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-star"></use>
</svg>
<svg class="icon activeicon" aria-hidden="true">
<use xlink:href="#icon-star__easyico-copy-copy"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="videoplay_buttomRM_m">
<a href="//m.sbmmt.com/global/ja/course/1503.html">PHP でビジネスを始めることについて簡単に説明しましょう</a>
<a href="//m.sbmmt.com/global/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a>
<a href="//m.sbmmt.com/global/ja/course/836.html">恥ずかしいことの百科事典サイトを模倣したミニ版MVCフレームワークの大規模実践天龍宝開発</a>
<a href="//m.sbmmt.com/global/ja/course/902.html">PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]</a>
<a href="//m.sbmmt.com/global/ja/course/866.html">ログイン認証と従来の掲示板</a>
<a href="//m.sbmmt.com/global/ja/course/1463.html">コンピュータネットワークの知識収集</a>
<a href="//m.sbmmt.com/global/ja/course/1462.html">クイックスタート Node.JS フルバージョン</a>
<a href="//m.sbmmt.com/global/ja/course/1455.html">あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]</a>
<a href="//m.sbmmt.com/global/ja/course/1467.html">独自の PHP MVC フレームワークを作成する (40 章の詳細/詳細/初心者が先に進むには必読)</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img class="lazy" src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p>
</div>
<div class="footermid">
<a href="//m.sbmmt.com/global/ja/about/us.html">私たちについて</a>
<a href="//m.sbmmt.com/global/ja/about/disclaimer.html">免責事項</a>
<a href="//m.sbmmt.com/global/ja/new/">最近の更新</a>
<a href="//m.sbmmt.com/global/ja/new/">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
<script>
layui.use(function() {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function(type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function(type) {
layer.closeAll("tips");
},
},
});
});
document.getElementById("lan1sp").addEventListener("click", function(event) {
event.preventDefault();
var elements = document.getElementsByClassName("m_menu");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "block";
}
});
document.getElementById("m_editormain12main_topi_sp").addEventListener("click", function(event) {
event.preventDefault();
var elements = document.getElementsByClassName("m_menu");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
});
document.getElementById("lan1").addEventListener("click", function(event) {
event.preventDefault();
var elements = document.getElementsByClassName("m_menu_lang");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "block";
}
});
document.getElementById("m_editormain12main_topi_lan").addEventListener("click", function(event) {
event.preventDefault();
var elements = document.getElementsByClassName("m_menu_lang");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
});
$(document).ready(function() {
$("#Submitbutton").click(function(e) {
e.preventDefault();
$(".editorplayR").addClass("active");
});
$("#editorplayR_close").click(function(e) {
e.preventDefault();
$(".editorplayR").removeClass("active");
});
});
</script>
</body>
</html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9bd5a2aa4b375585',t:'MTc2ODMxNTA4Ng=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8c758bee214b4fe0858e454e5edf6f97","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
