ホームページ ウェブフロントエンド htmlチュートリアル html5の文字セットは使用できますか?

html5の文字セットは使用できますか?

Dec 01, 2016 am 10:39 AM
charset html5

少し前に、IE6 でプロジェクト内のページが突然文字化けするようになり、そのときにさまざまなトラブルシューティングを行ったところ、最終的に HTML5 の DOCTYPE と Charset および中国語のコメントを使用した問題であると推測したため、一時的に古い Charset メソッドを使用して、後で修正してください。文字化けしたコードは再び表示されませんでした。

実際、HTML5 Charset が IE6 で認識できるかどうか確信が持てなかったので、いくつかのテストを行いました。

まず、2 つの Charset 宣言メソッドについて説明します。実際、これらは誰もがよく知っているはずです。

最初のメソッドを HTML5 メソッドと呼び、2 番目のメソッドを HTML4 メソッドと呼びます。

テスト環境:

Windows XP Sp2、中国語版+英語版のIE6、Windows 7上のIE9とそのさまざまな互換モード、およびChrome、Firefoxなどの現在の安定版

HTMLファイルを使用するため、すべて UTF8 でエンコードされているため、ここでのテスト ケースの HTML ファイルも UTF8 (BOM なし) 形式です。プロジェクトも同様に gbk または gb2312 でエンコードされます。

テストには 2 つのメソッドが使用されました:

メタメソッド: HTML5 および HTML4 メソッドとそのマッシュアップを含む

サーバーサイドメソッド: サーバー側で charset を設定、ここでは nginx が使用されます、charset=utf-8

テストケース—— メタメソッド:

UTF8

UTF8 HTML4メソッド

UTF8-GB2312

UTF8+メタ前の中国語コメント

UTF8+HTMLとHEAD間の中国語コメント

GB2312

GB2312 HTML4メソッド

GB2312-UTF8

GB2312 +メタの前の中国語コメント

GB2312+HTMLとHEAD間の中国語コメント

テストケース - サーバーメソッド:

サーバー設定エンコーディング

メタエンコーディングとサーバーエンコーディングは矛盾しています

上記の各ユースケースは直接アクセスできます

テスト結果:

各ブラウザで一貫して実行されたテスト ケース。

UTF-8 ソリューションはすべて正常に表示されました。

charset はドキュメントの UTF-8 エンコーディングと一致しないため、すべて文字化けしました。

1、6 は HTML5 文字セットを使用してそれぞれ UTF8 と gb2312 を定義します。1 は文字化けせずに正常に表示され、6 は文字化けがあります。これは、IE6 の中国語版と英語版の両方に当てはまり、IE6 がHTML5 文字セット;

1,2 使用例 使用例 6 と 7 と同様、HTML5 メソッドと HTML4 メソッドを使用して文字セットを定義すると、それぞれ同じ効果があります。

3 番目の使用例では、最初に HTML5 メソッドを使用して、 gb2312ですが、ページは正常に表示されますが、8番目のユースケースでは結果ページが文字化けして表示されるため、2番目のメタタグがかかっていないことが推測できます。効果;

4 と 5 のユースケースは文字化けしません。これは、単純な HTML コメントが文字化けしないことを示しています。これら 2 つのエンコーディングが異なる js などの外部ファイルを読み込んだときに何が起こるかについては、ここではテストされていません。

サーバーメソッドでは、ユースケース 1 ではメタ設定を使用せずに文字セットを設定し、ページは正常に表示されますが、ユースケース 2 ではメタ設定 charset=gb2312 がサーバーのバージョンとは異なりますが、文字化けは発生しません。サーバーから返された文字セットの優先度が高いことを示すコード

結論:

実際、文字セットの仕様については、Google の開発ドキュメントでも説明されています。

は HEAD タグ内になければなりません。つまり、

を含む他のコンテンツの前になければなりません。スペースと DOCTYPE 宣言は最初の 512 バイト内にある必要があります。

HTML5 と HTML4 は同じ効果を持ちます。どちらかを使用するだけです。

上記のテストは、項目 4 が正しいことも証明しており、両方の記述方法を使用できることを示しています。

さらに、サーバー側で charset を設定することもお勧めします。これは、より効率的で便利です。 Google は現在このアプローチを使用しています。

そのため、ページが統一された方法で記述されている限り、文字化けの問題は発生しません。そのため、HTML5 の DOCTYPE 宣言と Charset 宣言を大胆に使用できます。ただし、上記の Google ドキュメントの仕様に従うようにしてください。あまり多くのことを頭に入れず、js などの外部リソースを後ろに置いてください。

テストに漏れがあるのは避けられませんので、間違いがある場合は、修正して一緒に話し合ってください~~

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles