javascript 如何使用 HTML 和 CSS 为 gmail 制作电子邮件模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26187838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an email template for gmail using HTML and CSS
提问by aritroper
I was wondering how I could design an email template using HTML and CSS and then incorporate that into an email. I want to do it as other companies do when they send confirmation emails and newsletters.
我想知道如何使用 HTML 和 CSS 设计电子邮件模板，然后将其合并到电子邮件中。我想像其他公司在发送确认电子邮件和新闻通讯时那样做。
回答by dippas
Whether you prefer to code an email by hand, or use a pre-existing template, there are a few rules to keep in mind in creating an HTML email:
无论您喜欢手工编写电子邮件，还是使用预先存在的模板，在创建 HTML 电子邮件时都需要牢记一些规则：
- Utilize Tables in your Layouts
- Fixed-Width Positioning (for non-responsive emails)
- Pixel Units
- The Possibilities with CSS (check Ultimate Guide to CSS link below)
- Inline CSS
- Anchor Links Best Practices
- Test in All Major Clients
- Always Offer Web-Based Views
- Adding Image Content
- Avoid the Spam Folder!
- Add Un-Subscribe Option
- 在布局中使用表格
- 固定宽度定位（用于无响应的电子邮件）
- 像素单位
- CSS 的可能性（查看下面的 CSS 终极指南链接）
- 内联 CSS
- 锚链接最佳实践
- 在所有主要客户中进行测试
- 始终提供基于 Web 的视图
- 添加图像内容
- 避免垃圾邮件文件夹！
- 添加取消订阅选项
Take a look at these sites for more info on this subject:
查看这些网站以获取有关此主题的更多信息：
How to Code HTML Email Newsletters
9 Tricks to Design The Perfect HTML Newsletter
How To Code An Email Newsletter in 6 Simple Steps
The Ultimate Guide to CSS- A complete breakdown of the CSS support for every popular mobile, web and desktop email client
The Ultimate Guide to CSS- 对每个流行的移动、网络和桌面电子邮件客户端的 CSS 支持的完整细分
回答by Pebbs
A very useful book that I used before I start a job is:
我在开始工作之前使用的一本非常有用的书是：
Modern HTML Email - Jason Rodriguez
现代 HTML 电子邮件 - Jason Rodriguez
There are very few books on writing HTML for email, so this is one of the only decent ones I found!
关于为电子邮件编写 HTML 的书籍很少，所以这是我找到的唯一一本不错的书！
Whenever I start making an email, I use a starting point such as this below:
每当我开始制作电子邮件时，我都会使用如下的起点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{-webkit-text-size-adjust:none;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="640" align="center" valign="top">
<!--Insert content here-->
</td>
</tr>
</table>
</body>
</html>
This includes some fixes, such as a 100% wrapping table on the outside which means that Yahoo! will not left align your email and a fix for the line-height issue in Outlook.com, where Outlook.com makes all line-heights 131%. The width included in here is 640, which gives the email a fixed width for desktop and is normally 600-700px.
这包括一些修复，例如外部的 100% 环绕表，这意味着 Yahoo! 不会左对齐您的电子邮件并修复 Outlook.com 中的行高问题，其中 Outlook.com 将所有行高设为 131%。此处包含的宽度为 640，这使电子邮件具有固定的桌面宽度，通常为 600-700 像素。
Tables should be used at all times, and tables contain rows and columns (<tr>and <td>). Tables can be nested within eachother:
应始终使用表格，表格包含行和列（<tr>和<td>）。表可以相互嵌套：
<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Each row within a table needs to have the same number of columns, otherwise columns within a row will need to be nested within a table. Tables can also be stacked, so within a <td>, you can have multiple tables that will stack vertically without the need of rows. The content, such as text or images goes within a <td>.
表中的每一行都需要具有相同的列数，否则行中的列需要嵌套在表中。表格也可以堆叠，因此在一个 中<td>，您可以拥有多个垂直堆叠而不需要行的表格。内容（例如文本或图像）位于<td>.
All CSS styling should be inline:
所有 CSS 样式都应该是内联的：
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#fffffe; text-align:right; text-decoration:none; font-weight:normal;">Hello</td>
