電子メールの HTML ページを作成するための原則の概要

まず、メールボックスに HTML メールがどのように表示されるかを見てみましょう。私は電子メール システムに携わったことがなく、主要な電子メール システムの背後にあるフィルタリング アルゴリズムは、部外者にとってそれほど簡単に理解できるものではありません。したがって、メールボックスで受け入れられる書き込み方法と、フロントエンドの表示を通じてフィルタリングされる書き込み方法を推測することしかできません。 Gmail、Hotmail、163、sohu、sina の分析を通じて、メールボックスを 2 つのカテゴリに分類します。

最初のカテゴリには、gmail、hotmail、sohu が含まれます。このタイプのメールボックスの場合、電子メールの内容はメールボックス ページ全体の div にレイアウトされます。図に示すように:

2 番目のカテゴリには 163 と sina が含まれます。このタイプのメールボックスでは、電子メールの内容は独立した iframe にレイアウトされます。図に示すように:

HTML に詳しい人なら、iframe コンテンツは独立したドキュメントであり、親ページの要素や CSS とは無関係であり、ほぼ独立したページとして扱うことができることを知っています。電子メールの内容が div 内にある場合、電子メールの内容はメールボックス ページ全体の不可欠な部分になります。明らかに、表示方法として iframe を使用する電子メールは、十分に独立した表示スペースを提供するため、電子メール コンテンツに対してはるかに寛容になります。 div はあまり丁寧ではありません。メールにこの CSS を記述すると、メール ページ全体のフォント サイズが 20 ピクセルになり、乱雑になるのではないかと想像してください。
<スタイル タイプ="text/css">
本文 {フォントサイズ:20px}
</スタイル>
すべてのメールボックスと互換性のある統一されたメールテンプレートを記述する必要がある場合、上記の外部 CSS 記述方法を避ける必要があります。また、異常なコンテンツフローを形成する float や position などのスタイルもフィルタリングされます。これらを記述すると、外部メールボックスのパフォーマンスに影響を与える可能性があります。

ここにいくつかの執筆原則を示します。
1. グローバル ルールの 1 つは、<style> タグを記述せず、クラスを記述せず、すべての CSS でスタイル属性を使用し、特定のスタイルを必要とする要素のインライン CSS を記述するためにスタイルを使用することです。

2. 2 番目のグローバル ルールは、画像の使用を減らすことです。メールボックスは img タグをフィルターしませんが、システムは多くの場合、見慣れないメールからの画像を読み込まないことをデフォルトとしています。メールに多くの画像が使用されている場合、画像が読み込まれないと見苦しくなり、コンテンツさえもはっきりと見えなくなります。我慢できないユーザーは、すぐに削除します。画像には常に alt を追加します。

3. スタイル内に float、position、その他のスタイルを記述しないでください。これらはフィルタリングされます。では、左右レイアウトやより複雑なレイアウトを実現するにはどうすればよいでしょうか?テーブルを使用します。

4. 背景色はスタイル コンテンツで設定できますが、画像はフィルターされるため、CSS を通じて背景画像を設定することはできません。しかし、背景とも呼ばれる非常に興味深い要素属性があり、画像パスを定義できます。これは良い代替手段です。機能は制限されていますが、たとえば背景画像を配置することはできませんが、何もないよりはましです。たとえば、セルに背景を追加するには、次のように記述する必要があります。
<td 背景=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>

5. div モードのメールボックスはフラッシュをサポートしていないため、iframe モードのメールボックスを検証する必要があります。

最後に、Sohu のメールは非常に奇妙であることを述べておきます。各テキスト段落の後にスペースが追加されるため、通常のレイアウトが 1 行に収まらず折り返され、レイアウトが乱れてしまいます。したがって、Sohu Mail との互換性を確保したい場合は、コンパクトなレイアウトに遭遇したときには特に注意し、テキスト セグメントの数を減らして十分な幅を残すようにしてください。