I made a simple email campaign. I tried testing it by sending it to myself. However when I open it in my email it displays as raw html code. How do I email it to myself so that It displays as a campaign and not HTML raw code? I use gmail to send and open it.
我做了一个简单的电子邮件活动。我试着把它寄给自己。然而，当我在我的电子邮件中打开它时，它显示为原始的html代码。我如何把它发送给自己，让它显示为一个活动而不是HTML原始码?我使用gmail来发送和打开它。
Find below my the html code to my email campaign:
在我的html代码下面找到我的电子邮件活动:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=420, target-densitydpi=device-dpi">
<style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-width: 660px) {
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:15px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:15px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:170px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:198px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:400px !important; }
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
img { height: auto; line-height: 100%;}
}
/* Client-specific Styles */
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body { background-color: #ececec; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
} /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include code blocks in email. */
code {
white-space: normal;
word-break: break-all;
}
#background-table { background-color: #ececec; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #043948; color: #e7cba3; }
#top-bar a { font-weight: bold; color: #e7cba3; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body, td { font-family: HelveticaNeue, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 12px; color: #e7cba3; }
.header-content a { font-weight: bold; color: #e7cba3; text-decoration: none; }
#headline p { color: #e7cba3; font-family: HelveticaNeue, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #e7cba3; text-decoration: none; }
#left-sidebar .toc-item { font-family: HelveticaNeue, sans-serif; font-size: 12px; line-height: 16px; color: #00707b; margin-top: 0px; margin-bottom: 6px; }
#left-sidebar .toc-item a { color: #00707b; text-decoration: none; }
#left-sidebar .toc-heading { font-family: HelveticaNeue, sans-serif; font-size: 11px; line-height: 15px; color:#9a9661; font-weight:bold; }
#left-sidebar .toc-heading a { color: #9a9661; text-decoration: none; }
#left-sidebar .left-column-heading { font-family: HelveticaNeue, sans-serif; font-size: 11px; line-height:15px; color: #9a9661; font-weight:bold; }
#left-sidebar .left-column-heading a { color: #9a9661; text-decoration:none; }
#left-sidebar .left-column-subhead { font-family: HelveticaNeue, sans-serif; font-size: 13px; line-height: 16px; color: #999999; font-weight: bold; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-subhead a { color: #999999; text-decoration:none; }
#left-sidebar .left-column-content { font-family: HelveticaNeue, sans-serif; font-size: 12px; line-height: 16px; color: #9a9661; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-content a { color: #00707b; text-decoration: none; }
#right-sidebar .toc-item { font-family: HelveticaNeue, sans-serif; font-size: 12px; line-height: 16px; color: #00707b; margin-top: 0px; margin-bottom: 6px; }
#right-sidebar .toc-item a { color: #00707b; text-decoration: none; }
#right-sidebar .toc-heading { font-family: HelveticaNeue, sans-serif; font-size: 11px; line-height: 15px; color:#9a9661; font-weight:bold; }
#right-sidebar .toc-heading a { color: #9a9661; text-decoration: none; }
#right-sidebar .left-column-heading { font-family: HelveticaNeue, sans-serif; font-size: 11px; line-height:15px; color: #9a9661; font-weight:bold; }
#right-sidebar .left-column-heading a { color: #9a9661; text-decoration:none; }
#right-sidebar .left-column-subhead { font-family: HelveticaNeue, sans-serif; font-size: 13px; line-height: 16px; color: #999999; font-weight: bold; margin-top: 0px; margin-bottom: 16px; }
#right-sidebar .left-column-subhead a { color: #999999; text-decoration:none; }
#right-sidebar .left-column-content { font-family: HelveticaNeue, sans-serif; font-size: 12px; line-height: 16px; color: #9a9661; margin-top: 0px; margin-bottom: 16px; }
#right-sidebar .left-column-content a { color: #00707b; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #9a9661; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: HelveticaNeue, sans-serif; }
.article-title a { color: #9a9661; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 18px; font-family: HelveticaNeue, sans-serif; }
.article-content a { color: #00707b; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #00707b; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #e7cba3; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #e7cba3; font-weight: bold; text-decoration: none; }
#footer { background-color: #043948; color: #e2e2e2; }
#footer a { color: #e7cba3; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #e7cba3; white-space: normal; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]--></head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tbody><tr>
<td align="center" bgcolor="#ececec">
<table class="w640" style="margin:0 10px;" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w640" width="640" height="20"></td></tr>
<tr>
<td class="w640" width="640">
<table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#00707b">
<tbody><tr>
<td class="w15" width="15"></td>
<td class="w325" width="350" valign="middle" align="left">
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
<div class="header-content"><webversion>Web Version</webversion><span class="hide"> | <preferences lang="en">Update preferences</preferences> | <unsubscribe>Unsubscribe</unsubscribe></span></div>
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
</td>
<td class="w30" width="30"></td>
<td class="w255" width="255" valign="middle" align="right">
<table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w255" width="255" height="8"></td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td valign="middle"><fblike><img src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" border="0" width="8" height="14" alt="Facebook icon"=""></fblike></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><fblike>Like</fblike></div></td>
<td class="w10" width="10"></td>
<td valign="middle"><tweet><img src="https://img.createsend1.com/img/templatebuilder/tweet-glyph.png" border="0" width="17" height="13" alt="Twitter icon"=""></tweet></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>
<td class="w10" width="10"></td>
<td valign="middle"><forwardtoafriend lang="en"><img src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" border="0" width="19" height="14" alt="Forward icon"=""></forwardtoafriend></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><forwardtoafriend lang="en">Forward</forwardtoafriend></div></td>
</tr>
</tbody></table>
<table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w255" width="255" height="8"></td></tr>
</tbody></table>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="header" class="w640" width="640" align="center" bgcolor="#00707b">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w30" width="30"></td><td class="w580" width="580" height="30"></td><td class="w30" width="30"></td></tr>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="580">
<div align="center" id="headline">
<p>
<strong><singleline label="Title">ABC Widgets</singleline></strong>
</p>
</div>
</td>
<td class="w30" width="30"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="complex-content-row"><td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w15" width="15" bgcolor="#e2e2e2"></td>
<td id="left-sidebar" class="w140" width="140" bgcolor="#e2e2e2" valign="top" align="left">
<table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w140" width="140" height="15"></td></tr>
<tr>
<td class="w140" width="140">
<p align="left" class="left-column-heading"><singleline>TABLE OF CONTENTS</singleline></p>
<tableofcontents>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td width="3"></td>
<td valign="top"><p align="left" class="toc-item">•</p></td>
<td width="6"></td>
<td valign="top"><p align="left" class="toc-item"><strong><repeatertitle></strong></p></td>
</tr>
</tbody></table>
</tableofcontents>
</td>
</tr>
<tr><td class="w140" width="140" height="15"></td></tr>
</tbody></table>
<table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w140" width="140" height="15"></td></tr>
<tr>
<td class="w140" width="140">
<div align="left" class="left-column-heading"><singleline label="Title">IN OTHER NEWS</singleline></div>
</td>
</tr>
</tbody></table>
<repeater>
</repeater>
</td>
<td class="w15" width="15" bgcolor="#e2e2e2"></td>
<td class="w300" width="300" bgcolor="#ffffff" valign="top">
<table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w300" width="300" height="30"></td></tr>
</tbody></table>
<table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w30" width="30"></td>
<td class="w240" width="240">
<repeater>
</repeater>
</td>
<td class="w30" width="30"></td>
</tr>
</tbody></table>
</td>
<td class="w15" width="15" bgcolor="#e2e2e2"></td>
<td id="right-sidebar" class="w140" width="140" bgcolor="#e2e2e2" valign="top" align="left">
<table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w140" width="140" height="25"></td></tr>
<tr>
<td class="w140" width="140">
<div align="left" class="left-column-heading"><singleline label="Title">ALSO OF INTEREST</singleline></div>
</td>
</tr>
</tbody></table>
<repeater>
<layout label="Text only">
<table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w140" width="140" height="15"></td></tr>
<tr>
<td class="w140" width="140">
<p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p>
<div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
</tbody></table>
</layout>
<layout label="Text with image">
<table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w140" width="140" height="15"></td></tr>
<tr>
<td class="w140" width="140"><p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p></td>
</tr>
<tr>
<td class="w140" width="140"><img editable="true" label="Image" width="140" class="w140" border="0"></td>
</tr>
<tr><td class="w140" width="140" height="15"></td></tr>
<tr>
<td class="w140" width="140"><div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div></td>
</tr>
</tbody></table>
</layout>
</repeater>
</td>
<td class="w15" width="15" bgcolor="#e2e2e2"></td>
</tr>
</tbody></table>
</td></tr>
<tr>
<td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w170" width="170" bgcolor="#e2e2e2" height="15"></td>
<td class="w300" width="300" bgcolor="#ffffff" height="15"></td>
<td class="w170" width="170" bgcolor="#e2e2e2" height="15"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="w640" width="640">
<table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#043948">
<tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="30"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="360" valign="top">
<span class="hide"><p id="permission-reminder" align="left" class="footer-content-left"></p></span>
<p align="left" class="footer-content-left"><preferences lang="en">Edit your subscription</preferences> | <unsubscribe>Unsubscribe</unsubscribe></p>
</td>
<td class="hide w0" width="60"></td>
<td class="hide w0" width="160" valign="top">
<p id="street-address" align="right" class="footer-content-right"></p>
</td>
<td class="w30" width="30"></td>
</tr>
<tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="15"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
</tbody></table>
</td>
</tr>
<tr><td class="w640" width="640" height="60"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table></body></html>
Looking forward to your reply.
期待您的回复。
3 个解决方案
#1
1
A quick hacky way to do it is to create your email html and view it in a browser as a web page. Now ctrl+a select all the rendered html from the page, and paste it into the email you are composing.
一种快速的方法是创建你的电子邮件html并在浏览器中以网页的形式查看它。现在，ctrl+a从页面中选择所有呈现的html，并将其粘贴到您正在编写的电子邮件中。
This is definitely not the way to go about sending email campaigns, but it will send it as rendered html.
这绝对不是发送电子邮件活动的方式，但它会将它作为呈现的html发送。
Just note, that your images need to be hosted online, otherwise they will not show up.
请注意，您的图片需要在线托管，否则它们将不会出现。
#2
2
Add MIME-Version: 1.0 and Content-type: text/html to your mail headers.
添加MIME-Version: 1.0和内容类型:文本/html到您的邮件标题。
#3
1
That's not how it works. Email clients will escape your html characters, hence you seeing raw html in your inbox, unless you send with the proper MIME headers from a program or Email Service Provider.
事情不是这样的。电子邮件客户端会避开你的html字符，因此你会在收件箱中看到原始的html，除非你从一个程序或电子邮件服务提供商发送适当的MIME报头。
For testing webmail clients, I use this google docs spreadsheet which contains a script that uses your gmail account to send html email. I wouldn't use it for mass mailings however because google will probably block your account, but I use it to test send frequently to a few accounts without issue.
对于测试webmail客户端，我使用这个谷歌文档电子表格，其中包含一个使用gmail帐户发送html电子邮件的脚本。我不会用它来做大量的邮件，但是因为谷歌可能会阻塞你的帐户，但是我用它来测试频繁地发送到一些没有问题的帐户。
#1
1
A quick hacky way to do it is to create your email html and view it in a browser as a web page. Now ctrl+a select all the rendered html from the page, and paste it into the email you are composing.
一种快速的方法是创建你的电子邮件html并在浏览器中以网页的形式查看它。现在，ctrl+a从页面中选择所有呈现的html，并将其粘贴到您正在编写的电子邮件中。
This is definitely not the way to go about sending email campaigns, but it will send it as rendered html.
这绝对不是发送电子邮件活动的方式，但它会将它作为呈现的html发送。
Just note, that your images need to be hosted online, otherwise they will not show up.
请注意，您的图片需要在线托管，否则它们将不会出现。
#2
2
Add MIME-Version: 1.0 and Content-type: text/html to your mail headers.
添加MIME-Version: 1.0和内容类型:文本/html到您的邮件标题。
#3
1
That's not how it works. Email clients will escape your html characters, hence you seeing raw html in your inbox, unless you send with the proper MIME headers from a program or Email Service Provider.
事情不是这样的。电子邮件客户端会避开你的html字符，因此你会在收件箱中看到原始的html，除非你从一个程序或电子邮件服务提供商发送适当的MIME报头。
For testing webmail clients, I use this google docs spreadsheet which contains a script that uses your gmail account to send html email. I wouldn't use it for mass mailings however because google will probably block your account, but I use it to test send frequently to a few accounts without issue.
对于测试webmail客户端，我使用这个谷歌文档电子表格，其中包含一个使用gmail帐户发送html电子邮件的脚本。我不会用它来做大量的邮件，但是因为谷歌可能会阻塞你的帐户，但是我用它来测试频繁地发送到一些没有问题的帐户。