HTML Email preparation

Summary review

The interviewer is more likely to be satisfied
10 differences between arrow functions and normal functions
HTML blank Chinese character placeholder
I want to learn more about how to judge arrays

First, HTML Email preparation and development scenarios

If you place an order, the caller will send you an email with details
CMB may send you your bill in the mail
I’ll send you an E-mail on my birthday
I’ll email you when I get the job
Anniversary mail

Second, problems encountered

Email compatibility is poor

The context of the mail content or the external container (hereinafter referred to as the environment) is determined by the mail service provider. Different mail service providers have some differences in the support of front-end style layout. This requires that the contents of the message be displayed in a compatible manner in all cases.

Email container is different

Your email front-end code may be placed in an iframe, so your content is placed inside the body; It might be in a div, and your content will be in that div.

Email Built-in Settings

The email software itself sets up some CSS, which may have unknown effects on you. The docType may not be declared at all, and even if it is, it’s not the doctype you want.

Avoid nesting in incorrect containers

Since the container could be a body or div, our email content should not be a full HTML. So the mail content should be an HTML fragment with div as the root node.

Iii. Environment (External container)

The mail code we wrote is different from the external container of the different mail service provider.

QQ mailbox: I wrote the content is nested in a div

Iv. Doctype developed

A document type tag is a standard Generic Markup language document type declaration whose purpose is to tell the standard Generic Markup Language parser what document type definition (DTD) it should use to parse documents.

The most compatible Doctype is XHTML 1.0 Strict, and in fact Gmail and Hotmail will delete your Doctype and replace it with this one. Using this Doctype means that you can’t use HTML5 syntax.

5. Layout of development

Tables are recommended for the layout of web pages.
CSS inline, can not write style in the head tag, also can not be linked.
Cannot be positioned by floating. Position: absolute; float:left; Float can be identified in QQ email client, but not in Outlook.
To ensure compatibility, set the email width to 600px and maximum 600px;

The layout of a web page must use tables. First, place a large outermost table to set the background. In the inner layer, place the second table. Used to display content. The second table is set to be 600 pixels wide to prevent it from exceeding the display width of the client.

Sixth, the development style

Avoid CSS conflicts or overwriting
Try to use non-semantic tags such as div and SPAN.
Avoid abbreviations of CSS property values
font-size:0; Very important, otherwise QQ mailbox will automatically fill in a lot of space, affect the layout
Reduce unnecessary gaps and Spaces, which affect the beauty of the page

<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"<div style= "box-sizing: border-box! Important"margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">
Copy the code

It is best to use inline styles for all CSS rules. Because of the style placed in the header of the page, it is likely to be deleted by the client. In addition, do not use abbreviations of CSS. Some clients do not support CSS rules. Because the environment may already have CSS set up, such as some reset, some.class. So we can only use inline style to ensure our effect, and set the base style on the content root node, and try to use div, SPAN, and other non-semantic tags.

Vii. Developing pictures

Use less img. Email does not filter your IMG tags, but by default the system does not load images of unsolicited emails
If you want img, make sure you have Alt and title;
In Outlook, the img is at the highest 1728px, anything over 1728 will be truncated
Outlook may automatically shrink the IMG to a maximum of 1728px.
I suggest clipping img and stacking it together
Some clients put a border around img links. Remove the border.

<img border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;"> 
Copy the code

Images are the only external source you can refer to. Other external resources, such as style sheet files, font files, video files, etc., cannot be referenced at all. Some clients attach a border to the image link. Remove the border. Note that many clients don’t display images by default (Gmail, for example), so make sure the main content can be read even without images.

Viii. Background of development

Use background sparingly. It is recommended to use cut IMG whenever possible
Gmail also doesn’t support CSS background images
In outlook2007, Outlook2010, the background image will not display