简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée du codage de l'apprentissage des normes HTML5

Explication détaillée du codage de l'apprentissage des normes HTML5

黄舟
黄舟original
2017-03-21 15:14:151616parcourir

Je crois que chaque ingénieur front-end a rencontré le frère « code tronqué » à un moment ou à un autre. Quelle que soit la solidité de vos fondations, vous prendrez inévitablement quelques tasses de thé avec le frère « code tronqué » de temps en temps. pendant le processus de production. En tant qu'ingénieur front-end, comment spécifier l'encodage d'une page ? Savez-vous comment le navigateur reconnaît l'encodage ?

Tout d'abord, un exemple très simple, utilisez la page HTML de Yujian pour voir la différence entre les différents navigateurs : 

<!DOCTYPE html>

Le HTML le plus simple, 93f0f5c25f18dab9d176bd4f6de5d30e et 6c04bd5ca3fcae76e30b72ad730ca86dIl n'y a pas contenu, et le serveur ne donne pas d'instruction d'encodage spécifique. Ouvrez-le directement depuis l'ordinateur local et vérifiez l'encodage de la page dans chaque navigateur :

浏览器 显示编码 备注
IE6 UTF-8  
IE8 UTF-8  
IE9 GB2312 系统默认字符集
Firefox3.5 GBK2312 系统默认字符集
Firefox4.0 ISO-8859-1 西欧语言，英语默认编码
Chrome GBK 系统默认字符集
Opera 中文-自动检测 应该也是GB2312

Comme le montre le tableau , chaque navigateur a une analyse différente pour les pages qui n'utilisent aucun moyen pour déclarer l'encodage. Bien sûr, dans la page la plus simple, quel que soit l'encodage utilisé (bien sûr, le principe est un sur-ensemble d'ASCII), cela n'a aucun effet, mais cela suffit à montrer l'importance de définir correctement l'encodage.

Déclaration de codage

HTML4 et HTML5 adoptent chacun un chapitre pour expliquer la méthode de déclaration de codage. Vous pouvez cliquer ici pour afficher les chapitres pertinents de HTML4 ou cliquer ici pour les afficher. les chapitres pertinents du chapitre HTML5.

Tout d’abord, qu’est-ce que l’encodage ? Le codage consiste à spécifier le navigateur (ou l'agent utilisateur) pour utiliser un algorithme spécial pour analyser le flux d'octets d'une certaine manière afin d'obtenir le contenu vraiment correct. Dans le standard HTML, les encodages peuvent être représentés à l'aide d'alias. Les alias de codage proviennent de la définition de l'IANA, et seuls les codages qui apparaissent dans cette liste peuvent être reconnus par les navigateurs. Par conséquent, si UTF-8 est écrit en UTF8, le navigateur peut l'ignorer complètement. De plus, les alias d'encodage sont insensibles à la casse.

En HTML4, il existe trois méthodes pour préciser l'encodage de la page Selon la priorité, ce sont :

  1. Le champ Content-Type dans l'en-tête HTTP. est suivi d'un jeu de caractères.

  2. Utilisez la balise 09d68f3bd6bfd0744f37150627c89edd pour déclarer.

  3. Pour certaines ressources externes, comme les fichiers js chargés par la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, elles peuvent être déclarées via l'attribut charset sur la balise.

Bien sûr, cela ne fait aucun doute. Il est à noter que si la page est déclarée via la balise 09d68f3bd6bfd0744f37150627c89edd, lorsque le navigateur rencontre la balise, s'il constate que la page est déclarée via la balise 93f0f5c25f18dab9d176bd4f6de5d30e. l'encodage et la balise qu'il utilise sont Si la déclaration ne correspond pas, la page sera à nouveau analysée. Cela entraînera une nouvelle analyse d'une partie de la page, donc si vous essayez d'utiliser une balise pour déclarer l'encodage, il est recommandé d'écrire la balise le plus tôt possible. Une bonne pratique consiste à l'écrire après la balise

et avant toute autre balise. Concernant ce point, Google PageSpeed ​​​​a également une introduction correspondante.

Évolution des temps

e8e496c15ba93d81f6ea4fe5f55a2244Mais au fil du temps, les développeurs ont progressivement découvert une chose. Tout comme l'instruction la plus simple de DOCTYPE, en effet, lorsque le navigateur lit l'encodage de la balise e8e496c15ba93d81f6ea4fe5f55a2244, il ne suit pas strictement la norme. En somme, puisque lors de l'étape d'analyse HTML, l'encodage de la page doit être déterminé avant l'étape Tokenizer, il est impossible pour le navigateur de décomposer la structure de la balise http-equiv et d'en extraire la structure du content. balisez lorsque l'arborescence DOM est construite, tout comme l'analyse des attributs de l'arborescence DOM

et

, puis déterminez l'encodage. e8e496c15ba93d81f6ea4fe5f55a2244

En réalité, le navigateur fait une chose très simple pour lire l'encodage défini par la balise
     :

  1. e8e496c15ba93d81f6ea4fe5f55a2244Assurez-vous qu'il s'agit bien d'une balise , ceci est déterminé par la statut machine d'analyse HTML, qui peut être déterminée en ajoutant le caractère "94a82f1766d26dc3eee0160c112ba45b

  2. acbc3b8881b6b4f3abaf7379ad2340e7

  3. 5c63b0c9e2aeb7f2e73596ac1dc2ffb0

    5. … et bien d'autres Bizarre façon d’écrire.

    Ainsi, au fur et à mesure que l'histoire avançait, un jour, différents fabricants de navigateurs se sont réunis et ont commencé à discuter de cette question... En fin de compte, ils ont été surpris de constater que leurs implémentations étaient très similaire. (Peut-être qu'ils ont juste appris les uns des autres), ils ont donc décidé de faire de cette méthode un standard... Finalement, après une longue discussion, la méthode de déclaration de codage très appréciée en HTML5 est née. En HTML5, cela s'appelle un "élément méta charset", et sa forme la plus simple est la suivante : 
    <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属性。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code pour HTML5 Canvas pour implémenter des effets de flamme tels que des lancements de boules de feuArticle suivant：Exemple de code pour HTML5 Canvas pour implémenter des effets de flamme tels que des lancements de boules de feu

Articles Liés

Voir plus