ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5標準学習~コーディングを詳しく解説

HTML5標準学習~コーディングを詳しく解説

黄舟
黄舟オリジナル
2017-03-21 15:14:151636ブラウズ

すべてのフロントエンド エンジニアは、一度は「文字化けしたコード」の兄弟に遭遇したことがあると思います。基礎がどれほどしっかりしていても、開発中に時々「文字化けしたコード」の兄弟とお茶を飲むことは避けられません。生産工程。フロントエンド エンジニアとして、ページのエンコーディングをどのように指定しますか?ブラウザがエンコードをどのように認識するか知っていますか?

まず、非常に単純な例として、Yujian の HTML ページを使用して、さまざまなブラウザーの違いを確認します。

<!DOCTYPE html>

最も単純な HTML、93f0f5c25f18dab9d176bd4f6de5d30e6c04bd5ca3fcae76e30b72ad730ca86d コンテンツはなく、サーバーは特定のエンコーディング ステートメントを与えず、ローカルで直接開きます各ブラウザでページのエンコーディングを確認します:

ブラウザ 表示エンコーディング 備考
IE6 UTF-8
IE8 UTF-8
IE9 GB2312 システムデフォルト文字セット
Firefox3.5 GBK2312 システムデフォルト文字セット
Firefox4.0 ISO-8859-1 西ヨーロッパ言語、英語のデフォルトのエンコーディング
Chrome GBK システムのデフォルトの文字セット
Opera 中国語 - 自動検出 もGB2312である必要があります

からわかるように、エンコーディングを宣言する手段を使用しないページの解析はブラウザごとに異なります。もちろん、最も単純なページでは、どのようなエンコーディングが使用されても (もちろん ASCII のスーパーセットが前提です) 効果はありませんが、エンコーディングを正しく設定することの重要性を示すには十分です。

エンコーディング ステートメント

HTML4 と

HTML5 では、それぞれエンコーディング ステートメントの方法を説明する章が採用されています。HTML4 の関連する章を参照するにはここをクリックし、HTML5 の関連する章を参照するにはここをクリックしてください。

まず、コーディングとは何ですか?エンコーディングとは、真に正しいコンテンツを取得するために、特定の方法でバイト ストリームを解析する特別なアルゴリズムを使用するようにブラウザ (またはユーザー エージェント) を指定することです。 HTML 標準では、エンコーディングはエイリアスを使用して表現できます。エンコーディング エイリアスは IANA 定義に基づいており、このリストにあるエンコーディングのみがブラウザーで認識されます。したがって、UTF-8 を UTF8 と記述すると、ブラウザはそれを完全に無視する可能性があります。さらに、エンコーディング エイリアスでは

大文字と小文字が区別されません

HTML4 では、優先度に応じて次の 3 つの方法でページのエンコーディングを指定できます。

  1. HTTP ヘッダーの Content-Type フィールドの後に文字セットが続きます。

  2. fb0219da7bc07e28bd061c326636787c タグを使用して宣言します。

    09d68f3bd6bfd0744f37150627c89edd标签来声明。

  3. 对于部分外部资源,如3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的js文件,可以通过标签上的charset属性声明。

这个自然没有什么疑问,需要注意的是,通过09d68f3bd6bfd0744f37150627c89edd标签来声明页面的话,当浏览器遇上该标签时,如果发现自己使用的编码与标签声明的不符,是会回到头里重新解析页面的。这会导致页面的一部分被重新解析,因此如果试图使用标签的方式声明编码的话,建议将标签尽可能地写在前面。一个最佳实践是写在93f0f5c25f18dab9d176bd4f6de5d30e标签之后,任何其他标签之前。关于这一点,Google PageSpeed也有相应的介绍。

时代演进

但是随着时间的推移,开发者渐渐发现了一件事。就如同DOCTYPE的最简声明一样,其实浏览器在读取e8e496c15ba93d81f6ea4fe5f55a2244标签的编码的时候,并不是严格地按照标准进行的。总而言之,由于在HTML的解析阶段,基于在Tokenizer阶段之前就必须确定好页面的编码,因此浏览器不可能像分析DOM树一样,在DOM树构建的时候再分解e8e496c15ba93d81f6ea4fe5f55a2244标签的结构,取出其中的http-equivcontent属性,再确定编码。

现实中,浏览器做了一件非常简单的事,来读取e8e496c15ba93d81f6ea4fe5f55a2244标签定义的编码:

  1. 确定这是一个e8e496c15ba93d81f6ea4fe5f55a2244标签,这根据HTML解析的状态机,由"226234e2d3ae66e3252575a6a24dc547

  2. acbc3b8881b6b4f3abaf7379ad2340e7

  3. 5c63b0c9e2aeb7f2e73596ac1dc2ffb0

  4. 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 サイトの他の関連記事を参照してください。

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