Anleitung zum Schreiben von HTML-E-Mail-E-Mail-HTML-Seiten-HTML-Tutorial-php.cn

Anleitung zum Schreiben von HTML-E-Mail-E-Mail-HTML-Seiten

高洛峰

Freigeben： 2017-02-16 13:47:51

Original

2813 Leute haben es durchsucht

Vorwort

Jeder, der jemals HTML in E-Mails geschrieben hat, sollte wissen, dass HTML in E-Mails im Allgemeinen mithilfe von Tabellen aufgebaut ist. Warum? Der Grund dafür ist, dass die meisten E-Mail-Clients (wie Outlook und Gmail) HTML-Einstellungen filtern und E-Mails dadurch unkenntlich machen.

Nach vielen E-Mail-Schreibübungen und der Anleitung von Du Niang habe ich herausgefunden, dass der Trick beim Schreiben von HTML-E-Mails darin besteht, die Methode zur Webseitenerstellung von vor 15 Jahren zu verwenden.

Im Folgenden finden Sie einige Regeln für das Schreiben von HTML-E-Mails

Teilfokusregeln

1. Doctype

Derzeit ist XHTML 1.0 Strict der kompatibelste Doctype. Tatsächlich löschen Gmail und Hotmail Ihren Doctype und ersetzen ihn durch den folgenden Doctype (HTML5-Syntax kann nicht verwendet werden)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 　<head>4 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5 　　<title>HTML Email编写指南</title>6 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>7 　</head>8 </html>

Nach dem Login kopieren

2. Layout

Das Layout von Webseiten muss Tabellen verwenden. Platzieren Sie zunächst eine große äußerste Tabelle, um den Hintergrund festzulegen, und verschachteln Sie dann die Tabelle darin für den spezifischen Inhalt (denken Sie nicht an p, p usw.).

1 <body style="margin: 0; padding: 0;">2 　<table border="1" cellpadding="0" cellspacing="0" width="100%">3 　　<tr> 4 　　　<td> Hello! </td>5 　　</tr>6 　</table>7 </body>

Nach dem Login kopieren

3. Bilder

Bilder sind die einzigen externen Ressourcen, die zitiert werden können. Andere externe Ressourcen wie Stylesheet-Dateien, Schriftartendateien, Videodateien usw. können nicht zitiert werden.

Einige Clients fügen Bildlinks Rahmen hinzu, die dann entfernt werden müssen.

Zu beachten ist, dass viele Clients standardmäßig keine Bilder anzeigen (z. B. Gmail), stellen Sie daher sicher, dass der Hauptinhalt auch ohne Bilder lesbar ist.

1 >

4. Inline-Stile

Am besten verwenden Sie Inline-Stile für alle CSS-Regeln. Denn die im Kopf der Webseite platzierten Stile werden wahrscheinlich vom Client gelöscht. Informationen zur Client-Unterstützung für CSS-Regeln finden Sie hier.

Verwenden Sie außerdem nicht die Abkürzungsform von CSS, da einige Clients diese nicht unterstützen. Schreiben Sie es beispielsweise nicht so:

<p style="font: 8px/14px Arial, sans-serif;"></p>

Nach dem Login kopieren

Schreiben Sie es so

5. W3C-Prüfsummentesttool

Um sicherzustellen, dass der endgültige Code W3C bestehen kann Überprüfung, da einige Clients nicht qualifizierte Attribute entfernen. Nutzen Sie auch die Testtools (1, 2, 3), um die Anzeigeergebnisse auf verschiedenen Clients zu überprüfen.

Vergessen Sie beim Senden von HTML-E-Mails nicht, dass der MIME-Typ nicht verwendet werden kann

1 Content-Type: text/plain;

Zu verwenden

1 Inhaltstyp: Mehrteilig/Alternativ;

6. Die Verwendung von Vorlagen, die andere bereits erstellt haben, ist eine gute Wahl (hier und hier), und Sie können mehr online finden.

Wenn Sie es selbst entwickeln, können Sie sich auf HTML Email Boilerplate und Emailology beziehen.

Globale Regeln

