《让你的电子邮件与众不同》——XXXX年第1期 总第21期

管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助“我为人人”电脑服务队技术文档2010年第1期总第21期摘要此文档主要介绍HTML电子邮件的概念、如何编写HTML邮件及其需要注意的事项，学习使用HTML邮件，将会让你的邮件充满个性，从此与众不同！我为人人2010/3/7管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助1我为人人目录《让你的电子邮件与众不同》2什么是HTML电子邮件2如何写HTML邮件4HTML入门4HTML标记有很多，在这里只介绍几个常用的标记：5HTML源码框架：7添加样式属性，让内容丰富多彩：7InlineCSS使用方法：8常用的CSS属性：9在QQ邮箱里编写HTML电子邮件9写HTML邮件需注意：9联系我们：12管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助2《让你的电子邮件与众不同》2010年第1期总第21期2010/03/07相信大家都收到过来自大公司（腾讯、招行等）发来的电子邮件，看到他们图文并茂、漂亮的模板，是否眼前一亮，立即明白邮件的意图？这些便是使用HTML①编写的电子邮件。什么是HTML电子邮件HTML电子邮件有哪些不同？商业HTML邮件大致可分为营销型和确认型电邮营销型邮件确认型邮件内容具有丰富性、多样性，客户会更注重内容的丰富性和视觉效果的美观性内容具有单一性、独特性，我们要让客户非常直接的看到确认信息，复杂的内容和视觉效果只会让客户忽略了邮件的主要内容——即确认信息除了商业HTML邮件，在平时发邮件时也可借鉴以上优点，写出不同的HTML邮件的模板，满足不同用于的需求，比如求职、通知等。由上可以知道，制作并发送HTML电子邮件，不仅能够按照不同的需求满足用户的视觉感受和审美观，更能够更清楚、直接的表达出发送人的意图（宣传，营销、确认）。邮箱里丰富多彩的HTML电子邮件版式优美内容丰富表达清晰管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助3《鲜果周报》QQ管理员来信，相信这个大家都会有收到管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助4当然也有广告看到这些绚丽的电子邮件，你是否也摩拳擦掌，跃跃欲试呢？不要急，编写这类电子邮件之前需要先了解下HTML语言。如何写HTML邮件HTML入门HTML语言的来源、发展、意义之类的就不多啰嗦了，在这里直接介绍如何使用。管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助5全称：HyperTextMark-upLanguage译名：超文件注标式语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。HTML是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个应用程式，HTML不是程式语言，如C++和Java之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了HTML，HTML的格式非常简单，只是由文字及标记组合而成。标记写法：任何标记皆由及所围住，如P标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如fontsize=+2Hello/font参数只可加于起始标记中。在起始标记之标记名前加上符号/便是其终结标记，如/font标记字母大小写皆可。HTML标记有很多，在这里只介绍几个常用的标记：标记名使用浏览器中显示效果段落P这是段落1/PP这是段落2/P（为突出出各标记范围，每一标记都加入了背景颜色。后面会讲到如何添加背景。）一级标题H1一级标题/H1二级标题H2二级标题/H2表格TABLETRTD表格的第一行第一列/TDTD表格的第一行第二列/TD/TRTRTD表格的第二行第一列/TDTD表格的第二行第二列/TD/TR/TABLE无序列表ULLI列表项1/LILI列表项2/LI/UL层DIV这是一个层/DIV图片IMGSRC=”图片的地址”超链接AHREF=”HTTP://WWW.BAIDU.COM”百度/A管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助6需要注意的是层这个概念，层可以通俗的理解为一块方形区域。现在大部分电子邮件（网页）就是由层组成，即网页（邮件）可以看做是一块一块拼凑起来的。由此图也可以看出，使用几个常用的HTML标签足够做出美观大方的电子邮件！管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助7HTML源码框架：1.DIV//最外层2.DIV//头部层3.TABLE//头部层里表格4.TR//表格的第一行5．TD/TD6.TD/TD7./TR8.TR/TR//表格的第二行9.……10．/TABLE11．/DIV12．DIV……/DIV//中间层13．DIV//最下层14．H1推荐好友/H1//第一级标题15．……16．AHREF=””更多推荐/A//超链接17．/DIV18．P不想收到周报？点击此处更改/P//段落19．/DIV添加样式属性，让内容丰富多彩：HTML框架是结构，样式属性是表现形式。就像做房子，先搭好梁，再铺瓷砖、刷油漆，这样做出来的房子才又坚固又好看。控制HTML标签属性的语言称之为CSS②。让我们看下时下邮件客户端对CSS的支持：上图中鲜果周报源码如左注意：HTML代码一层层嵌套的形式各层次之间的关系标签的闭合管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助8其中“inlineCSS”指内嵌CSS。为使我们写出的电子邮件在不同的客户端有相同的显示效果，建议使用内嵌的CSS。InlineCSS使用方法：div这是一个未加任何属性的层/divdivstyle=border:1px;border-style:solid;这是一个有实框（solid）为1像素的层/divdivstyle=border:1px;border-style:solid;border-color:#CC0033这是一个有实框为红色、1像素的层/divdivstyle=border:1px;border-style:solid;width:300px;height:60px;这是一个有实框、宽300像素、高60像素的层/divdivstyle=background-color:red这是一个无框、红色背景的层/divdivstyle=background-color:red;margin:10pxautoauto30px;这是一个红色背景、上下左右边距分别为10像素、自动、自动、30像素的层/divdivstyle=border:1px;border-style:solid;text-align:right;文本右对齐/divdivstyle=border:1px;border-style:solid;font-size:18px;color:#009933;font-weight:bold;文字大小为18像素，绿色、加粗/div实际效果图中各层之间添加了br/，为换行符，为使各层区域更容易辨认。标签style=”样式属性”……/标签管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助9常用的CSS属性：属性名取值说明ColorRed、Green、Grey…/web颜色控制文字颜色Border数值（1px）边框大小Border-styleSolid（实框）、dashed（虚线）…边框样式Border-color同color边框颜色Text-alignLeft、right、center、justify文本对齐方式Background-color同color背景颜色Background-imageurl（”背景图地址”）图像背景Font-size同Border字体大小Font-color同color字体颜色Font-weightNormal、bold、lighter字体粗细Width数值宽度Height数值高度Margin-left数值左边距，同理有上、右、下边距在QQ邮箱里编写HTML电子邮件打开一封你的QQ邮箱收到的邮件，点击转发-文字格式-HTML，在这里你就可以看到邮件还没有经过浏览器解释的原始代码了。QQ邮件的代码框架如下：DIVINCLUDETAILSTYLETYPE=TEXT/CSS“此处放CSS格式”/STYLEQQ邮箱支持非inlineCSSDIV此处放正文内容/DIV/INCLUDETAIL/DIV如果你发邮件的时候也打开HTML编辑视图，你会发现并没有includetail这个标签。因为这个标签是为了放置style标签，只有在includetail里写的非inlineCSS格式代码才能被qq邮箱应用。当然，如果你使用的是inlineCSS，则可以去掉includetail标签。写HTML邮件需注意：1.把样式写入HTML标签内部，不要独立在某个外部文件中，也不要写在style/style间(图)管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助102.给每一个有内容标签内部都加上CSS，即使重复和繁琐3.不要用CSS来对HTML元素标签定位,用绝对大小(像素)和相对大小(百分比)相结合的表格嵌套方式来定位4.不要在邮件中插入任何的Javascript、Flash以及一些特特殊标签(如:marquee)绝大部分邮件客户端会屏蔽Flash和Javascript，以及一些特殊标签和属性。5.图片的使用不要使用背景图片，background-image属性在多数在线邮件客户端会被屏蔽，在Gmail中，你看不到任何的background图片。（QQmail中可以使用背景图）所有使用的图片需用URL定位，即需要是网络上的图片。为保证图片不掉链，注意使用可靠的图片来源。经过一番尝试，发现使用QQ自己的服务才是最可靠的，即使用QQ空间里的相册功能。管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助11将需要使用的图片上传至QQ空间后打开图片，点击右上角“复制地址”，在弹出层中选择原图地址即可！给每张图片都指定宽和高以及Alt属性值；图片的src属性一定要用绝对地址：正确：IMGSRC=”HTTP://BLOG.WWRR.COM/LOGO.GIF”WIDTH=”297″HEIGHT=”160″ALT=””/错误：IMGSRC=”LOGO.GIF”/重要的内容请不要用图片标示。展览会的时间，地点，内容等信息是非常总要的，考虑到图片可能无法显示，这些内容不建议放在图片中显示；即使放在图片中，也请在邮件内容中以文字形式表示出来，并给把内容加入图片的Alt属性中。6.邮件的宽度写HTML邮件时一般都会给邮件定一个宽度，让邮件看起来更整齐。通过对比各邮件客户端显示情况，推荐使用650px。使用这个宽度可以充分利用页面显示宽度以展示更丰富的内容，同时又不会产生横向滚动条，影响阅读。注释1：HTML（HyperTextMarkupLanguage）注释2：CSS（cascadingstylesheet），级联样式表。管理学院我为人人电脑服务队服务队宗旨：我为人人、同学互爱、同学互助12联系我们：有任何意见、想法，欢迎给我们来信！喜欢电脑技术、遇到电脑问题，欢迎来我为人人对外交流群！您也可以直接与我们取得联系！服务队不定期举行电脑各方面内部培训，欢迎参加！想要了解更多？百度一下你就知道