htmlcss表格样式模板_邮件html页编写指南
前⾔
经过多次的邮件编写实html⼀般都⽤table来布局，为什么呢？原因是⼤多数的邮件客户端（⽐如Outlook和Gmail），会过滤经过多次的邮件编写实写过邮件的html
践及度娘的指导，我发现，编写⾃制兼容outlook与foxmail邮件模版
局部重点规则
1. Doctype
⽬前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上下⾯这个Doctype （不能使HTML5的语法）
⽤HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
　<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML Email编写指南</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
　</head>
</html>
2. 布局css表格样式
⽹页的布局（layout）必须使⽤表格（table）。⾸先，放置⼀个最外层的⼤表格，⽤来设置背景，具体内容再在⾥⾯嵌套表格（div、p等还是不要想了）。
<body >
　<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
  　<td> Hello! </td>
  </tr>
　</table>
</body>
3. 图⽚相关
图⽚是唯⼀可以引⽤的外部资源。其他的外部资源，⽐如样式表⽂件、字体⽂件、视频⽂件等，⼀概不能引⽤。
有些客户端会给图⽚链接加上边框，要去除边框。
需要注意的是，不少客户端默认不显⽰图⽚（⽐如Gmail），所以要确保即使没有图⽚，主要内容也能被阅读。
1 <img border="0" >
img指定width 与 height
因为在有些邮箱⾥，图⽚不是默认加载的，往往加载前需要⽤户的许可。那么⾼宽的指定可以使邮件在没有图⽚撑出样⼦前也能保持良好的⼤⼩结构，加上 alt 属性更可以明确告知图⽚的内容让⽤户选择是否下载它们。
如果因为项⽬需要（⽐如需要适配 Retina ⾼分屏），width 和 height 属性更是必不可少的，并且由于⼀些 outlook 版本的奇葩表
现，width 和 height 属性⼀定不要加上单位！⼀定不要加上单位！⼀定不要加上单位！重要的事情说三遍。
因为加上单位会使⼀些版本的 OutLook ⽆法正确识别，导致图⽚显⽰使⽤实际的宽⾼⽽⾮我们设置的。
<img width="10px" height="10px" src="*.png" />
img在outlook2013下有间距
outlook2013中，堆叠的图⽚会显⽰⼤概10px的间距
这个问题只在图⽚⾼度⼩于20px的时候出现，开⼼的是通过简单的⼩技巧就可以解决：为td设置和图⽚⾼度⼀样的⾏⾼或image设为display：block；
<td width="600" height="80" >
<img height="80" src="www.website/images/Nature_01.jpg" width="600" />
</td>
背景图⽚
style 内容⾥⾯ background 可以设置 color，但是 image 会被过滤，就是说不能通过 CSS 来设置背景图⽚了。但是有⼀个很有意思的元素属性，也叫 background，⾥⾯可以定义⼀个图⽚路径，但是功能有限，⽐如⽆法定位背景图⽚等。
例如要给⼀个单元格加⼀个背景，必须这样写：
<td background="*.png"> <!-- ... --> </td>
margin 与 padding
Outlook 2007-2013 不⽀持图⽚的 margin 与 padding 样式，必要的时候可以尝试 hspace 和 vspace 属性：
<img vspace="10" hspace="10" src="*.png" />
4. ⽂字相关
所有的CSS规则，最好都采⽤⾏内样式。因为放置在⽹页头部的样式，很可能会被客户端删除。客户端对CSS规则的⽀持情况，请看这⾥。
字体
HTML 邮件中，font-family 只⽀持系统字体，不⽀持⾃定义字体，也不⽀持 font 简写，color 尽可能也不要使⽤简写：
在 HTML
<p ></p>
要写成这样
1 <p ></p>
HTML 标签和属性能解决的样式决不使⽤ CSS 样式。
对于加粗字体，我们可以使⽤ b 标签⽽不是 CSS 的 font-weight，前⽂说过，HTML
⾏⾼
在 OutLook 中会有个默认的⾏⾼最⼩值，特别是当设置 font-family 为微软雅⿊时，默认的⾏⾼差不多为 Word 中的两倍⾏距，如果 line-height 设置的值⼩于默认的⾏⾼，⽆论你设置的是多少，则始终使⽤默认值，在很多情况下这是不能忍的，好在有个神奇的 mso-line-height-rule，使⽤⾏⾼时添加 mso-line-height-rule:exactly; 就能使⾏⾼始终等于我们所设置的值。
<td > <!-- ... --> </td>
这只是微软的 CSS 属性，对其他客户端没影响。并且该属性只在块元素上有效，所以想在 font 和 span 中⽤就洗洗睡了吧。
5. W3C校验和测试⼯具
要保证最终的代码，能够通过W3C的校验，因为某些客户端会把不合格属性剥离。还要使⽤测试⼯具（1, 2, 3），查看在不同客户端的显⽰结果。
6. 模板
使⽤别⼈已经做好的模板，是⼀个不错的选择（这⾥和这⾥），⽹上还可以搜到更多。
⾃⼰开发的话，可以参考HTML Email Boilerplate和Emailology。
7. 全局规则
1.页⾯宽度请设定在550到650px以内。
2.使⽤table表格来布局。
3.如果需要邮件居中显⽰，请在table⾥设定align="center"。
4、不要写<style>标签、不要写class，所有CSS都⽤style属性，什么元素需要什么样式就⽤style写内联的CSS。
5、不要使⽤外链的css样式定义⽂字和图⽚（外链的css样式在邮件⾥将不能被读取，所以发送出去的
邮件因为没有链接到样式，将会使你的邮件内容样式丢失），正确的写法：<td >⽂字</td>。
6、不使⽤flash、java、javascript、frames、iframe、activeX以及DHTML，如果页⾯中的图⽚⼀定要动态的，请将flash⽂件转换成gif动画使⽤，但在outlook2007⾥，gif将不能正常显⽰，因为outlook2007限制gif动画。
7、不要使⽤<table></table>以外的body、meta和html之类的标签，部分邮箱系统会把这些过滤掉。
8、背景图⽚代码写法如下：<table background="background.gif" cellspacing="0" cellpadding="0"></table>，但请注意，outlook 对背景图⽚不识别。
9.font-family属性不能为空，否则会被QQ屏蔽为垃圾邮件。
10.若邮件模板内侧边或者上下有空⽩间距，不要⽤ padding，必须得⽤标准的 td 来设定空⽩间距，否则会导致各个邮箱解析不同。
11、在 yahoo 邮箱⾥定义 line-height 的注意事项：需在块级元素⾥定义 line-height。如果 td ⾥有 p 标签，则 line-height 也必须在 p 中定义。⽆论是 td 还是 p，如果有超链接，则都必须在 a 标签⾥定义 line-height。如果只是在 td 或者 p ⾥⾯定义 line-height 的话，那yahoo 邮箱将⽆法识别 a ⾥⾯的⾏⾼。
12.少⽤float, margin,padding. 绝对定位不能⽤，清除浮动⽤<table ></table>
13.如果 td 和 td 之间有间隔，使⽤<td ></td>，这样写的话 td 之间是不会有间隔的。使⽤<td ></td>也是不会有空格的。如果 td 之间有间隙，必须⽤<td></td><td height="10px"> </td><td> </td>来隔开。但是如果是 table，则<table ></table>⾥⾯的内容会在上下有空⾏。
14.少⽤图⽚，邮箱不会过滤你的img标签，但是系统往往会默认不载⼊陌⽣来信的图⽚，如果⽤了很多图⽚的邮件，在⽚没有载⼊的情况下，丑陋⽆⽐甚⾄看不清内容，没耐⼼的⽤户直接就删除了。图⽚上务必加上alt。
outlook 规则
1.在<td>⾥设置 margin 是⽆效的，不论是 margin-left、margin-right、margin-top 或者 margin-boottom 都没有效果。
yahoo规则
2.如果要使⽤<P>标签要考虑到<P>标签本⾝⾃带的上下⾏之间的⾏⾼。yahoo规则
foxmail 规则
1.在table⾥设定align="center"⽆法居中， 需要内联style=“margin：0 auto，width：XX”foxmail 规则
1.foxmail中所有p标签的Margin:0; 使⽤p标签时需要设置margin

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。