当前位置: 首页 > news >正文

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

用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; -->

相关文章:

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

用HTML编写邮件正文 文档 编码格式utf-8&#xff08;使用记事本或其他工具打开&#xff0c;在文件->另存为&#xff0c;编缉选择UTF-8格式&#xff09; 文档大小在15kb以内 样式 页面宽度&#xff1a;600px~800px 尽量用特殊元素以及元素属性代替样式 样式全部写为内联样式…...

华为云计算之双活容灾

双活&#xff08;HyperMetro&#xff09;本地双活&#xff1a;距离≤10km同城双活&#xff1a;距离&#xff1e;10km没有主备之分&#xff0c;只有本端数据中心和远端数据中心。当一个数据中心的设备故障或数据中心故障&#xff0c;业务会自动切换到另一个数据中心继续运行&…...

ASEMI高压MOS管ASE20N65SE体积,ASE20N65SE大小

编辑-Z ASEMI高压MOS管ASE20N65SE参数&#xff1a; 型号&#xff1a;ASE20N65SE 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;30V 漏极电流&#xff08;ID&#xff09;&#xff1a;20A 功耗&#xff08;P…...

resp连接redis服务器

修改redis的配置文件使得windows的图形界面客户端可以连接redis服务器 resp安装好以后&#xff0c;可以在linux端打开redis.conf中做以下操作&#xff0c;使得windows的图形界面客户端可以连接redis服务器 方法一&#xff1a; 1&#xff0c;在redis.conf文件中添加bind 在文件…...

七天实现一个分布式缓存

目录教程来源目的思路缓存淘汰(失效)算法&#xff1a;FIFO&#xff0c;LFU 和 LRUFIFO(First In First Out)LFU(Least Frequently Used)LRU(Least Recently Used)实现Lru查找功能删除新增/修改测试单机并发缓存主体结构 Group回调 GetterGroup 的定义Group 的 Get 方法HTTP 服务…...

电子招标采购系统源码功能清单

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…...

mysql数据库基础知识

一.mysql基本命令 1.基础常用命令 mysql -uroot -p密码;(也可以不带密码&#xff0c;之后输入) 本地登录 mysql -h 登录ip -p 端口(通常3306&#xff09; -uroot -p密码; 远程登录 desc 表名;查看表的各个字段的属性&#xff0c;以及自增键 mysqldump -u用户 -p 数据库名 >…...

CAN总线通信

CAN总线通信 CAN 是控制器局域网络&#xff08;Controller Area Network&#xff09; 的缩写&#xff0c;是 ISO 国际标准化的串行通信协议。 CAN是半双工通信 CAN总线特点 (1) 多主控制 在总线空闲时&#xff0c;所有的单元都可开始发送消息&#xff08;多主控制&#xf…...

MATLAB/Simulink 通信原理及仿真学习(二)

文章目录MATLAB/Simulink 通信原理及仿真学习&#xff08;二&#xff09;simulink仿真常用的Simulink库1. 信号源模块库2. 数序运算模块3. 信号输出模块库4.仿真搭建5.搭建自己的库6.S-函数编写MATLAB/Simulink 通信原理及仿真学习&#xff08;二&#xff09; simulink仿真 交…...

CentOS7 防火墙(firewall)的操作命令

CentOS7 防火墙&#xff08;firewall&#xff09;的操作命令 安装&#xff1a;yum install firewalld 1、firewalld的基本使用 启动&#xff1a; systemctl start firewalld 查看状态&#xff1a; systemctl status firewalld 禁用&#xff0c;禁止开机启动&#xff1a; s…...

文献工具汇总:论文查找、文献管理、文献翻译

科研人员论文哪里找&#xff1f;文献如何管理&#xff1f;本文给推荐一些提高论文阅读写作效率的一些资料&#xff0c;包括查找论文、文献管理、文献翻译等方面。 一、查找文献 PMC&#xff08;Pubmed Cenral) Pubmed官方系统中&#xff0c;将免费的全文集中在此&#xff0c…...

SQL零基础入门学习(三)

SQL零基础入门学习&#xff08;二&#xff09; SQL WHERE 子句 WHERE 子句用于提取那些满足指定条件的记录。 SQL WHERE 语法 SELECT column1, column2, ... FROM table_name WHERE condition;参数说明&#xff1a; column1, column2, …&#xff1a;要选择的字段名称&…...

苹果手机如何快速的直接从相册里面的图片提取文字?

//在线工具地址https://ocr.bytedance.zj.cn/image/ImageText在当今信息爆炸的时代&#xff0c;图文并茂已经成为了一个广告宣传的常用方式。然而&#xff0c;图片中的文字信息往往难以获取&#xff0c;尤其对于那些需要快速获取信息的人们来说&#xff0c;阅读图片中的文字会是…...

【go】函数调用

程序中编写的函数在编译阶段会被编译成一段段的指令存放在可执行文件中&#xff0c;在程序运行阶段这些内存会加载到虚拟地址空间的代码段。 当函数A调用了函数B的时候&#xff0c;对应的会生成一条call指令&#xff0c;程序在运行到call指令时就会跳转到对应的B函数的代码段的…...

Linux系统之Uboot、Kernel、Busybox思考之四

目录 三 内核的运行 9 设备树&#xff1a; 1) 设备树产生缘由 2) 设备树方案的流程 3) 有了上述概念&#xff0c;为了支撑整个设备树的工程实现&#xff0c;内核实现以下内容 4) 内核解析设备树 5) 入口分析 6) 解析处理。 10 udev devfs sysfs 11 系统中的USB设备 12 网…...

为什么要经常阅读和分析计算机SCI期刊论文? - 易智编译EaseEditing

训练阅读与分析期刊论文的能力&#xff0c;可以增加中长期的学术竞争力。 只要能够充分掌握阅读与分析期刊论文的技巧&#xff0c;就可以水到渠成地轻松进行「创新」的工作。 所以&#xff0c;只要深入掌握到阅读与分析期刊论文的技巧&#xff0c;就可以掌握到大学生不曾研习过…...

Shiro框架详解

1.Shiro简介 1.1.基本功能点 Shiro 可以非常容易的开发出足够好的应用&#xff0c;其不仅可以用在 JavaSE 环境&#xff0c;也可以用在 JavaEE 环境。Shiro 可以帮助我们完成&#xff1a;认证、授权、加密、会话管理、与 Web 集成、缓存等。 Authentication&#xff1a;身份…...

redhawk:GSC file与STA file

1.GSC file redhawk做lowpower分析时需要GSC&#xff08;Global Switching Configuration&#xff09;file指导block/instance/power domain的开关状态。 Syntax&#xff08;in GSR file&#xff09;: GSC_FILES <gsc_FilePathName> Syntax&#xff08;in GSC file&a…...

【Python学习笔记】46.Python3 math 模块和requests 模块

前言 本章介绍Python的math 模块和requests 模块。 Python math 模块 Python math 模块提供了许多对浮点数的数学运算函数。 math 模块下的函数&#xff0c;返回值均为浮点数&#xff0c;除非另有明确说明。 如果你需要计算复数&#xff0c;请使用 cmath 模块中的同名函数…...

页面导航-yang

这就是一个简单的导航 &#x1f440; 机器视觉&#xff1f; &#x1f468;‍&#x1f527; 环境搭建 &#x1f468;‍&#x1f527; 关与Tensorflow-gpu Anaconda Pycharm配置问题解决方案 &#x1f47c; 口罩识别 &#x1f4bb; 实时口罩检测mp4视频识别 Ⅰ &#x1f4bb…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...