Content-Type ヘッダーは、リソースのメディア タイプを示すために使用されます。メディア タイプは、ファイルとともに送信される、ファイルの形式を示す文字列です。たとえば、画像ファイルの場合、メディア タイプは image/png や image/jpg などになります。
応答として、返されたコンテンツのタイプをクライアントに伝えます。ブラウザは、マシンにロードする必要があるコンテンツのタイプを認識します。ブラウザが Content-type ヘッダーによってファイルのバイト ストリームを受信するたびに、ブラウザは MIME スニッフィングとして知られる処理を実行します。つまり、受信しているストリームを検査し、それに応じてデータをロードします。
構文：
Content-Type: text/html; charset=UTF-8 Content-Type: multipart/form-data; boundary=something>
ディレクティブ: HTTP ヘッダーの Content-type には 3 つのディレクティブがあります。
- メディア タイプ: データの MIME (MultiPurpose Internet Mail Extensions) タイプを保持します。 charset: 文字エンコーディング標準を保持します。 Charset は、ブラウザがデータを受信する際に使用するエンコード標準です。境界: 境界ディレクティブは、複数の部分からなるエンティティがある場合に必要です。境界は、電子メール ゲートウェイを介して非常に堅牢であることが知られている文字セットの 70 文字で構成され、空白を含まないマルチパート エンティティ用です。
例： この例では、Content-type ヘッダーを設定した場合と設定しない場合に、ブラウザーで画像がどのように読み取られるかを示します。
header('Content-type: image/jpeg');//with header Content type echo file_get_contents(' img/http-headers/15/http-headers-content-type.webp'); ?>>> |
>
>
出力:
Content-type ヘッダーを使用せずに、画像のコンテンツをバイト単位で取得することになるため、これは役に立ちません。
世界で一番美しい笑顔
// Without header echo file_get_contents(' img/http-headers/15/http-headers-content-type.webp'); ?>>> |
>
>
出力：
?PNG IHDRX??'?iCCPsRGB IEC61966-2.1(?u??+DQ??3????????????63??P????H?U????l??RDJV???9oF? $sn????{N???pZ??^?d?Z(p?E?]??h??QEW?f??T??{, f???????????z?aE??????y???6%]>vkrA?;S??????d??M? ??6???`%??????&???Q-Z?j???BSZo?a???}N ?._u {??#??N?g?{-bKGD?? ??????? pHYs.#.#x??vtIME?4_?X IDATx??w?U??????MB$??$@@? 2t?'EDa???'? C?*C????Hq?ja??w ????????L{??}?}??w?;??{???{.4、???j?? ? q10??_??h2]`P??:^?5??@ ?W?=?????????XY??? w .??9??`z?1?!V??B????XM~^?|?1?qm???(?h??C?OV?js{e?+ L? b?{%?@`?+:sQ?@?>> ここでは、Content-type ヘッダー情報を適用することで、サーバーから取得している応答の種類がブラウザーに通知されることが明確にわかります。
HTTP Content-type ヘッダーのすべての可能な値:
| タイプ | 価値観 |
|---|---|
| 応用 | アプリケーション/EDI-X12 アプリケーション/EDIFACT アプリケーション/JavaScript アプリケーション/オクテットストリーム アプリケーション/OGG 申請書/PDF アプリケーション/xhtml+xml アプリケーション/x-shockwave-フラッシュ アプリケーション/json アプリケーション/ld+json アプリケーション/xml アプリケーション/zip application/x-www-form-urlencoded |
| オーディオ | オーディオ/mpeg オーディオ/x-ms-wma audio/vnd.rn-realaudio オーディオ/X-WAV |
| 画像 | 画像/gif 画像/jpeg 画像/png 画像/TIFF 画像/vnd.microsoft.icon 画像/×アイコン 画像/vnd.djvu 画像/SVG+XML |
| マルチパート | マルチパート/混合 マルチパート/代替 マルチパート/関連 (MHTML (HTML メール) で使用) マルチパート/フォームデータ |
| 文章 | テキスト/CSS テキスト/CSV テキスト/html テキスト/JavaScript (廃止されました) テキスト/プレーン テキスト/xml |
| ビデオ | ビデオ/mpeg ビデオ/MP4 ビデオ/クイックタイム ビデオ/x-ms-wmv ビデオ/x-msvideo ビデオ/x-flv ビデオ/ウェブサイト |
| ベトナムドン | アプリケーション/vnd.oasis.opendocument.text アプリケーション/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.presentation アプリケーション/vnd.oasis.opendocument.graphics アプリケーション/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet アプリケーション/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation アプリケーション/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document アプリケーション/vnd.mozilla.xul+xml |
サポートされているブラウザ: 対応ブラウザは、 HTTPヘッダーのコンテンツタイプ 以下にリストされています。
- グーグルクローム
- インターネットエクスプローラ
- Firefox
- サファリ
- オペラ
HTML は Web ページの基礎であり、Web サイトや Web アプリを構築することによって Web ページ開発に使用されます。この HTML チュートリアル と HTML 例 に従うことで、HTML を基礎から学ぶことができます。