上海網(wǎng)站建設?上海網(wǎng)站設計（m.legal-theory.net）

一個<img>標簽的ALT屬性，為無法下載圖像或圖像完全關閉用戶，提供了替代的內(nèi)容。我們一直使用這個屬性，使我們的內(nèi)容更容易訪問，但你可曾想過它實際上看起來像嗎？

我們將要使用的電子郵件作為講解案例。

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

如果我們來看看在我們的文件里的圖像，可能是下面這個樣子：

顯然ALT文本是沒有吸引力的?-?特別是鏈接。?我們可以做幾件事情來改變也一下。

主標題，我們打算使文字更大，將其更改為深藍色，而不是黑色。我們將通過添加一些樣式來實現(xiàn)它。

這是我們的原始代碼：

<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>

為了整體風格統(tǒng)一，社會媒體的連接，使它們成為白色：

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

<tr>

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

<a?>

<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?>

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

</a>

</td>

</tr>

</table>

就這么簡單！?現(xiàn)在，我們可以相信，我們的電子郵件，即使關閉圖像顯示效果也很好。