专栏首页carvenhtml邮件模板编写实践

html邮件模板编写实践

编写邮件模板

最近在写业务开发的时候,需要去写邮件通知的模板。 积累了一些邮箱编写经验呀呀。

邮件html编写要求

邮件编写参照的是 阮一峰大神的HTML Email 编写指南

里面大致提了

使用table 布局 外链除了图片全部失效 css使用行内样式为佳

各邮件对css的支持

实验

行内样式写起来很痛苦,所以,一开始我打算写的是<style></style>标签。 写完后,我向各个主邮箱发送了测试

gmail.com 163.com qq.com tencent.com

结果如图 图上可见,QQtencent163<style>的支持尚可,但是gmail已经完全把<style>过滤掉了。

所以需要改用 行内样式 做实验

可以看到,样式完全支持了

如何写行内样式

如果让自己手动写行内样式,那么就是太痛苦了。 那么,有没有办法自动将自己的样式转成行内样式呢?

一开始,我的想法是,使用js遍历所有dom,获取css值,然后写在dom的style属性里。 可是这个办法我探索了一晚上,没有找到一个函数,只获取css声明过的样式,只能获得所有样式的值。

后台直接google了一下gulp-inline,结果搜索出一个gulp-inline-css插件,可以将css转成 inline-css,即行内样式, 用法如下

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));
});

完美。

顺便提一下,gmail不支持 position样式,我发现各个邮箱,就gmail的限制比较多。

结尾

有了合适的插件,编写邮件就方便多了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • reactjs

    最近在学习react js,ReactJS是Facebook开发的用于构建用户界面的JAVASCRIPT库,利用其可以实现组件式开发。

    用户1394570
  • 浅谈js的date对象对时间字符串的解析

    最近的时间都在开发社团内部的应用–隧道口,虽然只有简单的几个页面,但是依然是遇到了不少坑。 其中 date 的时间处理就是一个。

    用户1394570
  • 实习笔记2--20160121

    用户1394570
  • Java 单例以及单例所引发的思考

    1 前言 前几天无意中看到一篇文章,讲到了老生常谈的单例,抱着复习一下的心态点了进去,还是那些熟悉的内容,可是却发现自己思考的角度变了,以前更多的是去记忆,只停...

    java思维导图
  • 深度残差收缩网络(六)代码实现

    深度残差收缩网络其实可以作为一种通用的特征学习方法,本质上是深度残差网络ResNet、注意力机制和软阈值化的集成,可以用于图像分类。本文采用TensorFlow...

    用户6831054
  • 富文本打字机效果

    打字机效果也就是让文字逐个在屏幕中显示,直到把整段话说完,常常被应用到人物对话,角色旁白以及引导教程等高频场景中。

    异名
  • 用Python上传文件

    Python正在吞噬这个世界!您会发现许多热情的Python程序员和同样多的批评者,但不可否认的是,Python在当今软件开发中是一个强大的、相关的、不断增长的...

    py3study
  • Python做人工智能初体验:大牛讲解k近邻分类算法区分电影类型

    云飞
  • Web 和 Chrome 开发者之间的那些事!

    这个标题可能咋看之下似乎有那么一点怪(不过你要知道,把标题起的这么怪真不是我的本意),而我真正想看到的是,你们 web development 社区是如何看待 ...

    Java后端技术
  • 对于大表的写入和统计查询该如何权衡,我有四个解决思路

    今天在微信群里大家在讨论一个数据处理的解决方案,各路高手齐上阵,大家从不同的角度都提了一些建议和解决方案,这种讨论蛮有意思。

    jeanron100

扫码关注云+社区

领取腾讯云代金券