ホームページ > ウェブフロントエンド > htmlチュートリアル > 電子メール メッセージ用の HTML ページを作成するための原則の概要_HTML/Xhtml_Web ページの制作

電子メール メッセージ用の HTML ページを作成するための原則の概要_HTML/Xhtml_Web ページの制作

WBOY
リリース: 2016-05-16 16:42:02
オリジナル
1512 人が閲覧しました

HTML メールはこのサイトの独立したホスト ページではないため、他のサイトでホストされています。したがって、HTML 電子メールの作成は、HTML ページの作成とは大きく異なります。なぜなら、ネチズン向けのすべての主流メールボックスは、バックグラウンドで受信する HTML メールを多かれ少なかれフィルタリングするからです。 onclick や onmouseover などのすべてのイベント リスニング属性を含め、JS コードが厳密にフィルタリングされていることは間違いありません。これは電子メールのセキュリティに関する考慮事項に基づいています。それだけでなく、CSS コードも部分的にフィルターされます。私が話したいのは、主要な主流メールボックスでフィルタリングされず、正常に表示できる HTML メールを作成する方法です。

まず、メールボックスに HTML メールがどのように表示されるかを見てみましょう。私自身電子メール システムに取り組んだことはありませんし、主要なメールボックスのバックグラウンドで行われているフィルタリング アルゴリズムを部外者が知るのは簡単ではありません。したがって、どの書き込みメソッドがメールボックスで受け入れられ、どの書き込みメソッドが除外されるかを推測するには、フロントエンド表示を使用することしかできません。 gmail、hotmail、163、sohu、sina の分析を通じて、メールボックスを 2 つのカテゴリに分類しました:

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


2 番目のカテゴリには 163 と sina が含まれており、このタイプのメールボックスでは、電子メールのコンテンツは別の iframe にレイアウトされます。写真に示すように:

HTML に詳しい友人は、iframe コンテンツが独立したドキュメントであり、親ページの要素や CSS から独立していることを知っており、ほぼ独立したページとして扱うことができます。また、電子メールのコンテンツが div 内にある場合、電子メールのコンテンツはメールボックス ページ全体の不可欠な部分になります。表示方法として iframe を使用するメールボックスは、表現のための十分な独立したスペースを提供するため、電子メールのコンテンツに対する耐性がはるかに高くなるのは明らかです。 divはそれほど丁寧ではありません。想像してみてください。この CSS 文をメールに記述すると、メール表示ページ全体のフォント サイズが 20px になり、めちゃくちゃになります。

各メールボックスと互換性のある統一された電子メール テンプレートを作成する必要があるため、上記の外部 CSS 作成方法やスタイルに似た方法は避けなければなりませんfloatやpositionなどの異常なコンテンツフローを記述すると、外部メールボックスのパフォーマンスに影響を与える可能性があります。


以下にいくつかの記述原則を示します。 1. グローバル ルールの 1 つとして、