Maison interface Web tutoriel HTML Conseils pour créer des e-mails HTML pouvant être affichés normalement dans la production de boîtes aux lettres grand public_HTML/Xhtml_Web

Conseils pour créer des e-mails HTML pouvant être affichés normalement dans la production de boîtes aux lettres grand public_HTML/Xhtml_Web

May 16, 2016 pm 04:43 PM
grand public 制作 图片 布局 技巧 显示 normale 过滤 邮件 邮箱


Suggestions pour l'envoi d'e-mails HTML : utilisez le style pour écrire du CSS en ligne ; utilisez moins d'images ; utilisez des tableaux pour implémenter des mises en page à gauche et à droite ou des mises en page plus complexes ; utilisez des éléments d'arrière-plan pour définir des images d'arrière-plan, etc.
Presque tous les sites Web basés sur l'adhésion doivent envoyer des e-mails en arrière-plan pour communiquer avec les membres, comme la confirmation d'inscription et la promotion marketing. Ces lettres envoyées par le site aux membres sont souvent au format texte brut et ne peuvent pas répondre aux exigences d'interface et d'interaction. À l'heure actuelle, nous devons envoyer des pages HTML. 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.
Suggestions pour l'envoi d'e-mails HTML : utilisez le style pour écrire du CSS en ligne ; utilisez moins d'images ; utilisez des tableaux pour implémenter des mises en page à gauche et à droite ou des mises en page plus complexes ; utilisez des éléments d'arrière-plan pour définir des images d'arrière-plan, etc.
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 des boîtes aux lettres Gmail, Hotmail, 163, Sohu et Sina, j'ai divisé les boîtes aux lettres en deux catégories :
La première catégorie comprend Gmail, Hotmail et Sohu. Dans 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.
La deuxième catégorie comprend 163 et sina. Dans ce type de boîte aux lettres, le contenu de l'e-mail est présenté dans une iframe distincte.
Les amis qui connaissent le HTML savent que le contenu iframe est traité comme un document indépendant et est 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 :
corps {font-size:20px}

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. De plus, les styles tels que float et position qui forment des flux de contenu anormaux seront également filtrés. write , cela est susceptible d'affecter les performances des boîtes aux lettres externes.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel de connexion à l'entrée du site officiel Deepseek Tutoriel de connexion à l'entrée du site officiel Deepseek Feb 19, 2025 pm 04:24 PM

Tutoriel de connexion à l'entrée du site officiel Deepseek

Sesame Open Door Site officiel Sesame Open Door application Dernier site Web entrant Sesame Open Door Site officiel Sesame Open Door application Dernier site Web entrant Feb 28, 2025 am 11:18 AM

Sesame Open Door Site officiel Sesame Open Door application Dernier site Web entrant

Sesame Open Door Exchange Page d'enregistrement de page Enregistrement Gate Trading App The Registration Site Web Sesame Open Door Exchange Page d'enregistrement de page Enregistrement Gate Trading App The Registration Site Web Feb 28, 2025 am 11:06 AM

Sesame Open Door Exchange Page d'enregistrement de page Enregistrement Gate Trading App The Registration Site Web

portail d'enregistrement de la version Web de Gateio Exchange portail d'enregistrement de la version Web de Gateio Exchange Feb 20, 2025 pm 04:12 PM

portail d'enregistrement de la version Web de Gateio Exchange

Obtenez l'inscription OUYI en 3 minutes Obtenez l'inscription OUYI en 3 minutes Feb 19, 2025 pm 06:54 PM

Obtenez l'inscription OUYI en 3 minutes

GATE OFFICIEL SITEET Adresse de connexion Gate Exchange Connexion du site officiel GATE OFFICIEL SITEET Adresse de connexion Gate Exchange Connexion du site officiel Feb 19, 2025 pm 03:09 PM

GATE OFFICIEL SITEET Adresse de connexion Gate Exchange Connexion du site officiel

portail d'enregistrement officiel de Gate.io Exchange portail d'enregistrement officiel de Gate.io Exchange Feb 20, 2025 pm 04:27 PM

portail d'enregistrement officiel de Gate.io Exchange

Plateforme de trading GATEIO Plateforme de trading GATEIO Feb 21, 2025 pm 02:42 PM

Plateforme de trading GATEIO

See all articles