この記事の内容は、head タグにはどのような属性があるのかについてです。一定の参考値があるので、困っている友人は参考にしていただければ幸いです。
head タグには何が含まれますか?
すべての HTML 文書には、
という必須のタグがあり、コンテナとして主に HTML 文書自体の情報 (メタデータ) を記述するためのタグが含まれています。ページには表示されませんが、ほとんどの場合、ブラウザや検索エンジンには表示されます。
で使用できるタグは次のとおりです:
、 <base> 、 <link> 、 <style> 、 <meta> 、 <script> 、 < ; noscript> 。 </p>
<p style="white-space: normal;">メタ情報タグの概要</p>
<p style="white-space: normal;"><title></p>
<p> ドキュメントのタイトルを定義します。これはブラウザのタイトル バーまたはタブ ページに表示され、一般に内容を要約します。 Web ページ全体、コンテンツ。 </p>
<p style="white-space: normal;"><base></p>
<p> ページ上のすべての相対 URL のベースを提供します。ドキュメント内に存在できる <base> タグは 1 つだけです。 </p>
<p>現時点では、このタグを使用しているのは「淘宝網」のみです。 </p>
<p style="white-space: normal;"><link></p>
<p>外部リソースと現在のドキュメントの間の関係を、多くの場合、以下に示すようにリンク スタイル シートで指定します。 </p>
<pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre>
<p> もちろん、その他多くの機能: </p>
<ol><li>たとえば、主に検索エンジンが見るために SEO に使用されます: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre>
<p>Web サイトには、多くの場合、以下を指す複数の URL があります。同じページです。上記のタグは検索エンジンに通知します。検索エンジンがメイン ページを保持し、他の重複ページを削除できるように、ページのメイン URL は何ですか。 </p>
<ol><li> RSS 購読を提供します: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre>
<p> 上記のタグは、検索エンジンで理解できるだけでなく、多くのブラウザ プラグインでも認識できます。 </p>
<ol><li>ページ アイコンを表します: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre>
<p>ほとんどのブラウザは、このリンクのリソースを読み取り、ページに表示します。 </p>
<ol><li>ページの前処理を提供します: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre>
<p>事前にドメイン名の DNS クエリを実行します。場合によっては、ドメイン名の強制プリフェッチが役立つことがあります。 </p>
<p>たとえば、Web サイトのホームページでは、ホームページ自体で使用されていない場合でも、Web サイト全体で頻繁に参照されるドメイン名を強制的に事前解決します。ホームページのパフォーマンスには影響しない可能性がありますが、サイト全体のパフォーマンスは向上します。 </p>
<p><style></p>
<p>ドキュメントのスタイル情報が含まれます。 </p>
<p><meta></p>
<p>一般的なメタデータ情報表現タグ。通常、次のようなキーと値のペアとして表示されます。<meta name="xxx" content="yyy"> </p>
<p>charset 属性</p>
<pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre>
<p>HTML5 以降、現在の文書で使用されている文字エンコーディングを宣言するには、上記の記述方法を使用することを推奨します。 。 </p>
<p style="white-space: normal;">http-equiv 属性</p>
<pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre>
<p>HTML4 では、上記のコードは文字セットを宣言するために使用されていましたが、現在は非推奨です。 </p>
<p>content-type に加えて、他にもいくつかの値があります: </p>
<p>content- language (廃止)、set-cookie (廃止)、default-style、refresh、content-security-policy </p>
<p>一般的には使われないので、いちいち紹介はしませんが、非常にわかりやすいので、興味のある方はこちらをご覧ください。 </p>
<p style="white-space: normal;">name 属性</p>
<p>実際、<meta> タグは、読み取り側と書き込み側が名前と内容の形式に同意する限り、自由に定義できます。例を見てみましょう: </p>
<pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"></pre>
<p>上記の使用法は HTML 標準には含まれていませんが、モバイル開発の事実上の標準です。 content のコンテンツの説明は次のとおりです: </p>
<p>width: ページ幅。正の整数にすることもできます。また、デバイスの幅と等しいことを意味する文字列「device-width」にすることもできます。 height: ページの高さ。正の整数にすることもできます。また、デバイスの高さと等しいことを意味する文字列「device-height」にすることもできます。初期スケール: 初期スケーリング。 minimum-scale: 最小スケーリング率。最大スケール: 最大スケーリング比。 user-scalable: ユーザー スケーリングを許可するかどうか。ビューポートに加えて、</p>
<p>name 属性の値にも多数の値があります: </p>
<p>アプリケーション名、作成者、説明、ジェネレーター、キーワード、リファラー、ロボットなど。 </p>
<p>同様に、一つ一つは紹介しませんので、興味のある方はこちらをご覧ください。 </p>
<p><script></p>
<p> は、実行可能スクリプトの埋め込みまたは参照に使用されます。スクリプト タグの一般的なグローバル属性をいくつか見てみましょう。 </p>
<p>async</p>
<p> ブラウザは別のスレッドを使用してスクリプトをダウンロードします。これにより、ページのレンダリングはブロックされません。スクリプトがダウンロードされると、ブラウザーはレンダリングを一時停止し、スクリプトを実行し、実行後もページのレンダリングを続けます。 </p>
<p>async はスクリプトの実行順序を保証できません。最初にダウンロードされたスクリプトが最初に実行されます。 </p>
<p>延期</p>
<p> を指定すると、ブラウザはスクリプトを並行してダウンロードしますが、ダウンロードの完了後すぐに実行されるのではなく、DOM がロードされるまで待機します (つまり、</html> タグが読み取られたばかり）スクリプトを実行する前に。 </p>
<p>defer は、スクリプトがページに表示される順序で実行されることを保証します。 </p>
<p>src</p>
<p>外部スクリプトを参照するアドレスを定義します。この属性を指定するスクリプト タグには埋め込みスクリプトがあってはなりません。スクリプト ファイルで英語以外の文字が使用されている場合は、文字エンコーディングにも注意する必要があります。例: </p>
<p><script charset="utf-8" src="https://www.example.com/script.js"></script><br>type</p> <p>デフォルト値は text/javascript</p>
<p><script> タグの詳細を知りたい場合は、ここをクリックしてください。 </p>
<p><noscript></p>
<p>ページ上のスクリプト タイプがサポートされていない場合、または現在ブラウザでスクリプトがオフになっている場合は、スクリプトが実行されないときの代替コンテンツをここで定義します。 </p>
<p>概要</p>
<p>この記事はここで終わります。実際、リンク タグとメタ タグについてはまだ紹介されていないことがたくさんあります。多くの関連タグには特別なニーズがあり、特定の環境でのみ使用できます。たとえば、モバイル開発では、PC では必要のない多くのタグが使用されます。 </p>
<p> もちろん、日常的な使用は主にニーズに依存しますが、今のところ、ビューポートと SEO に関連するいくつかのタグのみを使用しています。 </p>
<p>これを考慮して、私が推奨する良い学習方法は、主要な Web サイトにアクセスして、その head タグに何が含まれているかを確認することです。これまで見たことのないものに出会ったら、それを検索してください。すぐに慣れるでしょう。 </p>
<p>私がここで見たウェブサイトには、「淘宝」、「アリババ」、「JD.com」、「網易選択」、「Qidian Chinese Network」などが含まれます。 </p>
<p>この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの <a href="http://www.php.cn/course/list/11.html" target="_blank">HTML チュートリアル ビデオ</a> 列に注目してください。 </p>
<p></p><p>以上がhead タグにはどのような属性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Cookie</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">线程</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">搜索引擎</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title=".htaccess を使用して URL からファイル拡張子 (.php および .html) を削除する方法" href="http://m.php.cn/ja/faq/416206.html">.htaccess を使用して URL からファイル拡張子 (.php および .html) を削除する方法</a></span><span>次の記事：<a class="dBlack" title=".htaccess を使用して URL からファイル拡張子 (.php および .html) を削除する方法" href="http://m.php.cn/ja/faq/416684.html">.htaccess を使用して URL からファイル拡張子 (.php および .html) を削除する方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://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="http://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="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://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></html>
