阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML Email

      HTML Email

      从头建立一个 HTML Email 模板,用来发邮件的。

      有几个需要注意的点

      Doctype

      目前,兼容性最好的 Doctype 是 XHTML 1.0 Strict,事实上 Gmail 和 Hotmail 会删掉你的 Doctype,换上这个 Doctype。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      
       <head>
      
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      
      <title>HTML Email编写指南</title>
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
       </head>
      
      </html>
      

      使用这个 Doctype,也就意味着,不能使用 HTML5 的语法。

      布局

      网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

      <body style="margin: 0; padding: 0;">
       <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <tr>
       <td> Hello! </td>
      </tr>
       </table>
      </body>
      

      表格的 border 属性等于 1, 是为了方便开发。正式发布的时候,再把这个属性设为 0。

      在内层,放置第二个表格。用来展示内容。第二个 table 的宽度定为 600 像素,防止超过客户端的显示宽度。

      <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
      
       <tr>
      <td> Row 1 </td>
       </tr>
      
       <tr>
      <td> Row 2 </td>
       </tr>
      
       <tr>
      <td> Row 3 </td>
       </tr>
      
      </table>
      

      图片

      图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

      有些客户端会给图片链接加上边框,要去除边框。

      img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
      a img {border:none;}
      <img border="0" style="display:block;">
      

      需要注意的是,不少客户端默认不显示图片(比如 Gmail),所以要确保即使没有图片,主要内容也能被阅读。

      行内样式

      所有的 CSS 规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对 CSS 规则的支持情况,请看这里。

      另外,不要采用 CSS 的简写形式,有些客户端不支持。比如,不要写成下面这样:

      style="font: 8px/14px Arial, sans-serif;"
      

      如果想表达

      <p style="margin: 1em 0;">
      

      要写成下面这样:

      <p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">
      

      W3C 校验和测试工具

      要保证最终的代码,能够通过 W3C 的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(1, 2, 3),查看在不同客户端的显示结果。

      发送 HTML Email 的时候,不要忘记 MIME 类型不能使用

      Content-Type: text/plain;
      

      而要使用

      Content-Type: Multipart/Alternative;
      

      发送工具可以考虑使用 MailChimp 和 Campaign Monitor 。

      本文参考:http://www.ruanyifeng.com/blog/2013/06/html_email.html

      更多 HTML 搜索

      通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

      你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

      注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

      如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

      目录
      目录