ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 ヘッダーのコンテンツには通常何が含まれますか?

HTML5 ヘッダーのコンテンツには通常何が含まれますか?

青灯夜游
青灯夜游オリジナル
2021-12-17 17:17:396173ブラウズ

html5 ヘッダー コンテンツには通常、次のものが含まれます: 1. title タグで定義された Web ページのタイトル; 2. ファビコン (小さな Web サイトのアイコン); 3. エンコード方法; 4. Web サイトの説明; 5. ページのキーワード; 6. ページの作成者; 7. ビューポート (モバイル端末適応); 8. CSS スタイルシート; 9. JavaScript スクリプト。

HTML5 ヘッダーのコンテンツには通常何が含まれますか?

このチュートリアルの動作環境: 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><pre class="brush:html;toolbar:false"><head> <title>PHP中文网</title> </head></pre></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><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre></p> <p>3 を検索します エンコード方法 <strong></strong></p> エンコード方法の仕様が先頭の先頭に配置されます。指定されていない場合、ブラウザはサーバーのヘッダーにも基づいて判断しますが、正確ではない可能性があります。 <p><pre class="brush:html;toolbar:false"><head> <meta charset="UTF-8"> </head></pre></p> <blockquote> <meta> タグは、ページの有効期間、ページの作成者、キーワード リスト、ページの説明など、HTML ドキュメントに関するメタデータを提供するために使用されます。 <meta> タグで定義されたデータはページには表示されませんが、ブラウザによって解析されます。 <p></p> </blockquote>charset 属性は、HTML ドキュメントの文字エンコーディングを指定するために使用され、上記の例では、ドキュメントの文字エンコーディングを「UTF-8」に設定しています。 <p></p> <p>4. Web サイトの説明<strong></strong><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre></p>ページの説明情報を定義すると、検索エンジンにとって有益です。 <p></p> <p>5、<strong>ページ<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span>キーワード<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span></strong><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre></p>キーワードは、検索エンジンにページに関する情報を提供するために使用されます。 <p></p> <p><strong>6, <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span>ページ作成者<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span></strong><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre></p> 作成者情報は、一部のコンテンツ管理システムを通じて自動的に抽出できます。 <p></p> <p><strong>7. <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>ビューポート (モバイル端末への適応) </span></strong></p> これは非常に一般的であり、ビューポートは通常モバイル端末に適応されており、ページは仮想ウィンドウ - ビューポートに表示されます。Web ページがビューポートを使用していない場合、モバイル ブラウザを開いたときにビューポートが表示されます。ビューポートは非​​常に小さく、移動したりズームしたりすることもできます。非常に低いです。ビューポートにより、 Web 開発者がそのサイズとダイナミクスを渡す Web ページ コンテンツ内のコントロール要素のサイズを設定すると、Web ページと同じ効果 (スケール縮小) がブラウザ上で実現されます。 、レスポンシブ Web サイトのサポートを改善するために使用されます。 <p><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre></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;"></style></strong></p> <p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:</style></p><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head></pre><blockquote><p>注意:对于文档中的唯一样式可以使用 <style> 标签,但对于在多个文档中通用的样式,使用外部样式表更为合适。</style></p></blockquote> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>9、外部css样式表--<link> 标签</span></strong></p> <p><link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:</p><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <link rel="stylesheet" href="common.css"> </head></pre><blockquote> <p>HTML </p> 标签中可以包含任意数量的 <link> 标签。</blockquote> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei 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 yahei arial sans-serif>通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><pre class="brush:js;toolbar:false"><head> <script> document.write("PHP中文网") </script> </head></pre><pre class="brush:js;toolbar:false"><head> <script src="js/test.js"></script> </head></pre><p>相关推荐:《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>

以上がHTML5 ヘッダーのコンテンツには通常何が含まれますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。