上海网站建设 上海网站设计（www.paiky.net）

一个<img>标签的ALT属性，为无法下载图像或图像完全关闭用户，提供了替代的内容。我们一直使用这个属性，使我们的内容更容易访问，但你可曾想过它实际上看起来像吗？

我们将要使用的电子邮件作为讲解案例。

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

如果我们来看看在我们的文件里的图像，可能是下面这个样子：

显然ALT文本是没有吸引力的 - 特别是链接。 我们可以做几件事情来改变也一下。

主标题，我们打算使文字更大，将其更改为深蓝色，而不是黑色。我们将通过添加一些样式来实现它。

这是我们的原始代码：

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

</td>

我们将添加一些文本样式，所以它看起来像这样：

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

</td>

为了整体风格统一，社会媒体的连接，使它们成为白色：

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">

<a href="http://www.twitter.com/" style="color: #ffffff;">

<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />

</a>

</td>

<td style="font-size: 0; line-height: 0;" width="20"> </td>

<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">

<a href="http://www.twitter.com/" style="color: #ffffff;">

<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />

</a>

</td>

</tr>

</table>

就这么简单！ 现在，我们可以相信，我们的电子邮件，即使关闭图像显示效果也很好。