用HTML+CSS编写一个简单的邮件模板

喜欢撸猫的帅伟
2,009 阅读4分钟

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

前言

在平常的生活中我经常收到一些很绚丽的邮件，我很感兴趣于是就研究了一下。发现这些邮件其实就是将一个网页通过邮箱的客户端展示出来的，其实还是用的HTML + CSS来实现的，查到资料之后知道了他有个正式的名称叫做 HTML Email。
接来下我们就自己简单的创建一个属于自己的HTML Email。

最终效果如下：

image.png

具体操作

1.注意事项

  • css尽量采用行内样式 虽然说这个HTML Email是用HTML+CSS来实现的但是由于各种邮箱客户端的机制，各种客户端可能会将页面的中的<style>标签给截掉，所以我们尽量采用行内的样式来写CSS代码，而且不要简写，写完整。
  • Doctype 我看网络上的文章都说使用这个XHTML 1.0 Strict兼容性会更好，但是我使用QQ邮箱会自动将下面内容截取成只剩<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    </head>
  • 全部采用<table>标签进行布局
 <body>
    <table
        style="width: 600px;"
        align="center"
        cellspacing="0"
        cellpadding="0"
      >
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
<body>

由于css在很多的邮件系统中支持都不太相同，所以我们建议使用<table>布局，可以省去很多布局样式。
直接用一个 <table> 作为主容器放置我们邮件的所有内容，正常设置宽度为600~800，目的是为了不超过邮箱客户端的宽度。
每一个<tr>代表一行内容，每一个<td>代表这一行中的一列，需要注意的是要保证每一个同级的<tr>中的<td>数量保持一致，不然有些客户端会自动补足<td>,会导致页面跑版。如果遇到需要使用不同数量的td只需要在td里面再嵌套一个<table>套娃使用。

举例：

<table>
  <tr>
    <td>一列</td>
  <tr/>
  <tr>
    <td>一列</td>
  <tr/>
  <tr>
    <td>
      <table>
        <tr>
          <td>需要两列的时候</td>
          <td>需要两列的时候</td>
        <tr/>
    </td>
  <tr/>
</table>
  • 图片引用 当我们使用图片的时候有些邮件客户端会暂不显示图片，需要用户允许之后才能显示。
    所以我们的图片都必须加上alt属性，防止图片显示不出来的时候样式难看。

2. HMTL + CSS代码编写

我们先创建一个HTML文件，HMTL + CSS内容就全部写在里面，做完可以用浏览器先看大致的样式，边做边改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    </head>
    <body LINK="#c6d4df" ALINK="#c6d4df" VLINK="#c6d4df" TEXT="#fff">
      <table
        style="
          width: 600px;
          background-color: #298294;
          padding:10px 10px 0 10px;
        "
        align="center"
        cellspacing="0"
        cellpadding="0"
      >
        <tr>
          <td
            style="
              height: 65px;
              text-align: center;
            "
          >
            <img
              src="https://p26-passport.byteacctimg.com/img/user-avatar/6bdfb97019c84ab4766b43b8da314072~300x300.image"
              style="
                width: 55px;
                height: 55px;
                background-color: #f9f9f9;
                border-radius: 50%;
                border: 1px solid #fff
              "
              alt="ICON"
            >
            <h4 
              style="
                margin:10px 0;
                color: #fff;
                font-family: Helvetica, Arial, sans-serif;
              "
              >喜欢撸猫的帅伟</h4>
            <div
              style="
                margin-top: 10px;
                border-bottom: 2px solid #fff;
              "
            ></div>
          </td>
        </tr>
        <tr>
          <td>
            <div>
  <pre
    style="
      margin: 20px 30px;
      font-size: 14px;
      color: #fff;
      font-family: Helvetica, Arial, sans-serif;
    "
  >
  你好，XXX:
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
        大家好我是帅伟，大家好我是帅伟
  </pre>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="border-bottom: 2px solid #fff;"></div>
            <table
              width="600px"
              height="35"
              border="0"
              align="center"
              cellpadding="0"
              cellspacing="0"
            >
                <tr align="top">
                  <td
                    align="top"
                    style="padding: 10px 0;"
                  >
                    <span
                      style="
                        color: #fff;
                        font-size: 9px;
                        font-family: Verdana, Arial, Helvetica, sans-serif;
                        line-height: 25px
                      "
                    >
                      ©从现在开始我将一次不死并且超神。
                    </span>
                  </td>
                  <td width="300" style="padding: 10px 0;">
                    <a
                      href="https://juejin.cn/user/537023364467927"
                      style="
                        text-align: right;
                        display: block;
                      "
                    >
                      <img
                      src="https://p26-passport.byteacctimg.com/img/user-avatar/6bdfb97019c84ab4766b43b8da314072~300x300.image"
                      alt="头像"
                      style="
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                      "
                      alt="ICON"
                    >
                    </a>
                  </td>
                </tr>
            </table>
          </td>
        </tr>

      </table>
    </body>
  </html>

以上就是我文章开头那个简单的HTML Mail，大家可以直接复制下来修改玩玩看。

额外细节总结

  • 所有的有文字的标签都需要单独的设置字体样式，字体大小和颜色。
  • <table>设置align="center"可以把整个邮件内容居中显示。
  • 邮件的正文内容，我使用了<pre>标签，<pre>中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体，这样我们可以随便空格和换行了。

3.发送邮件

以QQ邮箱网页版为例： image.png 在我们编辑邮件正文的时候点击最后的编辑HTML源码，然后复制上我们调整好的HTML代码，就可以发送自己的HTML Mail啦。

总结

这个HTML Mail是可以运用在项目中的，我们可以将这个模板封装起来给后端，之后我们只要将收件人和编辑好的邮件正文内容发送给后端。后端可以将接受到的正文内容塞进我们的邮件模板中生成邮件，最后通过公司邮箱发送给指定的用户。
以上就是我所掌握的HTML Mail内容啦，希望可以给大家带来帮助，Thanks♪(･ω･)ﾉ。

avatar
文章
阅读
粉丝