html邮件模板编写实践
时间:2022-06-06
本文章向大家介绍html邮件模板编写实践,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
编写邮件模板
最近在写业务开发的时候,需要去写邮件通知的模板。 积累了一些邮箱编写经验呀呀。
邮件html编写要求
邮件编写参照的是 阮一峰大神的HTML Email 编写指南
里面大致提了
使用table 布局 外链除了图片全部失效 css使用行内样式为佳
实验
行内样式写起来很痛苦,所以,一开始我打算写的是<style></style>
标签。
写完后,我向各个主邮箱发送了测试
gmail.com 163.com qq.com tencent.com
结果如图
图上可见,QQ
、tencent
、163
对<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的限制比较多。
结尾
有了合适的插件,编写邮件就方便多了。
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理②
- Enterprise Library Policy Injection Application Block 之二: PIAB设计和实现原理
- 育碧与研究所共同开发的AI,是什么样的?
- 大家都在关注AI,但这些事你可能并不知道!
- AI—未来医疗
- 微信小程序新功能上线 一键连Wi-Fi手机变门禁卡
- 使用xUnit为.net core程序进行单元测试(中)
- Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件
- WCF技术剖析之十五:数据契约代理(DataContractSurrogate)在序列化中的作用
- WCF技术剖析之十四:泛型数据契约和集合数据契约(上篇)
- WCF技术剖析之十四:泛型数据契约和集合数据契约(下篇)
- WCF技术剖析(卷1)之前言
- WCF技术剖析(卷1)之目录
- WCF技术剖析(卷1)之推荐序
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Polysh命令实现多日志查询的方法示例
- linux中启动tomcat后浏览器无法访问的解决方法
- Linux查看系统配置常用命令详解
- LNMP下提示File not found问题的解决方法
- Linux 配置SSH免密登录 “ssh-keygen”的基本用法
- 详解Ubuntu 16.04 pycharm设置桌面快捷启动方式
- Linux 7.4上安装配置Oracle 11.2.0.4图文教程
- linux磁盘管理软RAID的实现原理分析和方法分享
- Centos7下Samba服务器配置(实战)
- Linux系统中创建SSH服务器别名的两种方法
- Linux下卸载MySQL8.0版本的操作方法
- Linux服务器上安装Python3的两种方式
- Centos7安装ElasticSearch 6.4.1入门教程详解
- Windows 和 Linux 上Redis的安装守护进程配置方法
- 在Linux系统上安装Spring boot应用的教程详解