阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录