Summary of principles for writing HTML pages for email messages_HTML/Xhtml_Web page production

Since the HTML email is not an independent HOST page on this site, it is hosted on others. So writing HTML emails is very different from writing HTML pages. Because all mainstream mailboxes for netizens will more or less filter the HTML emails they receive in the background. There is no doubt that JS code is strictly filtered out, including all event listening attributes, such as onclick and onmouseover. This is based on email security considerations. Not only that, CSS code will also be partially filtered. What I want to talk about is how to write HTML emails that are not filtered by major mainstream mailboxes and can be displayed normally.

First, let’s take a look at how the mailbox displays HTML emails. I have never worked on an email system myself, and the filtering algorithms in the background of major mailboxes are not easy for outsiders to know. Therefore, we can only use front-end display to infer which writing methods are accepted by the mailbox and which ones will be filtered out. Through the analysis of gmail, hotmail, 163, sohu, and sina, I divided the mailboxes into two categories:

The first category includes gmail, hotmail, and sohu. For this type of mailbox, the email content is laid out in a certain div in the entire mailbox page. As shown in the picture:

The second category includes 163 and sina. In this type of mailbox, the email content is laid out in a separate iframe. As shown in the picture:

Friends who are familiar with HTML know that iframe content is an independent document and is independent of the elements and CSS of the parent page. It can almost be treated as an independent page. And if the email content is in a div, then the email content is an integral part of the entire mailbox page. Obviously, mailboxes that use iframe as a presentation method will be much more tolerant of email content, because it gives you a sufficiently independent space for expression. The div is not so polite. Just imagine, if you write this CSS sentence in your email, will the font size on the entire email display page become 20px and it will be messed up:

We need to write a unified email template that is compatible with each mailbox, so we must avoid the above external CSS writing method, and something similar to Styles such as float and position that become abnormal content flows will also be filtered. If you write them, it is likely to affect the performance of the external mailbox.

I will list some writing principles below:
1. One of the global rules, do not write the