基础知识（表格和内联 CSS）
布局表
HTML 电子邮件文件的结构类似于网页的结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
但是，基于 <div> 的 CSS 布局在电子邮件中不起作用，就像在 Web 上一样。主要的电子邮件客户端既不支持浮点数和弹性框等内容，也不会以不同方式对其进行修改。<div>s 在不同的客户端也有定位和盒子模型问题，特别是 Outlook。有一些 技术只使用 <div>s 来编写电子邮件，但是坚持使用表格进行布局会更安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
内联 CSS
应用内联样式使其优先于更远的样式（例如 webmail 客户端样式），并且还可以解决从头部或外部 CSS 文件中去除 CSS 的电子邮件客户端。内联 CSS 是确保在每个电子邮件客户端中保持一致显示的最佳方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
你有几个内联 CSS 选项：