Mindon.IDEA

Air off, Mind on ~ / Javascript+Golang, Sci, Health… /

How to Write a Mail in HTML

编写原则:

  1. 全局规则之一,不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。

  2. 全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。

  3. 不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table。

  4. style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好。例如要给一个单元格加一个背景,必须这样写: <td background=”http://image1.koubei.com/images/common/logo_koubei.gif%E2%80%9D&gt;&lt;/td&gt;

  5. div模式的邮箱不支持flash,iframe模式的有待验证。

最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱。所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度。

邮件模板,请严格按照下面的规则执行。邮件客户端和Web页面的需求不同,在编写代码的时候,考虑的方向也不一样。

!Doctype声明

为了向前兼容和避免某些浏览器的怪癖,使用html5的!doctype声明,格式如下: <!DOCTYPE HTML>

原则,及思维出发点

  1. 不需要考虑DOM节点的精简和结构的优化。 以完成设计样式为最优先。必要时,不必吝啬使用表格嵌套,不必吝啬使用空的表格元素来占据空间。

  2. 宁可冗余,也不可缺少必要定义。

  3. 充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等

  4. 可替代性: 在编写html的时候,请思考当你页面的所有图片都被屏蔽时,是否用户还能了解页面的主要内容。 请务必在所有要设置背景图片的元素上,定义背景颜色。

  5. 可利用Dreamweaver等工具来协助编写html,但切记,一定要时候做好每行代码的检查。

Mackup

  1. 主体页面,包括细节处理,尽量使用<table>布局。

  2. 不允许在<tr>元素上定义CSS样式,请将样式尽量定义在<td>元素上。(Gmail等邮件客户端会过滤<tr>上的属性)

  3. 禁止使用<style type=”text/css”></code<来处理主要样式,所有的Web邮件系统都会过滤该标签。因此邮件模板中不能使用伪类(pseudo class)和伪元素(pseudo elements),以及高级选择符。

但是,我们仍然可以使用<style>来提升一些比较先进的邮件PC客户端的体验,比如伪类。

必须使用表格和元素样式来完成所有基本样式和布局。

  1. 禁止使用<link>来加载外联CSS

  2. 可以使用<div>来实现细节的,具有典型块级元素(block)的布局样式。而尽量避免使用<p>,因为我们不容易清除<p>在不同浏览器的默认样式

  3. 注意定义图片的替换文字(alt),及替换文字的颜色。

样式

背景颜色,也请使用表格的bgcolor属性。

  • 对于复杂样式的处理,可以大胆地、大块地切图。

  • 避免尝试让两个table-cell的元素对齐,如果, 一个元素是用具体的宽度定义(width=”100″),另一个元素是用百分比来定位( width=”50%”)

  • 避免使用list-style来处理列表样式,请使用 “ • ” 字符来替代。

  • 避免使用<img>元素拼接的方式,来实现背景大图的分割,尽量使用表格的background

我们知道,在<img>元素下4px空白的问题。

禁用的,和不建议使用的CSS样式(见参考文献1)

这些样式,大都是可能引起元素偏移到容器外的样式

禁止使用 position, background, float

特别说明:

margin: margin的使用要非常谨慎,不允许使用margin作为重要的布局依据,不允许使用负margin,避免使用非零和非auto的margin属性。

常见问题

  • 如何让邮件在Gmail等Web页面中居中 有几种方式:

a> 在 body上定义style=”width:apx; margin:auto”。注意,在Web邮件中,会自动为你生成一个<div style=”width:apx; margin:auto”></code> 的元素在最外层。(可以有效利用这一特性,定义背景颜色等样式,和实现其他可能的事情)

而不要尝试自己在邮件模板最外层添加一个带有margin:auto的<div>元素。

b> 使用<center>

  • 如何在邮件的布局中占据空白 请使用空白的<td>元素,设置height属性来起到站位的作用。

origin from http://user.qzone.qq.com/21195254/blog/1296205414

Comments

Copyright © 2015 - Mindon Feng - Powered by Octopress