Summary of HTML formatting standards for web-based email content

Summary of HTML formatting standards for web-based email content

1. Page requirements

1) Use standard headers and footers

XML/HTML CodeCopy content to clipboard
  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 > How to create a webpage-formatted email </ title >   
  6. </ head >   
  7. < body   style =”margin:0;padding:0″ >   
  8. </ body >   
  9. </ html >   

2) Use the gb2312 encoding format uniformly
3) The page display width is 400px-800px, and the height is generally controlled within one screen.
4) The page does not contain js code or flash content (if animation is required, use gif)
5) All images on the page must be absolute addresses
6) The content of the page is best presented in text form.

2. Code requirements

1) Use table to create the page, and the width must be set. Since some attributes of div format are not fully supported by email clients, it is recommended to avoid using it.
2) In the DTD declaration, please change <html xmlns=http://www.w3.org/1999/xhtml> to <html>
3) CSS is not allowed to be called externally or written into the <head> section; all styles are written into the tag.
4) Background images are prohibited.
5) Try to optimize the image as much as possible without affecting the image display effect to ensure that customers can see the image in the shortest possible time when they open the email, thereby increasing the email reading rate.
6) All images must have width, height and alt tags, and the alt content should not be too long and no special characters should appear.
7) Hotspots are prohibited for image links because map markers cannot be clicked normally in Outlook and the URL pointed to by the link cannot be opened.
8) The link opening method is unified as: _blank
9) The correct way to write mailto: Example: <mailto:[email protected]> [email protected]</a>
10) Floating layers are prohibited
11) The code must be clean, unnecessary spaces and carriage returns must be deleted, and the total code size should be less than 50K


3. Email Testing

1) Upload to the server, open the webpage, press ctrl+a, copy and paste into the email
2) Open the webpage locally, copy it directly, and then upload the picture in the email as an attachment.

<<:  Implementation of proxy_pass in nginx reverse proxy

>>:  Sharing experience on MySQL slave maintenance

Recommend

Example analysis of mysql variable usage [system variables, user variables]

This article uses examples to illustrate the usag...

HTML+CSS to achieve cyberpunk style button

First look at the effect: Preface: I came up with...

Nginx source code compilation and installation process record

The installation of the rpm package is relatively...

MySQL 8.0.15 installation and configuration method graphic tutorial under Windows

This article shares with you the graphic tutorial...

Steps to configure IIS10 under Win10 and support debugging ASP programs

Microsoft IIS IIS (Internet Information Server) i...

How to install and uninstall IIS7 components using the WIN2008 server command line

Note: Since .NET FrameWork cannot be run in core ...

HTML Code Writing Guide

Common Convention Tags Self-closing tags, no need...

Implementing a puzzle game with js

This article shares the specific code of js to im...

WeChat applet scroll-view realizes left and right linkage

This article shares the specific code for WeChat ...

Vue implements simple image switching effect

This article example shares the specific code of ...

Summary of problems that may occur when using JDBC to connect to Mysql database

First, clarify a few concepts: JDBC: Java databas...

How to verify whether MySQL is installed successfully

After MySQL is installed, you can verify whether ...

How to delete node_modules and reinstall

Table of contents Step 1: Install node_modules in...

Mini Programs use Mini Program Cloud to implement WeChat payment functions

Table of contents 1. Open WeChat Pay 1.1 Affiliat...

A brief discussion on the role of HTML empty links

Empty link: That is, there is no link with a targ...