欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用HTML編寫簡單的郵件模版

WEB開發(fā)者   發(fā)布時(shí)間：2015-07-12 15:33:11   作者：佚名   我要評(píng)論
這篇文章主要介紹了使用HTML編寫簡單的郵件模版,作者主張極簡至上主義...可以先看文章結(jié)尾處鏈接中介紹的模版成品,需要的朋友可以參考下

今天，我想寫一個(gè)"低技術(shù)"問題。

　　話說我訂閱了不少了新聞郵件（Newsletter），比如JavaScript Weekly。每周收到一封郵件，了解本周的大事。
2015712153636746.jpg (349×460)

　有一天，我就在想，是不是我也能做一個(gè)這樣的郵件？

　　然后，就發(fā)現(xiàn)這事不那么容易。拋開后臺(tái)和編輯工作，單單是設(shè)計(jì)一個(gè)Email樣板，就需要不少心思。
2015712153840405.jpg (550×671)

因?yàn)檫@種帶格式的郵件，其實(shí)就是一張網(wǎng)頁，正式名稱叫做HTML Email。它能否正常顯示，完全取決于郵件客戶端。大多數(shù)的郵件客戶端（比如Outlook和Gmail），會(huì)過濾HTML設(shè)置，讓郵件面目全非。

　　我發(fā)現(xiàn)，編寫HTML Email的竅門，就是使用15年前的網(wǎng)頁制作方法。下面就是我整理的編寫指南。

　　1. Doctype

　　目前，兼容性最好的Doctype是XHTML 1.0 Strict，事實(shí)上Gmail和Hotmail會(huì)刪掉你的Doctype，換上這個(gè)Doctype。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5. 　<head>  
  6.   
  7. 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  8.   
  9. 　　<title>HTML Email編寫指南</title>  
  10.   
  11. 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
  12.   
  13. 　</head>  
  14.   
  15. </html>  

　　使用這個(gè)Doctype，也就意味著，不能使用HTML5的語法。

　　2. 布局

　　網(wǎng)頁的布局（layout）必須使用表格（table）。首先，放置一個(gè)最外層的大表格，用來設(shè)置背景。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body style="margin: 0; padding: 0;">  
  2.   
  3. 　<table border="1" cellpadding="0" cellspacing="0" width="100%">  
  4.   
  5. 　　<tr>  
  6. 　　　<td> Hello! </td>  
  7. 　　</tr>  
  8.   
  9. 　</table>  
  10.   
  11. </body>  

　　表格的 border 屬性等于1, 是為了方便開發(fā)。正式發(fā)布的時(shí)候，再把這個(gè)屬性設(shè)為0。

　　在內(nèi)層，放置第二個(gè)表格。用來展示內(nèi)容。第二個(gè)table的寬度定為600像素，防止超過客戶端的顯示寬度。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">  
  2.   
  3. 　<tr>  
  4. 　　<td> Row 1 </td>  
  5. 　</tr>  
  6.   
  7. 　<tr>  
  8. 　　<td> Row 2 </td>  
  9. 　</tr>  
  10.   
  11. 　<tr>  
  12. 　　<td> Row 3 </td>  
  13. 　</tr>  
  14.   
  15. </table>  

　　郵件內(nèi)容有幾個(gè)部分，就設(shè)置幾行（row）。

　　3. 圖片

　　圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表文件、字體文件、視頻文件等，一概不能引用。

　　有些客戶端會(huì)給圖片鏈接加上邊框，要去除邊框。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. 　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   
  2.   
  3. 　　a img {border:none;}   
  4.   
  5. 　　<img border="0" style="display:block;">  

　　需要注意的是，不少客戶端默認(rèn)不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內(nèi)容也能被閱讀。

　　4. 行內(nèi)樣式

　　所有的CSS規(guī)則，最好都采用行內(nèi)樣式。因?yàn)榉胖迷诰W(wǎng)頁頭部的樣式，很可能會(huì)被客戶端刪除?？蛻舳藢SS規(guī)則的支持情況，請看這里。

　　另外，不要采用CSS的簡寫形式，有些客戶端不支持。比如，不要寫成下面這樣：

    　　

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. style="font: 8px/14px Arial, sans-serif;"  

　　如果想表達(dá)

    　

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. 　<p style="margin: 1em 0;">  

　　要寫成下面這樣：

    　　

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">  

　　5. W3C校驗(yàn)和測試工具

　　要保證最終的代碼，能夠通過W3C的校驗(yàn)，因?yàn)槟承┛蛻舳藭?huì)把不合格屬性剝離。還要使用測試工具（1, 2, 3），查看在不同客戶端的顯示結(jié)果。

　　發(fā)送HTML Email的時(shí)候，不要忘記MIME類型不能使用

    　

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. 　Content-Type: text/plain;  

　　而要使用

    　　

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. Content-Type: Multipart/Alternative;  

　　發(fā)送工具可以考慮使用 MailChimp 和 Campaign Monitor 。

　　6. 模板

　　使用別人已經(jīng)做好的模板，是一個(gè)不錯(cuò)的選擇（這里和這里），網(wǎng)上還可以搜到更多。

　　自己開發(fā)的話，可以參考HTML Email Boilerplate和Emailology。

相關(guān)文章

  • HTML 表格詳解（簡單易懂較詳細(xì)）

    HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格
    2025-03-12

  • 禁止HTML頁面滾動(dòng)的操作方法

    本文介紹了三種禁止HTML頁面滾動(dòng)的方法：通過CSS的overflow屬性、使用JavaScript的滾動(dòng)事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點(diǎn)，感興
    2025-02-24

  • 使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例

    在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗(yàn)的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨(dú)特的效果，例如文字鏤空效果,本文將帶你一步一步實(shí)現(xiàn)一個(gè)簡單的文字鏤空
    2024-11-17

  • Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼

    在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計(jì)需求,如需去除這些默認(rèn)樣式,可以通過CSS來實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
    2024-09-25

  • HTML文本域如何設(shè)置為禁止用戶手動(dòng)拖動(dòng)

    在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動(dòng)拖動(dòng)文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保
    2024-09-25

  • 如何通過HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的功能

    本文詳細(xì)介紹了如何利用HTML和CSS實(shí)現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過動(dòng)畫增強(qiáng)視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽
    2024-09-19

  • HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)

    Canvas 提供了一套強(qiáng)大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動(dòng)畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用，這篇文章主要介紹了HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)
    2024-06-03

  • html table+css實(shí)現(xiàn)可編輯表格的示例代碼

    本文主要介紹了html table+css實(shí)現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2024-03-06

  • HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果

    本文主要介紹了HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2024-02-22

  • HTML+CSS實(shí)現(xiàn)炫酷登錄切換的項(xiàng)目實(shí)踐

    在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實(shí)現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需
    2024-02-02

最新評(píng)論