Heim > Artikel > Web-Frontend > HTML5-Standards lernen – detaillierte Erklärung der Codierung

HTML5-Standards lernen – detaillierte Erklärung der Codierung

黄舟Original: 2017-03-21 15:14:151616Durchsuche

Ich glaube, dass jeder Front-End-Ingenieur schon einmal auf den „verstümmelten Code“-Bruder gestoßen ist. Egal wie solide Ihr Fundament ist, Sie werden unweigerlich gelegentlich ein paar Tassen Tee mit dem „verstümmelten Code“-Bruder trinken während des Produktionsprozesses. Wie legen Sie als Front-End-Ingenieur die Kodierung einer Seite fest? Wissen Sie, wie der Browser die Kodierung erkennt?

Zunächst ein sehr einfaches Beispiel: Verwenden Sie Yujians HTML-Seite, um den Unterschied zwischen verschiedenen Browsern zu erkennen:

<!DOCTYPE html>

Das einfachste HTML, 93f0f5c25f18dab9d176bd4f6de5d30e und 6c04bd5ca3fcae76e30b72ad730ca86dEs gibt keine Inhalt, und der Server gibt keine spezifische Codierungsanweisung aus. Öffnen Sie sie direkt vom lokalen Computer und überprüfen Sie die Codierung der Seite in jedem Browser:

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

Wie aus der -Tabelle ersichtlich ist, verfügt jeder Browser über eine andere Analyse für Seiten, die keine Mittel zur Deklaration der Codierung verwenden. Natürlich hat es auf der einfachsten Seite keine Auswirkung, egal welche Codierung verwendet wird (natürlich ist die Prämisse eine Obermenge von ASCII), aber es reicht aus, um zu zeigen, wie wichtig es ist, die Codierung richtig einzustellen.

Codierungsanweisung

HTML4 und HTML5 übernehmen jeweils ein Kapitel, um die Codierungsanweisungsmethode zu erläutern. Sie können hier klicken, um die relevanten Kapitel von HTML4 anzuzeigen, oder hier klicken, um sie anzuzeigen die relevanten Kapitel des HTML5-Kapitels.

Was ist zunächst einmal Kodierung? Bei der Codierung wird der Browser (oder Benutzeragent) angewiesen, einen speziellen Algorithmus zu verwenden, um den Bytestrom auf eine bestimmte Weise zu analysieren und den wirklich korrekten Inhalt zu erhalten. Im HTML-Standard können Kodierungen durch Aliase dargestellt werden. Kodierungsaliase stammen aus der IANA-Definition und nur Kodierungen, die in dieser Liste erscheinen, können von Browsern erkannt werden. Wenn UTF-8 daher als UTF8 geschrieben ist, wird es vom Browser möglicherweise vollständig ignoriert. Darüber hinaus wird bei Codierungsaliasnamen Groß- und Kleinschreibung nicht beachtet.

In HTML4 gibt es drei Methoden, um die Kodierung der Seite anzugeben. Je nach Priorität sind dies:

Das Content-Type-Feld im HTTP-Header gefolgt von Zeichensatz.
Verwenden Sie zum Deklarieren das Tag 09d68f3bd6bfd0744f37150627c89edd.
Für einige externe Ressourcen, wie z. B. JS-Dateien, die über das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a geladen werden, können sie über das charset-Attribut des Tags deklariert werden.

Daran besteht natürlich kein Zweifel. Es ist zu beachten, dass der Browser, wenn er auf das Tag trifft, dies feststellt, wenn die Seite über das Tag deklariert wird Codierung und Tag, die es verwendet, sind: Wenn die Deklaration nicht übereinstimmt, wird die Seite erneut analysiert. Dadurch wird ein Teil der Seite erneut analysiert. Wenn Sie also versuchen, die Codierung mit einem Tag zu deklarieren, wird empfohlen, das Tag so früh wie möglich zu schreiben. Eine bewährte Vorgehensweise besteht darin, es nach dem 09d68f3bd6bfd0744f37150627c89edd-Tag und vor allen anderen Tags zu schreiben. Zu diesem Punkt gibt es auch bei Google PageSpeed eine entsprechende Einführung. 93f0f5c25f18dab9d176bd4f6de5d30e

Evolution der Zeit

Aber im Laufe der Zeit entdeckten die Entwickler nach und nach eines. Genau wie bei der einfachsten Anweisung von DOCTYPE folgt der Browser beim Lesen der Codierung des

-Tags tatsächlich nicht strikt dem Standard. Alles in allem ist es für den Browser unmöglich, die Struktur des e8e496c15ba93d81f6ea4fe5f55a2244-Tags zu zerlegen und die Struktur des e8e496c15ba93d81f6ea4fe5f55a2244 herauszunehmen, da in der HTML-Parsing-Phase die Kodierung der Seite vor der Tokenizer-Phase bestimmt werden muss Tag, wenn der DOM-Baum erstellt wird, genau wie die DOM-Baum-Attribute http-equiv und content analysieren und dann die Codierung bestimmen.

In Wirklichkeit macht der Browser eine sehr einfache Sache, um die durch das e8e496c15ba93d81f6ea4fe5f55a2244-Tag definierte Codierung zu lesen:

Stellen Sie sicher, dass es sich um ein e8e496c15ba93d81f6ea4fe5f55a2244-Tag handelt. Dies wird durch den -Status der HTML-Parsing-Maschine bestimmt, der durch Hinzufügen des „37e9524917dce1e49b76b8d32c73cf06
acbc3b8881b6b4f3abaf7379ad2340e7
5c63b0c9e2aeb7f2e73596ac1dc2ffb0
…und viele mehr Seltsame Art zu schreiben.

Im Laufe der Geschichte saßen schließlich eines Tages verschiedene Browserhersteller zusammen und begannen, dieses Thema zu diskutieren ... Am Ende waren sie überrascht, dass ihre Implementierungen sehr gut waren ähnlich (Vielleicht haben sie einfach voneinander gelernt), also beschlossen sie, diese Methode in einen Standard umzuwandeln ... Nach langer Diskussion wurde schließlich die weithin beliebte Codierungsdeklarationsmethode in HTML5 geboren. In HTML5 wird dies als „Meta-Charset-Element“ bezeichnet und seine einfachste Form ist wie folgt:

<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属性。

Das obige ist der detaillierte Inhalt vonHTML5-Standards lernen – detaillierte Erklärung der Codierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für HTML5 Canvas zur Implementierung von Flammeneffekten wie dem Abfeuern von FeuerbällenNächster Artikel：Beispielcode für HTML5 Canvas zur Implementierung von Flammeneffekten wie dem Abfeuern von Feuerbällen

In Verbindung stehende Artikel

Mehr sehen