ホームページ >ウェブフロントエンド >htmlチュートリアル >ヘッドタグとは何ですか? HTMLのheadタグの紹介

ヘッドタグとは何ですか? HTMLのheadタグの紹介

不言
不言オリジナル
2018-08-13 17:50:004256ブラウズ

この記事の内容は、headタグとは何か? HTML での head タグの導入は、参考にしていただければ幸いです。

head タグとは何ですか?

head タグは 要素の内容です。ブラウザに表示できる 要素のコンテンツとは異なり、head のコンテンツはブラウザに表示されません。その機能は、ページの一部のメタデータを含むことです。以下の例では、head にはほとんどコンテンツがありません。

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
  • メタデータは、データを説明するデータです。

title

要素は、HTMLドキュメント全体の一般的な内容を表すために使用されます。<p>要素< title> これは他の方法でも使用されます (Firefox では [ブックマーク] > [このページをブックマーク])、<title> の内容がブックマークの候補として表示されます。 ;meta><br></p>メタデータはデータを説明するデータであり、HTML にはドキュメントにメタデータを追加する「公式」の方法があります。もちろん、この記事で説明した他の要素も考慮できます。メタデータ。 ページの <head> 要素にはさまざまな種類の <meta> 要素を含めることができますが、混乱を招くだけなので、ここではそのすべてを説明しません。 <h2><pre class="brush:php;toolbar:false"><meta charset="utf-8"></pre></h2> <p></p> この要素は、ドキュメントの文字エンコーディング、つまりこのドキュメントで使用できる文字セットを指定するだけです。 utf-8<ul class=" list-paddingleft-2"> は、人間の言語のほとんどの文字を含むユニバーサル文字セットです。 これは、Web ページを任意の言語で表示できることを意味します。多くの <meta><li> 要素には、name 属性と content 属性が含まれており、要素に含まれる情報の種類を指定します。 <p>content は実際のメタデータの内容を指定します。 <br>これら 2 つのメタ要素は、ページの作成者を定義し、ページのコンテンツの説明を提供するのに役立ちます。 <br></p> <pre class="brush:php;toolbar:false"><meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications."></pre> </li> </ul>作成者を指定すると、ページのコンテンツについて質問するためにページの作成者に連絡する必要がある場合など、特定の状況で役立つことがあります。 <p> 一部のコンテンツ管理システムでは、ページ作成者の情報を自動的に取得し、それを特定の目的に使用できます。 <br> ページ コンテンツに関するキーワードを含むページ コンテンツの説明を指定すると、検索エンジンの関連検索でページがより多く表示される可能性があるため便利です (これらの動作は <br> 検索エンジン最適化 、または SEO と呼ばれます)</p> <ul class=" list-paddingleft-2"> <li> <p>サイトにカスタム アイコンを追加します<br></p> <pre class="brush:php;toolbar:false"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> <br> HTML に CSS と JavaScript を適用します<br><pre class="brush:php;toolbar:false"><link rel="stylesheet" href="my-css-file.css"></pre> </li> </ul> <link> 要素はドキュメントの先頭に配置されることが多く、2 つの属性があります。rel="stylesheet" はこれを示します。はドキュメントのスタイル シートであり、<h2> href にはスタイル シート ファイルへのパスが含まれます。 </h2> <h2></h2> <pre class="brush:php;toolbar:false"><script src="my-js-file.js"></script></pre> <ul class=" list-paddingleft-2"><li><p><script> 部分はドキュメントの先頭に配置する必要はありません。実際には、ドキュメントの最後 (</body> タグの前) に配置することをお勧めします。 <br> , これにより、スクリプトをロードする前にブラウザが HTML コンテンツを解析したことが保証されます (スクリプトが存在しない要素をロードした場合、ブラウザはエラーを報告します)。 </p></li></ul> <ul class=" list-paddingleft-2">ドキュメントのメイン言語を設定します<li> <pre class="brush:php;toolbar:false"><html lang="en-US"></pre> <p><br></p>これはさまざまな方法で便利です。 HTML ドキュメントの言語が適切に設定されている場合 (言語固有の結果で正しく表示できるようにするなど)、HTML ドキュメントは検索エンジンによってより効率的にインデックス付けされます </li> スクリーン リーダーを使用して閲覧している人にとっても便利です障害のある人 (たとえば、</ul> 「シックス」という単語はフランス語と英語の両方に存在しますが、発音はまったく異なります)。 <h2></h2> <ul class=" list-paddingleft-2"><li>関連する推奨事項: <p><br><br>Html5 での video タグの使用: 親 div タグを自動的に入力する方法</p> </li></ul> <p class="post-topheader custom- pt0"> HTML 送信ボタンのタグ コードとその使用方法とは何ですか? (例) </p> <p class="post-topheader custom- pt0"><a href="http://www.php.cn/html5-tutorial-407893.html" target="_blank" title="Html5中video标签的用法:如何自动填充满父div标签"></a>HTMLページにフレンドリーリンクを追加するにはどうすればよいですか? (コード例)</p> <p class="post-topheader custom- pt0"></p><p>以上がヘッドタグとは何ですか? HTMLのheadタグの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="HTML 送信ボタンのラベル コードとその使用方法は何ですか? (例)" href="https://m.php.cn/ja/faq/408203.html">HTML 送信ボタンのラベル コードとその使用方法は何ですか? (例)</a></span><span>次の記事:<a class="dBlack" title="HTML 送信ボタンのラベル コードとその使用方法は何ですか? (例)" href="https://m.php.cn/ja/faq/408215.html">HTML 送信ボタンのラベル コードとその使用方法は何ですか? (例)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- 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 --></html>