Tips for making HTML emails that can be displayed normally in mainstream mailboxes_HTML/Xhtml_Web page production

Suggestions for sending HTML emails: use style to write inline CSS; use less pictures; use tables to implement left and right layouts or more complex layouts; use background elements to set background images, etc.
Almost every membership-based website needs to send emails through the background to communicate with members, such as registration confirmation and marketing promotion. These letters sent by the website to members are often in plain text format and cannot meet the interface and interaction requirements. At this time, we need to send HTML pages. 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.
Suggestions for sending HTML emails: use style to write inline CSS; use less pictures; use tables to implement left and right layouts or more complex layouts; use background elements to set background images, etc.
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 mailboxes, I divided the mailboxes into two categories:
The first category includes gmail, hotmail, and sohu. In this type of mailbox, the email content is laid out in a certain div in the entire mailbox page.
The second category includes 163 and sina. In this type of mailbox, the email content is laid out in a separate iframe.
Friends who are familiar with HTML know that iframe content is treated as 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:
body {font-size:20px}

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