如何使用HTML编写邮件模版

这篇文章主要介绍了使用html编写简单的邮件模版,作者主张极简至上主义…可以先看文章结尾处链接中介绍的模版成品,需要的朋友可以参考下

今天,我想写一个”低技术”问题。

  话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解本周的大事。
2015712153636746.jpg (349×460)

 有一天,我就在想,是不是我也能做一个这样的邮件?

  然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。
2015712153840405.jpg (550×671)

立即学习“前端免费学习笔记(深入)”;

因为这种带格式的邮件,其实就是一张网页,正式名称叫做HTML Email。它能否正常显示,完全取决于邮件客户端。大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。

  我发现,编写HTML Email的窍门,就是使用15年前的网页制作方法。下面就是我整理的编写指南。

  1. Doctype

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

     HTML Email编写指南   

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

  2. 布局

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

         
Hello!

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

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

            
Row 1
Row 2
Row 3

  邮件内容有几个部分,就设置几行(row)。

  3. 图片

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

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

  img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}     a img {border:none;}     @@##@@

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

  4. 行内样式

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

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

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

  如果想表达

 

 要写成下面这样:

  5. W3C校验和测试工具

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

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

 Content-Type: text/plain;

  而要使用

Content-Type: Multipart/Alternative;

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

  6. 模板

  使用别人已经做好的模板,是一个不错的选择(这里和这里),网上还可以搜到更多。

  自己开发的话,可以参考HTML Email Boilerplate和Emailology。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

使用Html制作简单登录页面的方法

去掉HTML中Inline-Block的空白的方法

如何使用HTML编写邮件模版

以上就是如何使用HTML编写邮件模版的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546358.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:08:49
下一篇 2025年12月21日 18:08:58

