有一点我需要你特别注意：图像非常适合电子邮件，只要它们是 a：尺寸小并且 b：有一个很好地描述它们的 alt 标签。 我相信您知道，为了在电子邮件中显示图像，该电子邮件的收件人必须允许图像显示。 如果他们不这样做，就没有什么可以告诉他们应该期待什么。 如果您不为盲人用户提供描述，这也是一个可访问性问题。 然而，那是另一回事了。 所以，教训是：总是使用带有 alt 标签的小图片！
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>
内联样式
我们要做的最后一件事是为这个 HTML 电子邮件模板提供内联 CSS 样式。 这就是使电子邮件出现的原因，正如您到目前为止看到的那样，这封电子邮件看起来一点也不漂亮。 我会将这部分分成小块，这样它就不会变得过于庞大。
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>
第四排
这是迄今为止此 HTML 电子邮件模板中最程式化的部分。 正如您在下面的代码中所看到的，发生了很多事情。 首先，整行都获得了新的背景颜色和文本颜色，以确保文本可见——就像在标题中一样。 第一个和第二个单元格及其内容都进行了完全相同的样式更改。 首先，单元格本身获得了新的背景和文本颜色。 然后，其标题中的链接变为黄色。 最后，最后一段被加了下划线，为了增加一些分隔，也添加了边距。 正如我所说，第二个单元格及其内容得到了完全相同的样式化。
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
最后，页脚。 这里发生的事情很少； 通过填充只是一些间距，就是这样！
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
最后的话
本教程有点冗长，但我希望您现在了解从头开始创建 HTML 电子邮件模板需要什么。 这不是一个复杂的概念，但它可能很乏味。 现在，轮到您开始制作外观精美的高端电子邮件了！ 您可以结合多种技术来创建电子邮件模板，使其更加独特。
