您现在的位置是:首页 > 正文

【模板】用HTML编写邮件正文 | 各大邮箱几乎都会过滤css样式、js脚本等效果,如何用基础HTML编写?

2024-04-01 02:07:45阅读 2

用HTML编写邮件正文

  • 文档
    编码格式utf-8(使用记事本或其他工具打开,在文件->另存为,编缉选择UTF-8格式)
    文档大小在15kb以内

  • 样式
    页面宽度:600px~800px
    尽量用特殊元素以及元素属性代替样式
    样式全部写为内联样式,无法继承,所以每个元素都要指定样式
    样式属性及样式值都要写完整,不能简写
    不支持margin/padding、background-imag
    给每个table加上边框border,间距使用cellpadding/cellspacing,边框合并border-collapse
    邮件居中显示:table添加align=”center”
    给img设定宽高和间距,使用width/height/hspace/vspace,border=0;display=block;

  • 语言
    邮件的html几乎只包含table/tr/td/span/img/a这几个元素
    从table开始编写,放弃body之外的DOCTYPE/html/head/body元素
    table布局,给每个单元格设定宽度,一个单元格放一张图片
    不要使用flash、java、javascript、frames、i-frames、activeX以及Dhtml,动图使用gif

示例:

<!-- 目前兼容性最好的Doctype,不能使用HTML5语法 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>邮件模板</title>
</head>

<body style="margin: 0; padding: 0;">
    <!-- 有效内容从table开始,最外层用来设置背景bgcolor,颜色值不可简写,边框需要清除border="0" -->
    <!-- 全部使用内联样式,尽量用元素的私有属性代替css,禁用position/background/float/margin/padding -->
    <!-- font-*族的CSS属性不允许简写,font-family可能会被过滤 -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#EDF9F5" style="font-size: 14px;font-family: Arial;">
        <!-- tr上不写样式,会被过滤 -->
        <tr>
            <!-- 使用空白的td,设置height用来占位 -->
            <td height="30"></td>
        </tr>
        <tr>
            <td>
                <!-- 主体内容宽度为600px~800px,table居中布局align="center" -->
                <table border="0" cellpadding="8" cellspacing="0" width="600" bgcolor="#FFFFFF" align="center">
                    <tr>
                        <td bgcolor="#23c09d">
                            <!-- 图片是唯一可以引用的外部资源,一个单元格放一张图片 -->
                            <!-- 图片转化为base64编码引入,动图使用gif,img要去除边框border="0" -->
                            <!-- 图片可能不会显示,需要注明alt,并设置alt的文本样式 -->
                            <img alt="LOGO" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAH6CAYAAAByAjh1AAAACXBIWXMAAA7E=" border="0" height="45" style="color: #ffffff;font-size: 14px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <!-- 显示边框border="1",需要合并border-collapse: collapse; -->
                            <table border="1" cellpadding="8" cellspacing="0" width="100%" align="center" style="border-collapse: collapse;border-color: #ebeef5">
                                <tr>
                                    <!-- font属性无法继承,需要在每个td定义font -->
                                    <td height="60" align="center" style="color: #23c09d;font-weight: 500;font-size: 1.5rem;border-bottom: 1px solid #dcdfe6">
                                        邮件标题
                                    </td>
                                </tr>
                                <tr>
                                    <td height="60" style="font-size: 1.1rem;color: #1f2f3d">
                                        <!-- 尽量不使用p,因为p在不同浏览器的样式不可控 -->
                                        <span style="border-left: 3px solid #23c09d">
                                        一段文本
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>

<!-- 最后要使用测试工具,查看不同邮件客户端的显示效果 -->
<!-- 发送HTML Email要用Content-Type: Multipart/Alternative; -->

网站文章

  • Javase | 字符编码、转义字符、方法执行过程中的 “内存分配”

    Javase | 字符编码、转义字符、方法执行过程中的 “内存分配”

    字符编码、转义字符、在控制台上输出 “反斜杠字符”、在控制台上输出 “单引号字符”、方法执行过程中的 “内存分配”.....

    2024-04-01 02:07:06
  • python 脚本第一行怎么写

    一、 python脚本第一行的写法:【#!/usr/bin/env python】。该语句告诉操作系统执行该脚本时,首先到env设置里查找python的安装路径,然后调用对应路径下的解释器程序完成操作...

    2024-04-01 02:06:59
  • jszip压缩服务器文件,使用JSZip压缩驻留在服务器上的PDF

    对不起,在这篇文章中缺少链接:这是我在stackoverflow上的第一篇文章,正如错误消息所说,“[我]需要至少10个声望才能发布2个以上的链接。”下载PDF(或任何二进制文件),你可以使用xhr....

    2024-04-01 02:06:52
  • linux mtp 代码,Linux MTP 的故事

    Linux下面有许许多多糟糕的故事,输入法算是其中之一,不过今天我们要讲的是另外一个故事。这个故事本质上和KDE关系不大,不过也算让我纠结了许久了。首先来介绍一下MTP,MTP是Media Trans...

    2024-04-01 02:06:15
  • Docker私房菜————Docker Compose| Compose安装和使用|快速单机编排|

    Docker私房菜————Docker Compose| Compose安装和使用|快速单机编排|

    目录 1.概念1.1 Docker Compose是什么1.2 YAML1.3 yml 文件配置指令参考1.4 Compose命令说明 2.compose的安装和使用2.1 安装compose2.2...

    2024-04-01 02:06:07
  • ruby on rails 撤销取消操作

    撤销操作一个常见的情况是更改控制器的名字,这时你得删除生成的文件。生成控制器时,除了控制器文件本身之外,Rails 还会生成很多其他文件(参见代码清单 3.6)。撤销生成的文件不仅仅要删除控制器文件,还要删除不少辅助文件。rails generate 命令还会自动修改routes.rb 文件,因此我们也想自动撤销这些修改。)在 Rails 中,可以使用rails des

    2024-04-01 02:06:01
  • 解决Powershell无法执行路径中包含空格的脚本文件

    解决Powershell无法执行路径中包含空格的脚本文件

    当然,如果当前已经处于powershell环境中,可以直接使用。这时可以借助powershell中的调用运算符。下面的示例展示了使用调用运算符和不使用的区别。

    2024-04-01 02:05:53
  • Leakcanary检测泄漏流程原理分析

    Leakcanary检测泄漏流程原理分析

    内存泄漏指的是程序在向系统申请分配内存空间,使用完毕后未释放,结果导致一直占据该内存单元,程序无法再使用该内存单元

    2024-04-01 02:05:14
  • TypeSprict-1.语法小入门

    类型注解 类似于 function setString(name:String),如果在传入参数时非字符串类型,编译时会报错。接口typejs有接口并且不需实现,只需要在传入时符合接口的要求结构即可。interface Person{ firstName:string; lastName:string;}function greeter(person:Person){ return "...

    2024-04-01 02:05:07
  • java 之BufferedOutputStream的flush和close方法的区别

    java 之BufferedOutputStream的flush和close方法的区别

    BufferedOutputStream的flush和close方法的区别 * flush()方法 * 1.用来刷新缓冲区,刷新后可以再次写出 * close()方法 * 2.用来关闭流释放资源 * 3.如果是带缓冲区的流对象的close()方法,不但会关闭流,还会在关闭流之前刷新缓冲区,关闭之后不能再写入 package com.feng; import ...

    2024-04-01 02:04:59