使用HTML编写邮件

前端开发   发布日期:2025年05月19日   浏览次数:155

html嵌入到第三方邮件系统中,很多h5标签、css3不支持。一般布局采用table+css。tabel表兼容性最好,写行内样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. </head>
  6. <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" height="68" bgcolor="#f3f3f3" style=" font-family:Arial, Helvetica, sans-serif;">
  7. <tr>
  8. <td align="left" height="30">
  9. <a href="mailto:customer_service@jd.com" target="_blank"><img src="images/logo.png" alt="" style="max-width:30%;" border="0"/></a>
  10. </td>
  11. </tr>
  12. </table>
  13. <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f3" style=" font-family:Arial, Helvetica, sans-serif;">
  14. <tr>
  15. <td width="100%" height="200px;"><img src="images/email-ban1.png" alt="" style="width:100%;height:100%;" border="0" /></td>
  16. </tr>
  17. </table>
  18. <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f3" style="font-size:16px;" style=" font-family:Arial, Helvetica, sans-serif;">
  19. <tr>
  20. <td width="5%" height="12"></td>
  21. <td width="90%" height="12"></td>
  22. <td width="5%" height="12"></td>
  23. </tr>
  24. <tr>
  25. <td width="5%" height="35"></td>
  26. <td width="90%" height="35">亲爱的用户:</td>
  27. <td width="5%" height="35"></td>
  28. </tr>
  29. <tr>
  30. <td width="5%" height="8"></td>
  31. <td width="90%" height="8"></td>
  32. <td width="5%" height="8"></td>
  33. </tr>
  34. <tr>
  35. <td width="5%" height="33"></td>
  36. <td width="90%" style="text-indent:2em">
  37. 邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱
  38. 内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容
  39. 邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容
  40. <img src="images/email-ban1.png" alt="" width="100%" border="0" style="margin:5px 0;max-width:100%;"/>
  41. </td>
  42. <td width="5%" height="33" style="color:#fff;"></td>
  43. </tr>
  44. <tr>
  45. <td width="5%" height="10"></td>
  46. <td width="90%" height="10">
  47. </td>
  48. <td width="5%" height="10"></td>
  49. </tr>
  50. <tr>
  51. <td width="5%" height="33"></td>
  52. <td width="90%" align="right">
  53. 某某部门
  54. </td>
  55. <td width="5%" height="33"></td>
  56. </tr>
  57. <tr>
  58. <td width="5%" height="15"></td>
  59. <td width="90%" height="15"></td>
  60. <td width="5%" height="15"></td>
  61. </tr>
  62. </table>
  63. <table cellpadding="0" cellspacing="0" width="650" align="center" bgcolor="#f3f3f3" style="border-top:4px solid #ffbc5c;color:#666;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
  64. <tr>
  65. <td width="5%" height="30"></td>
  66. <td width="50%" height="30">
  67. </td>
  68. <td width="45%" height="30"></td>
  69. </tr>
  70. <tr>
  71. <td width="5%" height="30"></td>
  72. <td width="50%" height="30" align="left">
  73. 随便写啊随便写
  74. </td>
  75. <td width="45%" rowspan="3" align="center">
  76. <img src="images/le-qrcode.jpg" alt="" border="0" width="120" height="120" />
  77. <br>
  78. 微信扫一扫
  79. </td>
  80. </tr>
  81. <tr>
  82. <td width="5%" height="30"></td>
  83. <td width="50%" height="30" align="left">
  84. 联系电话:XXX-XXX-XXXX
  85. </td>
  86. </tr>
  87. <tr>
  88. <td width="5%" height="30"></td>
  89. <td width="50%" height="30" align="left">
  90. QQ:123456789 邮箱:XXXXXXX.com
  91. </td>
  92. </tr>
  93. </table >
  94. <table cellpadding="0" cellspacing="0" width="650" align="center" bgcolor="#f3f3f3" style="color:#333;font-size:16px;font-family:Arial, Helvetica, sans-serif;">
  95. <tr>
  96. <td width="5%" height="35"></td>
  97. <td width="90%" height="35" rowspan="3" align="center">
  98. 宣传语宣传语宣传语宣传语宣传语宣传语
  99. </td>
  100. <td width="5%" height="35"></td>
  101. </tr>
  102. </table >
  103. </body>
  104. </html>

 

以上就是使用HTML编写邮件的详细内容,更多关于使用HTML编写邮件的资料请关注九品源码其它相关文章!