Use HTML to write simple email templates_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Use HTML to write simple email templates_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:36:25

Original

2175 people have browsed it

Today, I want to write about a "low-tech" question.

I have subscribed to a lot of newsletters, such as JavaScript Weekly. Get a weekly email with the big stories of the week.
2015712153636746.jpg (349×460)

One day, I was thinking, can I also make an email like this?

Then, I found that it was not that easy. Putting aside the background and editing work, just designing an Email template requires a lot of thought.
2015712153840405.jpg (550×671)

Because this formatted email is actually a web page, its official name is HTML Email. Whether it displays properly depends entirely on the mail client. Most email clients (such as Outlook and Gmail) filter HTML settings, making emails unrecognizable.

I found that the trick to writing HTML emails is to use the web page creation method from 15 years ago. Below is the writing guide I put together.

1. Doctype

Currently, the most compatible Doctype is XHTML 1.0 Strict. In fact, Gmail and Hotmail will delete your Doctype and replace it with this Doctype.

XML/HTML CodeCopy content to clipboard

>
<html xmlns="http: //www.w3.org/1999/xhtml">
　<head>
　<meta http-equiv=" Content-Type" content="text/html; charset=UTF-8" />
　<title>HTML Email Writing Guidetitle>
　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
　head>
html>

Using this Doctype means that HTML5 syntax cannot be used.

　2. Layout

The layout of the web page must use tables. First, place a large outermost table to set the background.

XML/HTML CodeCopy content to clipboard

<body style="margin: 0; padding: 0;">
　<table border="1" cellpadding="0" cellspacing="0" width="100%">
　　<tr>
　　　<td> Hello! td>
　　tr>
　table>
body>

　　表格的 border 属性等于1, 是为了方便开发。正式发布的时候，再把这个属性设为0。

　　在内层，放置第二个表格。用来展示内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。

XML/HTML Code复制内容到剪贴板

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
　<tr>
　　<td> Row 1 td>
　tr>
　<tr>
　　<td> Row 2 td>
　tr>
　<tr>
　　<td> Row 3 td>
　tr>
table>

　　邮件内容有几个部分，就设置几行（row）。

　　3. 图片

　　图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。

　　有些客户端会给图片链接加上边框，要去除边框。

CSS Code复制内容到剪贴板

　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
　　a img {border:none;}
　　border="0" style="display:block;">

It should be noted that many clients do not display images by default (such as Gmail), so make sure that the main content can be read even without images.

4. Inline style

It is best to use inline styles for all CSS rules. Because the styles placed in the head of the web page are likely to be deleted by the client. For client support for CSS rules, please see here.

In addition, do not use the abbreviation form of CSS, some clients do not support it. For example, don’t write something like this:

XML/HTML CodeCopy content to clipboard

style="font: 8px/14px Arial, sans-serif;"

If you want to express

XML/HTML CodeCopy content to clipboard

<p "margin: 1em 0;"> It should be written as follows:

XML/HTML Code

Copy content to clipboard

style="margin-top: 1em ; margin-bottom: 1em; margin-left: 0; margin-right: 0;"> 5. W3C checksum testing tool

It is necessary to ensure that the final code can pass W3C verification, because some clients will strip off unqualified attributes. Also use the testing tool (

, 2,

) to view the display results on different clients. When sending HTML Email, don’t forget that the MIME type cannot be used

XML/HTML Code

Copy content to clipboard

Content-Type: text/plain;