1. Bitte stellen Sie die Seitenbreite auf 550 bis 650 Pixel ein.

2. Verwenden Sie Tabellen für das Layout.

3. Wenn die E-Mail in der Mitte angezeigt werden soll, setzen Sie bitte align="center" in der Tabelle.

4. Schreiben Sie nicht das Tag oder die Klasse „Style“. Verwenden Sie „Style“, um Inline-CSS für jedes Element zu schreiben, das welchen Stil benötigt.

5. Verwenden Sie nicht den CSS-Stil externer Links, um Text und Bilder zu definieren (der CSS-Stil externer Links wird nicht in E-Mails gelesen, daher wird der Stil des E-Mail-Inhalts durch gesendete E-Mails beeinträchtigt). verloren gegangen ist), lautet die korrekte Schreibweise: Text.

6. Verwenden Sie kein Flash, Java, Javascript, Frames, Iframe, ActiveX und DHTML. Wenn die Bilder auf der Seite dynamisch sein müssen, konvertieren Sie die Flash-Datei in eine GIF-Animation Es wird nicht normal angezeigt, da Outlook 2007 die GIF-Animation einschränkt.

7. Verwenden Sie keine anderen Tags wie Body, Meta und HTML als

. Einige E-Mail-Systeme filtern diese heraus.

8. Der Hintergrundbildcode lautet wie folgt:

, aber bitte beachten Sie, dass Outlook unterstützt keine Hintergrundbilder. Nicht erkannt.

9. Das Attribut „font-family“ darf nicht leer sein, da es sonst von QQ als Spam blockiert wird.

10. Wenn am Innenrand oder oben und unten in der E-Mail-Vorlage Leerzeichen vorhanden sind, verwenden Sie keine Auffüllung. Sie müssen das Standard-TD verwenden, um das Leerzeichen festzulegen. Andernfalls wird jedes Postfach anders analysiert .

11. Hinweise zur Definition der Zeilenhöhe im Yahoo-Postfach: Die Zeilenhöhe muss in einem Element auf Blockebene definiert werden. Wenn in td ein p-Tag vorhanden ist, muss auch die Zeilenhöhe in p definiert werden. Unabhängig davon, ob es sich um td oder p handelt, muss bei einem Hyperlink die Zeilenhöhe im a-Tag definiert werden. Wenn die Zeilenhöhe nur in td oder p definiert ist, kann Yahoo Mailbox die Zeilenhöhe in a nicht erkennen.

12. Verwenden Sie Float, Margin und Padding weniger. Absolute Positionierung kann nicht verwendet werden >13. Wenn zwischen td und td eine Lücke besteht, verwenden Sie td. Wenn Sie verwenden, sind keine Leerzeichen vorhanden. Wenn zwischen td eine Lücke besteht, müssen sie durch getrennt werden. Wenn es sich jedoch um eine Tabelle handelt, enthält der Inhalt in

Leerzeilen oben und unten.

14. Das Postfach filtert Ihre IMG-Tags nicht, aber das System lädt standardmäßig keine Bilder von Fremden geladen, es war so hässlich, dass der Inhalt nicht deutlich zu sehen war, und ungeduldige Benutzer löschten es direkt. Stellen Sie sicher, dass Sie dem Bild Alt hinzufügen.

Outlook-Regeln

1. Das Festlegen des Rands in ist ungültig, unabhängig davon, ob es sich um Margin-Left, Margin-Right, Margin-Top oder Margin-Boottom handelt.

2. Wenn Sie das

-Tag verwenden möchten, müssen Sie die Zeilenhöhe zwischen der oberen und unteren Zeile des

-Tags berücksichtigen.

Yahoo-Regeln

1. Die Einstellung von align="center" in der Tabelle kann nicht zentriert werden und muss inline sein: style="margin: 0 auto, width: XX"

Foxmail-Regeln

1. Rand aller P-Tags in Foxmail: 0; Rand muss festgelegt werden, wenn P-Tags verwendet werden

Weitere Artikel zum Schreiben von HTML-E-Mail-Seiten Bitte achten Sie auf die chinesische PHP-Website!