Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails

Schauen wir uns zunächst an, wie das Postfach HTML-E-Mails anzeigt. Ich habe noch nie an einem E-Mail-System gearbeitet und die Filteralgorithmen hinter den großen E-Mail-Systemen sind für Außenstehende nicht so leicht zu verstehen. Daher können wir nur daraus schließen, welche Schreibmethoden vom Postfach akzeptiert werden und welche durch die Frontend-Anzeige herausgefiltert werden. Durch die Analyse von Gmail, Hotmail, 163, Sohu und Sina teile ich die Postfächer in zwei Kategorien ein:

Die erste Kategorie umfasst Gmail, Hotmail und Sohu. Bei diesem Postfachtyp wird der E-Mail-Inhalt in einem Div auf der gesamten Postfachseite angezeigt. Wie in der Abbildung gezeigt:

Zur zweiten Kategorie gehören 163 und Sina. Bei diesem Postfachtyp wird der E-Mail-Inhalt in einem eigenständigen Iframe angezeigt. Wie in der Abbildung gezeigt:

Freunde, die mit HTML vertraut sind, wissen, dass der Iframe-Inhalt ein unabhängiges Dokument ist, das nichts mit den Elementen und CSS der übergeordneten Seite zu tun hat und fast wie eine unabhängige Seite behandelt werden kann. Befindet sich der E-Mail-Inhalt in einem Div, ist der E-Mail-Inhalt ein integraler Bestandteil der gesamten Postfachseite. Offensichtlich sind E-Mails, die Iframe als Anzeigemethode verwenden, viel toleranter gegenüber dem E-Mail-Inhalt, da Sie dadurch über einen ausreichend unabhängigen Anzeigebereich verfügen. Die Div ist nicht so höflich. Stellen Sie sich vor, Sie würden dieses CSS in Ihre E-Mail schreiben. Dann würde die Schriftgröße auf der gesamten E-Mail-Seite 20 Pixel betragen und ein Chaos entstehen:
<style type="text/css">
Text {Schriftgröße: 20px}
</Stil>
Wenn wir eine einheitliche E-Mail-Vorlage schreiben müssen, die mit allen Postfächern kompatibel ist, müssen wir die oben beschriebene Methode zum Schreiben von externem CSS vermeiden. Darüber hinaus werden auch Stile wie Float und Position gefiltert, die abnormale Inhaltsflüsse bilden. Wenn Sie sie schreiben, wird dies wahrscheinlich die Leistung externer Postfächer beeinträchtigen.

Hier sind einige Schreibprinzipien:
1. Eine der globalen Regeln lautet: Schreiben Sie keine <style>-Tags, schreiben Sie keine Klassen, alle CSS verwenden Stilattribute und verwenden Sie Stil, um Inline-CSS für Elemente zu schreiben, die bestimmte Stile erfordern.

2. Die zweite globale Regel ist, weniger Bilder zu verwenden. Das Postfach filtert Ihre Bild-Tags nicht, aber das System lädt Bilder aus unbekannten E-Mails häufig standardmäßig nicht. Wenn eine E-Mail viele Bilder verwendet, wird sie hässlich und selbst der Inhalt ist nicht klar zu erkennen, wenn die Bilder nicht geladen werden. Ungeduldige Benutzer löschen sie direkt. Fügen Sie Bildern immer Alt hinzu.

3. Schreiben Sie keine Float-, Positions- und anderen Stile in den Stil, da diese gefiltert werden. Wie lässt sich also ein Links-Rechts-Layout oder ein komplexeres Layout erreichen? Tabelle verwenden.

4. Die Hintergrundfarbe kann im Stilinhalt festgelegt werden, das Bild wird jedoch gefiltert, was bedeutet, dass das Hintergrundbild nicht über CSS festgelegt werden kann. Es gibt aber ein sehr interessantes Elementattribut, auch Background genannt, mit dem man einen Bildpfad definieren kann. Das ist eine gute Alternative. Zwar ist die Funktion eingeschränkt, da sich beispielsweise das Hintergrundbild nicht positionieren lässt, aber immerhin ist es besser als nichts. Um beispielsweise einer Zelle einen Hintergrund hinzuzufügen, müssen Sie Folgendes schreiben:
<td Hintergrund = „http://image1.koubei.com/images/common/logo_koubei.gif“></td>

5. Das Postfach im Div-Modus unterstützt kein Flash und das Postfach im Iframe-Modus muss überprüft werden.

Abschließend möchte ich noch erwähnen, dass Sohus E-Mail sehr seltsam ist. Sie fügt nach jedem Textabsatz ein Leerzeichen ein, wodurch das normale Layout nicht auf eine Zeile passt und umgebrochen wird, was einige Layouts durcheinander bringt. Wenn Sie mit Sohu Mail kompatibel sein möchten, müssen Sie daher bei einigen kompakten Layouts besonders vorsichtig sein, versuchen, die Anzahl der Textsegmente zu reduzieren und genügend Breite zu belassen.