相关推荐

  • 如何使用HTML在两个div标签中间画一条竖线

    这篇文章主要介绍了关于如何使用html在两个div标签中间画一条竖线,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 最近项目经理给了一个活儿,需要在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父p。在网上查了相关资料,最终搞定,下面小编给代价分享解决方法,需要的朋友参考下吧…

    2025年12月21日
    000
  • 关于HTML 文本格式化的代码

    下面为大家带来一篇html 文本格式化的简单实例。内容挺不错的,现在就分享给大家,也给大家做个参考。 一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化。 This text is boldThis text is strongThis text is bigThis text i…

    2025年12月21日
    000
  • 关于Html和CSS绘制三角形图标的方法

    这篇文章主要为大家详细介绍了html+css绘制三角形图标的相关代码,很多网页都有三角形的图标,通常是切的图片,这里可以用css3+html写出三角形,感兴趣的小伙伴们可以参考一下 先看看效果图: Document #test1 { height:20px; width:20px; border-c…

    2025年12月21日
    000
  • 关于HTML中rel属性的分析

    这篇文章主要介绍了html中rel属性分析,需要的朋友可以参考下 由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http:/…

    2025年12月21日 好文分享
    000
  • 使用html和css实现康奈尔笔记的模板

    这篇文章主要介绍了使用html和css实现康奈尔笔记(5r笔记)模板的相关资料,需要的朋友可以参考下 缘起 人家都说 康奈尔笔记 法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。 网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网…

    好文分享 2025年12月21日
    000
  • html标签的基本格式

    1.元素:页面中可以看见的内容,都是元素,元素是用标签来表示的 2.标签:用来描述元素的,根据元素的不同,标签也有很多种类,例如文本,图像等 3.根据标签描述的对象不同,分为双标签和单标签二类。 4.如果标签中有文本或者子标签的话,一般采用双标签来描述,例如 … 5.如果标签中的内容来自…

    好文分享 2025年12月21日
    000
  • html标签属性的作用/语法

    1.每个元素都有一些自己与众不同的地方,这些可以通过属性来进行设置 2.属性: 必须写在起始标签内,如果是单标签就直接写在标签内 3.属性的基本格式: 属性名=”属性值”,值可以加引号,也可不加引号,也可以是单引号, 推荐使用双引号,这是大家都在遵守的行业约定 1. 标签有一…

    好文分享 2025年12月21日
    000
  • HTML打折计算价格的实现原理与脚本代码

    大概原理就是设置计算价格事件函数,取不同下拉打折数,计算结果送入文字框,感兴趣的朋友可以参考下 打折后价格计算 function calculator(){ var prices=document.getElementById(“price”); var discounts=document.get…

    好文分享 2025年12月21日
    000
  • 关于HTML基础的讲解

    一、框架标签的简单使用 框架集标签 运行结果: 二、框架标签应用 网站后台系统显示页面 left.html: 会员管理 品牌管理 商品管理 分类管理 right.html: 所有用户信息 运行结果: 三、HTML表单 表单标签 用户名: 密码: 确认密码: 性别:男 女 爱好:钓鱼 打电动 写代码 …

    2025年12月21日 好文分享
    000
  • JS实现简易版贪吃蛇小游戏

    新建网页 //① 绘制地图 function Map() { //私有成员(不会随便发生变化) var w = 800; var h = 400; //成员方法,绘制地图 this.showmap = function () { //创建p、设置css样式、追加给body var tu = docu…

    好文分享 2025年12月21日
    000
  • HTML转Excel,并实现打印,下载功能

    会签单流转会议名称自动获取编号自动获取主持自动获取类型自动获取人自动获取日期自动获取内容自动获取备注自动获取意见序号人部门意见时间节点状态1顾办公室同意!2018/5/14 15:21已提交超链接_导出表格// 使用outerHTML属性获取整个table元素的HTML代码(包括标签),然后包装成一…

    好文分享 2025年12月21日
    000
  • 向HTML中插入视频并兼容浏览器

    这篇文章主要介绍了关于CSS自定义绿色复选框按钮的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一…

    好文分享 2025年12月21日
    000
  • 使用Html制作简单登录页面的方法

    这篇文章主要为大家详细介绍了html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先来看看样子。 html源码: Login Login 登录 css代码: 立即学习“前端免费学习笔记(深入)”; html{ width: 100%; height: 100%;…

    2025年12月21日
    000
  • 如何使用JS中DOM来控制HTML元素

    这篇文章主要介绍了js中使用dom来控制html元素的相关资料,需要的朋友可以参考下 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: hello hello hello function getName(){ …

    2025年12月21日
    000
  • HTML实现网页动态时钟

    本文通过实例代码给大家介绍了html写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today=new Date(); var hh=today.getHours(); var mm=today.…

    2025年12月21日
    000
  • HTML的表格布局

    这篇文章主要介绍了html表格布局实际使用详解,是html入门学习中的基础知识,需要的朋友可以参考下 什么时候会用到表格 现在,表格 一般不再用于网页整体的布局。不过,在面对某些特定的设计,如表单输入、数据呈现时,表格则可能是最恰当的选择。 关于表格的直观印象,就是由多个单元格(cell)整齐排列而…

    2025年12月21日 好文分享
    000
  • HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    href是链接前端文件的一个最常用的重要属性,这里我们就来看一下html的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下 在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初…

    好文分享 2025年12月21日
    000
  • Html 实现动态显示颜色块的报表效果(实例代码)

    本文通过实例代码讲解如何使用html的颜色块动态展示数据功能,非常不错,代码简单易懂,需要的朋友参考下 利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: h…

    好文分享 2025年12月21日
    000
  • JS实现加载时锁定HTML页面元素的方法

    这篇文章主要介绍了js实现加载时锁定html页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现加载时锁定HTML页面元素的方法。分享给大家供大家参考,具体如下: 在html加载时js锁定页面内所有input,textarea…

    好文分享 2025年12月21日
    000
  • JS实现改变HTML上文字颜色和内容的方法

    这篇文章主要介绍了js实现改变html上文字颜色和内容的方法,涉及js数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下 本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考,具体如下: 1. JavaScript Day 1 // to change the col…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信