ホームページ > 記事 > ウェブフロントエンド > HTML5標準学習～コーディングを詳しく解説
HTML5標準学習～コーディングを詳しく解説
- 黄舟オリジナル
- 2017-03-21 15:14:151612ブラウズ
すべてのフロントエンド エンジニアは、一度は「文字化けしたコード」の兄弟に遭遇したことがあると思います。基礎がどれほどしっかりしていても、開発中に時々「文字化けしたコード」の兄弟とお茶を飲むことは避けられません。生産工程。フロントエンド エンジニアとして、ページのエンコーディングをどのように指定しますか?ブラウザがエンコードをどのように認識するか知っていますか?
まず、非常に単純な例として、Yujian の HTML ページを使用して、さまざまなブラウザーの違いを確認します。
<!DOCTYPE html>
最も単純な HTML、93f0f5c25f18dab9d176bd4f6de5d30e和6c04bd5ca3fcae76e30b72ad730ca86d コンテンツはなく、サーバーは特定のエンコーディング ステートメントを与えず、ローカルで直接開きます各ブラウザでページのエンコーディングを確認します:
| ブラウザ | 表示エンコーディング | 備考 |
|---|---|---|
| IE6 | UTF-8 | |
| IE8 | UTF-8 | |
| IE9 | GB2312 | システムデフォルト文字セット |
| Firefox3.5 | GBK2312 | システムデフォルト文字セット |
| Firefox4.0 | ISO-8859-1 | 西ヨーロッパ言語、英語のデフォルトのエンコーディング |
| Chrome | GBK | システムのデフォルトの文字セット |
| Opera | 中国語 - 自動検出 | もGB2312である必要があります |
大文字と小文字が区別されません。
HTML4 では、優先度に応じて次の 3 つの方法でページのエンコーディングを指定できます。- HTTP ヘッダーの Content-Type フィールドの後に文字セットが続きます。
-
fb0219da7bc07e28bd061c326636787cタグを使用して宣言します。09d68f3bd6bfd0744f37150627c89edd标签来声明。 对于部分外部资源，如
3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的js文件，可以通过标签上的charset属性声明。
这个自然没有什么疑问，需要注意的是，通过09d68f3bd6bfd0744f37150627c89edd标签来声明页面的话，当浏览器遇上该标签时，如果发现自己使用的编码与标签声明的不符，是会回到头里重新解析页面的。这会导致页面的一部分被重新解析，因此如果试图使用标签的方式声明编码的话，建议将标签尽可能地写在前面。一个最佳实践是写在93f0f5c25f18dab9d176bd4f6de5d30e标签之后，任何其他标签之前。关于这一点，Google PageSpeed也有相应的介绍。
时代演进
但是随着时间的推移，开发者渐渐发现了一件事。就如同DOCTYPE的最简声明一样，其实浏览器在读取e8e496c15ba93d81f6ea4fe5f55a2244标签的编码的时候，并不是严格地按照标准进行的。总而言之，由于在HTML的解析阶段，基于在Tokenizer阶段之前就必须确定好页面的编码，因此浏览器不可能像分析DOM树一样，在DOM树构建的时候再分解e8e496c15ba93d81f6ea4fe5f55a2244标签的结构，取出其中的http-equiv和content属性，再确定编码。
现实中，浏览器做了一件非常简单的事，来读取e8e496c15ba93d81f6ea4fe5f55a2244标签定义的编码：
确定这是一个
e8e496c15ba93d81f6ea4fe5f55a2244标签，这根据HTML解析的状态机，由"226234e2d3ae66e3252575a6a24dc547acbc3b8881b6b4f3abaf7379ad2340e75c63b0c9e2aeb7f2e73596ac1dc2ffb0
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグによってロードされる js ファイルなどの一部の外部リソースについては、タグの charset 属性を通じて宣言できます。 fb0219da7bc07e28bd061c326636787c タグを通じて宣言されている場合、このタグをロードするときに、使用するエンコーディングがタグ宣言と矛盾していることが判明した場合は、最初に戻ってページを再解析することになります。これにより、ページの一部が再解析されるため、タグを使用してエンコーディングを宣言しようとしている場合は、できるだけ早くタグを記述することをお勧めします。ベスト プラクティスは、93f0f5c25f18dab9d176bd4f6de5d30e タグの後、他のタグの前にこれを記述することです。この点に関しては、Google PageSpeedにも対応した導入がなされています。 時代の進化しかし、時間が経つにつれて、開発者は徐々にあることを発見しました。 DOCTYPE の最も単純なステートメントと同様に、実際、ブラウザが e8e496c15ba93d81f6ea4fe5f55a2244 タグのエンコーディングを読み取るときは、標準に厳密に従っていません。全体として、HTML 解析段階では、トークナイザー段階の前にページのエンコーディングを決定する必要があるため、ブラウザーが e8e496c15ba93d81f6ea4fe5f55a2244 Code> タグ構造を分解して http-equiv 属性と content 属性を使用して、エンコーディングを決定します。 🎜🎜実際には、ブラウザは e8e496c15ba93d81f6ea4fe5f55a2244 タグで定義されたエンコーディングを読み取るという非常に単純な処理を行います。 🎜🎜🎜🎜これが e8e496c15ba93d81f6ea4fe5f55a2244 であることを確認してください。 code> タグは、HTML によって解析された <a href="http://www.php.cn/code/8243.html" target="_blank"> ステータス マシンに基づいており、先頭に「a4be9094ed51dd47cf306ccad65d7b10</a>🎜🎜🎜🎜e127593abfba31fd906ca517a3d55cbf🎜🎜🎜🎜5c63b0c9e2aeb7f2e73596ac1dc2ffb0🎜🎜🎜🎜...その他多くの奇妙な書き方。 🎜🎜🎜🎜それで、歴史が進むにつれ、ついにある日、さまざまなブラウザ メーカーが一堂に会して、この問題について議論し始めました...最終的には、彼らの実装が非常に似ていることに気づき、驚きました (おそらく、それぞれのメーカーから学んだだけかもしれません) other)、そこで彼らはこのメソッドを標準にすることに決めました...長い議論の末、最終的に、広く愛されている HTML5 のエンコーディング宣言メソッドが誕生しました。 HTML5 では、これは「メタ文字セット要素」と呼ばれ、その最も単純な形式は次のとおりです: 🎜<meta charset=utf-8>
当然这是HTML的语法，如果遵从XHTML并觉得XHTML更加亲切地话，写成acbc3b8881b6b4f3abaf7379ad2340e7也是没问题的。
而前文所述的具体获取编码的算法也被详细地记录在案，可以在这里看到。
到了HTML5时代，标准再次对编码的声明方式做了修正和细化，总得来说有以下的区别：
HTML5允许使用BOM来决定编码，但仅支持UTF-16的BOM（即U+FEFF），且没有说明BOM指定编码的优先级如何。
HTML5添加了
meta charset标签。HTML5规定如果一个页面没有指定编码，则使用ASCII作为其编码，而HTML4则规定浏览器可以根据所处的环境自行选择。
其他杂项
除了编码的基本声明方式外，标准中还有不少需要注意的细节：
如果使用
e8e496c15ba93d81f6ea4fe5f55a2244标签声明编码的话，该编码只能是ASCII的超集编码。可以简单地认为ASCII超集就是支持ASCII的256个字符的编码。HTML5非常推荐使用UTF-8编码。
标准中提出不要使用UTF-32、JIS_C6226-1983、JIS_X0212-1990、HZ-GB-2312、JOHAB等字符集，并禁止使用CESU-8、UTF-7、BOCU-1和SCSU字符集。但事实上浏览器却至少能识别UTF-7。
对于想要严格遵守XHTML的开发者，应当使用XML声明来指定编码，即
e4f551cb26a907a6bcdf652256fc4dfd。但是这个在IE6下会影响到DOCTYPE，所以开发者也不得在这一点上给予妥协，乖乖地去用HTML的声明方式。关于现实中各编码声明方式的优先级，以及一些其他需要注意的细节，这篇文章值得一读。
最佳实践
尽可能使用HTTP头指定编码。
尽可能使用UTF-8，或者至少全站所有资源使用统一编码。
如果想使用UTF-16，就给文件加上BOM，以确定是Little Endian还是Big Endian的。
如果使用
e8e496c15ba93d81f6ea4fe5f55a2244标签指定编码，可以不使用http-equiv的形式，但尽可能让标签出现在前面，至少保证在任何非ASCII字符之前。链接外部的脚本，如果无法确定编码相同的话，加上charset属性。
以上がHTML5標準学習～コーディングを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。