HTMLヘッダーに何を入れるか-フロントエンドQ&A-php.cn

HTMLヘッダーに何を入れるか

青灯夜游

リリース： 2021-12-14 12:06:42

オリジナル

3634 人が閲覧しました

HTML ヘッダーを配置する必要があります: 1. タイトルタグ、ドキュメントのタイトルを設定します。 2. 複数のメタタグ、エンコード方法、Web サイトの説明、ビューポートを設定します。 3. リンクタグ、小さなアイコンを設定し、 Webページのタイトルスタイルファイルの導入; 4. スクリプトタグ、スクリプトファイルの導入。

HTMLヘッダーに何を入れるか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

これはインタビュー中に遭遇した質問です。私は普段プラグインを使用しています。 html5 の構造を生成するためにタブを追加するのですが、css と js 以外に追加するものが思いつきません。この問題は非常に簡単そうに見えますが、無視されがちなので、それをまとめた記事を書きます。 ##HTML head 中には何を入れるべきですか?

必要なタイトル

タイトルは必須ですが、追加されていない場合はブラウザが自動的に追加します。

<head>
    <title>web</title>
</head>

ログイン後にコピー

Encoding (エンコード方式)

エンコード方式の指定は先頭にあり、指定がない場合はブラウザも判断しますサーバーのヘッダーに基づいていますが、必ずしも正確であるとは限りません。

<head>
    <meta charset="UTF-8">
    <title>web</title>
</head>

ログイン後にコピー

Description (ウェブサイトの説明)

これまで気づきませんでした。これはあなたのウェブサイトの説明です。検索エンジンはこれを認識し、非常に重要になるはずです。 SEO で一般的に使用される

<meta name="description" content="这里是对网站的描述">

ログイン後にコピー

Viewport

これは非常に一般的です。ビューポートは通常、モバイル端末に適合しており、ページを仮想ウィンドウ (ビューポート) に置きます。 Web ページは表示されませんビューポートを使用している場合、モバイルブラウザーを開くと、ビューポートは非常に小さく、移動したりズームしたりすることもできます。非常に低いです。ビューポートを使用すると、Web 開発者はコントロール要素のサイズを動的に設定できますブラウザーで Web ページと同じ効果 (スケール縮小) を達成できるように、Web コンテンツ内でそのサイズを確認します。、レスポンシブ Web サイトのサポートを改善するために使用されます。

 <meta name="viewport" content="width=device-width, initial-scale=1">

ログイン後にコピー

width: ビューポートのサイズを制御します。通常、デバイス幅として指定されます (単位は 100% にスケールされた CSS ピクセルです)。固定値を指定することもできます
高さ: 幅に対応し、高さを指定します。
initial-scal: 初期スケーリング率、ページが初めてロードされたときのスケーリング率。
maximum-scale: ユーザーがズームできる最大比率。
minimum-scale: ユーザーがズームできる最小比率。
user-scalable: ユーザーが手動でズームできるかどうか。

ファビコン

これは、Web ページのタイトルの左側にある小さなアイコンです。そのパスを指定します。指定しない場合、ブラウザは

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

ログイン後にコピー

css

リンクタグを介してスタイルファイルをリンクします

<link rel="stylesheet" href="css/test.css">

ログイン後にコピー

javascript(強調)

スクリプトタグを介してスクリプトファイルをリンクする

 <script src="js/test.js"></script>

ログイン後にコピー

#ここではいくつかの点について説明します

1 js ファイルを head に配置する場合と body に配置する場合の違い

まず head に配置します。script タグに async 属性が追加されていない場合、ブラウザがブロックされます。これは、次のステップに進む前に js ファイルをダウンロードする必要があることを意味します。ファイルが小さい場合は問題ありませんが、比較的大きい場合はブロック効果があり、ユーザーエクスペリエンスに影響します。

ブラウザは Web ページを解析するときに 1 行ずつ解析します。つまり、head 内の js ファイルを解析すると停止し、Dom 構造は head の下の body タグ内にあります。これは、js ファイルがダウンロードされるまで本文の内容が表示されないことを意味します。本文の下部に配置することを選択した場合、ブラウザは最初に dom をロードし、js ファイルを解析した後でのみダウンロードします。本文の下部。ただし、ダウンロードする前に本文が表示されます。コンテンツを追加すると、ブラウジングエクスペリエンスが向上します。

一部の人は、本文の先頭と下部に配置することの違いは何なのかと尋ねるかもしれません。体は？実際、body head に置くことは head に置くことと同じです。

2 デメリットを避けるために js ファイルを head に置く

2 つあります。 js の問題を解決できる属性同期ファイルのダウンロードの問題: defer と async

defer:

スクリプトで defer 属性を追加すると、たとえそれが先頭に配置されていても、これは、このスクリプトをページの下部に配置するのと似ています。

<script defer src="test.js"></script>

ログイン後にコピー

async:

async の場合、これは HTML5 の新しい属性です。その機能は、スクリプトの読み込みによってページの読み込みをブロックすることなく、スクリプトを非同期に読み込み、実行することです。ロードされるとすぐに実行されます。 async を使用すると、後続のドキュメント要素の読み込みとレンダリングのプロセスが、script.js の読み込みと実行と並行して (非同期で) 行われます。ただし、元の順序で実行されない可能性が非常に高くなります。 js の前後に依存関係がある場合、async を使用するとエラーが発生する可能性があります。

<script async src="test.js"></script>

ログイン後にコピー

3 js ファイルを置くのに最適な場所はどこですか

これで、ブラウザは最適化を行ったので、たとえ js が head に置かれていても、大きな問題はありません。したがって、必要な js を head に配置し、より大きな js を body の下部に配置することもできますが、最も簡単で最善の方法は、それを body の下部に配置することです。W3C は js を head に配置します。 ;

推奨チュートリアル: 「html ビデオチュートリアル」

以上がHTMLヘッダーに何を入れるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。