Today I received a request to embed an HTML page in an email and send it as HTML. Do not know how to start, all kinds of search information, see examples. It turns out that creating a perfect HTML body for a message is a lot of work.
- For security reasons, mailbox HTML does not support any JavaScript scripts or external CSS styles
- Use the table TAB for overall layout
1. Prepare knowledge in advance:
- Table Table attributes
- TableCSS style
- Pay attention to development specifications as a whole
The mainstream mailboxes in China are QQ mailbox (PC +mobile), 163 mailbox, 126 mailbox, Sina mailbox, Apple's own mailbox (PC +mobile), Outlook. 1. Give up external chain style and internal style 2. Don't write CSS3 if you can. 5. Use progressive development (normal HTML can be compatible with various "black technology", in the mailbox may not be able to do so, so try to use progressive rather than compatible.) 6. Use only div and table tagsCopy the code- Overall page specification
1. Do not use HTML, body, etc. These tags will be filtered. 2. If you want to be mobile compatible and the page width is less than 360px, don't expect the scale of the meta tag, and don't expect some mobile mailbox software to automatically scale you. Use max-height and min-height self-adjusting on the outer tags. If only compatible with PC side in the best within 800px. 3. The size of HTML code should be less than 15KB (excluding images). 4 Keep the email subject to a maximum of 18 characters, avoiding special characters that may cause garbled characters. 5. Use a link as far as possible and write the chain directly. Answer may be spam. 6. If you send a large number of emails, you'd better change the email name at a certain number (about 20W). 7. Do not use the following sensitive and promotional text: free, preferential, special, special, low, cheap, cheap, video, make money, mass hair, get rich, get rich, open, salary, friends, pay, business opportunities, magic, treasure book, secret, intelligence, confidential, confidential, top secret, mystery, secret, etc. If necessary, please make sensitive words into pictures. Styles are not necessarily inherited, so repeat the following over time. 8. The length of the link address cannot exceed 255 characters, which may cause untraceable or link errors. <meta http-equiv=" content-type "Content ="text/ HTML; charset=utf-8" />Copy the code2, specific content style matters needing attention
Margin -- in the QQ mailbox PC side, margin cannot be filled in as a percentage. This style is invalid in the lower version of outlook. 3. Float -- Older Outlook not supported 5. Position -- not recommended at all 6. Background -- Older Outlook and Gmail not supported 7. Overflow -- Older Outlook is not supported 8. Text-overflow -- Older Versions of Outlook are not supportedCopy the code3. Try to write a plan
Dom align=center; dom width = height; dom background = 3 Blank segmentation & NBSP; 4. Set border=0 for all images. 5. 8. Separate style attributes, such as margin-left when using margin, etc. 9. Font-size :0; height:0; width:0; line-height:0; 11. Do not add block-level elements to inline elements or inline block elements 12. The image name cannot contain AD characters, otherwise the image will be displayed as "filtered advertisement" 13. The number of links should not exceed 10Copy the code5, test,
6. Email is required to be compatible with Outlook and other mailbox software, but many styles are not effective. The template found is as follows:
<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <! <table border="0" cellpadding="0" cellpadding="0" height="100%" width="100%" style=""> <tr> <td align="center" valign="top"> <! <table border="0" cellpadding="0" width="" style=""> <tr> <td align="center" valign=""></td> </tr> </table> </td> </tr> </table> </body> </html>Copy the code