html5 ヘッダー コンテンツには通常、次のものが含まれます: 1. title タグで定義された Web ページのタイトル; 2. ファビコン (小さな Web サイトのアイコン); 3. エンコード方法; 4. Web サイトの説明; 5. ページのキーワード; 6. ページの作成者; 7. ビューポート (モバイル端末適応); 8. CSS スタイルシート; 9. JavaScript スクリプト。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
ニーズに応じて、HTML ヘッダーに大量のメタデータを定義することも、メタデータをほとんどまたはまったく定義しないこともできます。 head タグは HTML ドキュメントの一部ですが、その内容はブラウザーには表示されません。
#html5 ヘッダー コンテンツ
1. Web ページのタイトル -
タグ<strong></strong><title> タグは、HTML ドキュメントのタイトルを定義するために使用されます。<title> タグを含むドキュメントのみが有効な HTML ドキュメントとみなされます。さらに、HTML ドキュメント内で使用できる <title> タグは 1 つだけであり、<title> タグは タグ内に配置する必要があります。 <p></p>
<title> タグ内ではプレーン テキスト コンテンツのみが許可され、他の HTML タグは許可されないことに注意してください。 <p></p>例:<p><br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>PHP中文网</title>
</head></pre><div class="contentsignin">ログイン後にコピー</div></div></p><p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="HTML5 ヘッダーのコンテンツには通常何が含まれますか?"/></p><p>2、ファビコン<strong></strong></p> Web ページのタイトルを指定します パスが指定されていない場合、ブラウザはルート ディレクトリで <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre><div class="contentsignin">ログイン後にコピー</div></div></p><p>3 を検索します エンコード方法 <strong></strong></p> エンコード方法の仕様が先頭の先頭に配置されます。指定されていない場合、ブラウザはサーバーのヘッダーにも基づいて判断しますが、正確ではない可能性があります。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<meta charset="UTF-8">
</head></pre><div class="contentsignin">ログイン後にコピー</div></div></p><blockquote><meta> タグは、ページの有効期間、ページの作成者、キーワード リスト、ページの説明など、HTML ドキュメントに関するメタデータを提供するために使用されます。 <meta> タグで定義されたデータはページには表示されませんが、ブラウザによって解析されます。 <p></p></blockquote>charset 属性は、HTML ドキュメントの文字エンコーディングを指定するために使用され、上記の例では、ドキュメントの文字エンコーディングを「UTF-8」に設定しています。 <p></p><p>4. Web サイトの説明<strong></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><div class="contentsignin">ログイン後にコピー</div></div></p>ページの説明情報を定義すると、検索エンジンにとって有益です。 <p></p><p>5、<strong>ページ<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span>キーワード<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre><div class="contentsignin">ログイン後にコピー</div></div></p>キーワードは、検索エンジンにページに関する情報を提供するために使用されます。 <p></p><p><strong>6, <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span>ページ作成者<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">ログイン後にコピー</div></div></p> 作成者情報は、一部のコンテンツ管理システムを通じて自動的に抽出できます。 <p></p><p><strong>7. <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">ビューポート (モバイル端末への適応) </span></strong></p> これは非常に一般的であり、ビューポートは通常モバイル端末に適応されており、ページは仮想ウィンドウ - ビューポートに表示されます。Web ページがビューポートを使用していない場合、モバイル ブラウザを開いたときにビューポートが表示されます。ビューポートは非常に小さく、移動したりズームしたりすることもできます。非常に低いです。ビューポートにより、 Web 開発者がそのサイズとダイナミクスを渡す Web ページ コンテンツ内のコントロール要素のサイズを設定すると、Web ページと同じ効果 (スケール縮小) がブラウザ上で実現されます。 、レスポンシブ Web サイトのサポートを改善するために使用されます。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre><div class="contentsignin">ログイン後にコピー</div></div></p><ul style="list-style-type: disc;"><li>width: ビューポートのサイズを制御します。通常、デバイス幅として指定されます (単位は 100% にスケールされた CSS ピクセルです)。固定値を指定することもできます<p></p></li><li>高さ: 幅に対応し、高さを指定します。 <p></p></li><li>initial-scal: 初期スケーリング率、ページが初めてロードされたときのスケーリング率。 <p></p></li><li>maximum-scale: ユーザーがズームできる最大比率。 <p></p></li><li>minimum-scale: ユーザーがズームできる最小比率。 <p></p></li><li>user-scalable: ユーザーが手動でズームできるかどうか。 <p></p></li></ul><p><strong>8. 埋め込み CSS スタイル --<style> タグ<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span></strong><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head></pre><div class="contentsignin">ログイン後にコピー</div></div><blockquote><p>注意：对于文档中的唯一样式可以使用 <style> 标签，但对于在多个文档中通用的样式，使用外部样式表更为合适。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">9、外部css样式表--<link> 标签</span></strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<link rel="stylesheet" href="common.css">
</head></pre><div class="contentsignin">ログイン後にコピー</div></div><blockquote><p>HTML <head> 标签中可以包含任意数量的 <link> 标签。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">10、JavaScript 脚本</span></strong><br/></p><p><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script>
document.write("PHP中文网")
</script>
</head></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script src="js/test.js"></script>
</head></pre><div class="contentsignin">ログイン後にコピー</div></div></p>
<p>相关推荐：《<a href="//m.sbmmt.com/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>
以上がHTML5 ヘッダーのコンテンツには通常何が含まれますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
