mac 文本 alt_快速提示：请记住为ALT文本设置样式-优快云博客

mac 文本 alt

<img>标记内的alt属性为无法下载图像或完全关闭图像的用户提供替代内容。我们一直使用此属性来使我们的内容更易于访问，但是您是否考虑过它的实际外观？

我们将使用上一教程中构建的电子邮件模板作为示例，但是这些原理同样适用于基于浏览器的Web设计。

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

如果我们在关闭图像的情况下查看文件，则外观如下：

显然，ALT文字没有吸引力，尤其是链接。我们可以做一些事情使它变得爵士乐。

对于主要标题，我们将使文本更大，并将其更改为深蓝色而不是黑色。为此，我们向父元素（在本例中为单元格）添加样式。然后，这些样式将应用于该单元格内的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">&nbsp;</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>

就那么简单！现在我们可以确信即使关闭图像，我们的电子邮件也能很好地显示。