如何编写邮件 HTML 模版

说到这个,还要从我第一次接手“邮件模版”需求写起

PM:写个邮件模版,数据让后端渲染给你~

Me: 看到设计稿,觉得挺简单的呀,花了一天照着设计稿写出来了,直接在本地调试,没有什么问题

QA: 你的邮件模版在xx邮箱中看起来好奇怪,跟设计稿完全很多不一样啊

Me: QAQ,咦,这么奇怪的吗,我看看

发现到了真实邮箱里面,情况跟自己想的完全不一样,各大邮箱会在我们写好的邮件html外面嵌套标签,而且有些比较新的样式,都没有起作用: (

于是百度谷歌了一番,发现原来写HTML邮件还是有很多讲究的,下面就让我来为大家普及一下我在写了十个HTML邮件之后,总结(踩过)的经验(坑)。

参考:https://segmentfault.com/a/1190000008864116

http://www.ruanyifeng.com/blog/2013/06/html_email.html

1)Doctype的使用

目前。兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的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邮件</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

</html>

2)布局

请务必使用table去布局,这样子才能达到最佳的适配效果。为了在移动端跟PC端可以正常显示邮件,table的宽度最大为600px。

3)关于样式

这个也是我踩坑最大的地方

要写HTML Email ,需要用最久远的编写html方法去写,不能用css3新属性

字体样式要写在自己当前的td上面,写在父亲td不生效,所以字号还是默认的12px

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我认为过滤垃圾邮件是可以做到的,基于内容的过滤器将发挥作用。发送垃圾邮件的人有一个致命伤,那就是他们发送的邮件本身...
    twn666阅读 1,898评论 1 3
  • Java内存管理包括内存分配和内存回收。 内存分配:程序员通过new对象,JVM会自动为该对象分配内存。 内存回收...
    smart_dev阅读 518评论 0 1
  • 春天是一个明媚的季节,莺歌燕舞,花团锦簇。在云城的街道上,人流如织,路边摊贩的叫卖声,饭馆跑堂的招呼声,朋友相见的...
    离晓晓阅读 615评论 0 0
  • 不是一路人,迟早会分道扬镳的。 但愿你不是忍着过日子的。 做不了朋友 ,就做不了夫妻。 大多数人只爱自己却不肯承认...
    细雨蒙蒙_f21a阅读 184评论 0 3
  • 三个标签 1.马拉松达人 2.易效能终身践行者 3.终身学习倡导者 故事,风寒--支气管炎--感冒咳嗽70天--打...
    彪行天下1983阅读 173评论 0 0