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

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 つとして、

2. グローバル ルール 2、使用する写真を減らします。メールボックスでは img タグがフィルターされませんが、メールで多くの写真を使用すると、システムはデフォルトで見知らぬ人からの写真をロードしません。場合によっては、内容があまりにも醜いため、内容がはっきりと見えず、せっかちなユーザーが直接削除してしまうことがあります。画像には必ずaltを追加してください。

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

4. 背景色はスタイルコンテンツで設定できますが、画像はフィルタリングされるため、CSS を通じて背景画像を設定することはできません。ただし、非常に興味深い要素属性 (background とも呼ばれます) があり、画像パスを定義できます。これは、背景画像を見つけることができないなど機能が制限されていますが、何もしないよりは優れています。たとえば、セルに背景を追加するには、次のように記述する必要があります:

> ;
5. div モードのメールは Flash をサポートしていないため、iframe モードのメールは検証する必要があります。

最後に、sohu の電子メール アドレスは非常に奇妙で、各テキスト段落の後にスペースが追加され、元の通常のレイアウトが 1 行に収まらず新しい行に折り返され、レイアウトが混乱します。したがって、sohu メールボックスと互換性を持たせたい場合は、コンパクトなレイアウトに遭遇した場合には特に注意し、テキスト セグメントの数を減らし、十分な幅を残すようにする必要があります。