Anleitung zum Schreiben von HTML-E-Mail-E-Mail-HTML-Seiten
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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
