Résumé des principes d'écriture de pages HTML pour les messages électroniques_HTML/Xhtml_Production de pages Web

L'email HTML n'étant pas une page HOST indépendante sur ce site, il est hébergé sur d'autres. L’écriture d’e-mails HTML est donc très différente de l’écriture de pages HTML. Parce que toutes les boîtes aux lettres grand public des internautes filtreront plus ou moins les e-mails HTML qu’ils reçoivent en arrière-plan. Il ne fait aucun doute que le code JS est strictement filtré, y compris tous les attributs d'écoute d'événements, tels que onclick et onmouseover. Ceci est basé sur des considérations de sécurité de messagerie. De plus, le code CSS sera également partiellement filtré. Ce dont je veux parler, c'est de la façon d'écrire des e-mails HTML qui ne sont pas filtrés par les principales boîtes aux lettres grand public et qui peuvent être affichés normalement.

Tout d’abord, examinons comment la boîte aux lettres affiche les e-mails HTML. Je n’ai jamais travaillé moi-même sur un système de messagerie, et les algorithmes de filtrage en arrière-plan des principales boîtes aux lettres ne sont pas faciles à connaître pour les étrangers. Par conséquent, nous ne pouvons utiliser l'affichage frontal que pour déduire quelles méthodes d'écriture sont acceptées par la boîte aux lettres et lesquelles seront filtrées. Grâce à l'analyse de gmail, hotmail, 163, sohu et sina, j'ai divisé les boîtes mail en deux catégories :

La première catégorie comprend Gmail, Hotmail et Sohu. Pour ce type de boîte aux lettres, le contenu de l'e-mail est disposé dans un certain div dans toute la page de la boîte aux lettres. Comme le montre l'image :

La deuxième catégorie comprend 163 et sina Dans ce type de boîte aux lettres, le contenu de l'e-mail est disposé dans une iframe distincte. Comme le montre l'image :

Les amis qui connaissent le HTML savent que le contenu iframe est un document indépendant et indépendant des éléments et du CSS de la page parent. Il peut presque être traité comme une page indépendante. Et si le contenu de l’e-mail est dans un div, alors le contenu de l’e-mail fait partie intégrante de l’ensemble de la page de la boîte aux lettres. Évidemment, les boîtes aux lettres qui utilisent l'iframe comme méthode de présentation seront beaucoup plus tolérantes au contenu des e-mails, car elles vous offrent un espace d'expression suffisamment indépendant. Le div n'est pas si poli. Imaginez, si vous écrivez cette phrase CSS dans votre e-mail, la taille de la police sur toute la page d'affichage de l'e-mail deviendra-t-elle 20 pixels et elle sera gâchée :

Nous devons écrire un modèle d'e-mail unifié compatible avec chaque boîte aux lettres, nous devons donc éviter la méthode d'écriture CSS externe ci-dessus et quelque chose de similaire aux styles tels que float et position qui deviennent des flux de contenu anormaux seront également filtrés si vous les écrivez, cela affectera probablement les performances de la boîte aux lettres externe.

Je vais énumérer ci-dessous quelques principes d'écriture : 1 Une des règles globales, n'écrivez pas la balise

2. Deuxième règle globale, utilisez moins d'images. Votre boîte aux lettres ne filtrera pas vos balises img, mais le système ne chargera souvent pas les images d'étrangers par défaut. Si vous utilisez beaucoup d'images dans le courrier, elles ne le seront pas. chargé dans l'e-mail. Dans certains cas, le contenu est si laid qu'il n'est pas visible clairement et les utilisateurs impatients le suppriment directement. Assurez-vous d'ajouter alt à l'image.

3. N'écrivez pas float ou position dans le style, car ils seront filtrés. Alors, comment implémenter une disposition gauche et droite ou une disposition plus complexe ? Utilisez le tableau.

4. La couleur d'arrière-plan peut être définie dans le contenu du style, mais l'image sera filtrée, ce qui signifie que l'image d'arrière-plan ne peut pas être définie via CSS. Mais il existe un attribut d'élément très intéressant, également appelé background, dans lequel vous pouvez définir un chemin d'image. C'est une bonne alternative. Même si cela a des fonctions limitées, comme l'impossibilité de localiser l'image d'arrière-plan, c'est mieux que rien. Par exemple, pour ajouter un fond à une cellule, vous devez écrire comme ceci :

> ;
5. Les e-mails en mode div ne prennent pas en charge le flash, et ceux en mode iframe doivent être vérifiés.

Enfin, l'adresse e-mail de sohu est très étrange. Elle ajoute un espace après chaque paragraphe de texte, ce qui fait que la mise en page normale d'origine ne tient pas sur une seule ligne et s'enroule sur de nouvelles lignes, provoquant ainsi une certaine confusion dans la mise en page. Par conséquent, si vous souhaitez être compatible avec les boîtes aux lettres sohu, vous devez être très prudent lorsque vous rencontrez certaines mises en page compactes, essayer de réduire le nombre de segments de texte et laisser une largeur suffisante.