HTML5-Standards lernen – detaillierte Erklärung der Codierung-H5-Tutorial-php.cn

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>

Nach dem Login kopieren

Das einfachste HTML, <head> und <body>Es 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 <meta http-equiv="Content-Type">.
Für einige externe Ressourcen, wie z. B. JS-Dateien, die über das Tag <script> 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 <meta http-equiv="Content-Type">-Tag und vor allen anderen Tags zu schreiben. Zu diesem Punkt gibt es auch bei Google PageSpeed eine entsprechende Einführung. <head>

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 <meta>-Tags zu zerlegen und die Struktur des <meta> 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 <meta>-Tag definierte Codierung zu lesen:

Stellen Sie sicher, dass es sich um ein <meta>-Tag handelt. Dies wird durch den -Status der HTML-Parsing-Maschine bestimmt, der durch Hinzufügen des „<“-Zeichens zur „Meta“--Zeichenfolge ermittelt werden kann.
Suchen Sie die Zeichenfolge (hier gibt es kein Label-Konzept, sondern nur eine Zeichenfolge) und suchen Sie eine Teilzeichenfolge „charset“.
Rückwärts lesen, alle Leerzeichen ignorieren und das erste sinnvolle Zeichen finden c.

Wenn c nicht das Zeichen „=" ist, kehren Sie zu Schritt 2 zurück und setzen Sie die Suche fort.
Wenn c das Zeichen „=" ist, gehen Sie weiter nach unten.

Springen Sie dann alle Leerzeichen, einfachen Anführungszeichen, doppelten Anführungszeichen usw. heraus und scannen Sie rückwärts, bis Sie auf einfache Anführungszeichen, doppelte Anführungszeichen, Leerzeichen, End-Tags usw. stoßen . Das Zeichen, das erscheinen sollte, ist oben und die daraus gescannte Zeichenfolge wird abgefangen.
Analysieren Sie s und erhalten Sie den Codierungsalias.

Anhand des obigen Algorithmus ist es nicht schwer herauszufinden, dass die folgenden Schreibmethoden es dem Browser tatsächlich ermöglichen können, die Codierung korrekt zu identifizieren:

<meta http-equiv="Cotnent-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta charset=utf-8 />
…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>

Nach dem Login kopieren

当然这是HTML的语法，如果遵从XHTML并觉得XHTML更加亲切地话，写成<meta charset="utf-8" />也是没问题的。

而前文所述的具体获取编码的算法也被详细地记录在案，可以在这里看到。

到了HTML5时代，标准再次对编码的声明方式做了修正和细化，总得来说有以下的区别：

HTML5允许使用BOM来决定编码，但仅支持UTF-16的BOM（即U+FEFF），且没有说明BOM指定编码的优先级如何。
HTML5添加了meta charset标签。
HTML5规定如果一个页面没有指定编码，则使用ASCII作为其编码，而HTML4则规定浏览器可以根据所处的环境自行选择。

其他杂项

除了编码的基本声明方式外，标准中还有不少需要注意的细节：

如果使用<meta>标签声明编码的话，该编码只能是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声明来指定编码，即<?xml version="1.0" encoding="UTF-8" standalone="no" ?>。但是这个在IE6下会影响到DOCTYPE，所以开发者也不得在这一点上给予妥协，乖乖地去用HTML的声明方式。
关于现实中各编码声明方式的优先级，以及一些其他需要注意的细节，这篇文章值得一读。

最佳实践

尽可能使用HTTP头指定编码。
尽可能使用UTF-8，或者至少全站所有资源使用统一编码。
如果想使用UTF-16，就给文件加上BOM，以确定是Little Endian还是Big Endian的。
如果使用<meta>标签指定编码，可以不使用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!