HTML 邮件需要注意的点

优秀参考

• 邮件应该使用哪种 HTML 标准
• HTML 邮件兼容性列表
• 优秀实践指南
• utils: premailer: 样式处理, 从 head style 注入到 inline style 中

XHTML 1 规范与 HTML 4 的差异

翻译自 https://www.w3.org/TR/xhtml1/

1. 文档格式必须正确

   正确: 嵌套元素

   <p>这是强调 <em>段落</em>。</p>
   

   错误: 重叠元素

   <p>这是强调 <em>段落</p>。</em>
   

2. 元素名和属性名必须小写

   li 而非 LI

3. 非空元素必须要结束标签

   正确

   <p>这是一段。</p><p>这是另一段。</p>
   

   错误

   <p>这是一段。<p>这是另一段。
   

4. 所有属性值必须使用引号

   正确

   <td rowspan="3">
   

   错误

   <td rowspan=3>
   

5. 不支持属性最小化(Attribute Minimization)

   正确

   <input checked="checked" />
   

   错误

   <input checked />
   

6. 空元素必须有结束标签

   正确

   <br /><hr />
   

   错误

   <br><hr>
   

7. 处理属性值中的空白

   根据 XML 属性值归一化 的标准:

   • 去除前导和尾随空白字符
   • 词间的一个或多个空白字符(包括换行符)将替换为一个 space

8. script 和 style 元素(其实在邮件中是用不上 script 的)

   在 XML 中, < 和 & 被视为标记的开始, 而 < 和 & 会被转义为 < 和 &. 所以如果你不希望他们被转义, 可以用 CDATA 包裹他们, 或者引用外部文档

   <script type="text/javascript">
     <![CDATA[
     ... unescaped script content ...
     ]]>
   </script>
   

9. SGML 排除项

   SGML 禁止某些元素嵌套, XML 中没有这些禁令, 但仍表示这些元素不应嵌套

   • a 禁止包含其他 a
   • pre 禁止包含其他 img, object, big, small, sub, sup
   • button 禁止包含其他 input, select, textarea, label, button, form, fieldset, iframe, isindex
   • label 禁止包含其他 label
   • form 禁止包含其他 form

10. 元素的 id 和 name 属性

    HTML 4 为 a, applet, form, frame, iframe, img, map 定义了 name 属性, 同时也有 id 属性, name 和 id 都是用作片段标识符

    而 XML 仅使用 id 作为标识符, 且必须文档内唯一(id不能重复), 因此出于兼容性考虑, 当上述元素需要定义标识符时, 必须使用 id(而非 name)

    同时需要注意, 上述元素的 name 属性在 XHTML 1.0 中已被正式弃用, 并将在 XHTML 的后续版本中删除。

11. 属性枚举值

    HTML 4 中, 属性枚举值不区分大小写(如 input 的 type 属性, 值 TEXT 等同于 text), 但在 XML 中区分大小写, XHTML 1 中定义为小写

12. 16 进制实体引用(Entity references)必须使用小写

    &#xnn; 而非 &#XNN;

13. 空元素的尾随 / 前面要加一个空格

    • <br /> 而非 <br/>
    • 使用 <br /> 而非 <br></br> (因为后者, 用户代理可能给出不确定的结果, 即不同浏览器的解析结果可能不一致)

14. 内容模型(content model)非空的元素, 别使用 minimized form

    <p> </p> 而非 <p />

15. 如果 scripts or style sheets 脚本中有用到 <, &, ]]>, -- 时, 使用外部脚本

    XML 允许用户代理删除注释, 因此你想将他们放在注释中来做兼容也是行不通的

16. 避免在属性值中使用换行符和多个空白字符, 用户代理处理这些情况是不一致的

17. 同时使用 lang 和 xml:lang 时, xml:lang 的优先级更高

18. 片段标识符

    标识符用于在 URI 结尾来引用元素, 如 #foo 会引用到 标识符的值为 foo 的元素。

    • XML 中以 id 作为标识符, HTML 4 以 name 作为标识符, 建议对支持的元素, 同时使用 id 和 name, 以做到最大兼容。
    • 需要注意, XHTML 1.0 中 a, applet, form, frame, iframe, img, map 的 name 属性已弃用, 并将在 XHTML 的后续版本中删除。

19. 在属性值(和其他地方)中使用 & 符号需要转义 (存疑)

    文档表示, 当元素 href 属性带有 & 符号时, 需要转义, 如:

    • 正确: http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user
    • 错误: http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user

    我是有些存疑的, 那样还能访问到正确的地址吗? 待测试

20. 一些在 HTML 文档中合法的字符, 在 XML 文档中是非法的。

    例如, 在 HTML 中, Formfeed 字符 (U+000C) 被视为空白, 在 XHTML 中, 由于 XML 对字符的定义, 它是非法的。

21. 撇号 不应该使用 ' 而应该使用 '

    • 命名字符引用 ' (撇号 U+0027: ') 是在 XML 1.0 中引入的, 但没有出现在 HTML 中。因此, 应该使用 ' 而不是 ', 才能在 HTML 4 用户代理中按预期工作。
    • 我就遇到过, 产品表示部分用户收到的邮件标题直接出现了 ', 体验非常不好, 而 ' 是否可以避免这个问题? 待测试