Heim > Artikel > Web-Frontend > Anleitung zum Schreiben von HTML-E-Mail-E-Mail-HTML-Seiten
Anleitung zum Schreiben von HTML-E-Mail-E-Mail-HTML-Seiten
- 高洛峰Original
- 2017-02-16 13:47:512736Durchsuche
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>
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>
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 >
<p style="font: 8px/14px Arial, sans-serif;"></p>Schreiben Sie es so 1 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:
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
8. Der Hintergrundbildcode lautet wie folgt:
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
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
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!