Написание электронной почты в формате HTML

HTML
Написание электронной почты в формате HTML

Сводный обзор

1. Написание и разработка сценариев для электронной почты в формате HTML

  • Когда вы размещаете заказ, компания электронной коммерции может отправить вам подробное электронное письмо.
  • China Merchants Bank может отправить вам платежное письмо по электронной почте
  • Отправляю вам электронное письмо в день вашего рождения
  • я пришлю вам письмо
  • Юбилейная электронная почта

Во-вторых, возникшие проблемы

Совместимость с электронной почтой плохая

Контекст содержимого электронной почты или внешнего контейнера (в дальнейшем именуемого средой) определяется поставщиком услуг электронной почты.Разные поставщики услуг электронной почты имеют некоторые различия в поддержке макета внешнего интерфейса. Это требует, чтобы содержимое почты в любом случае отображалось должным образом.

Электронные контейнеры разные

Код внешнего интерфейса электронной почты, который вы пишете, может быть помещен в iframe, а ваш контент помещен в тело; он может быть помещен в div, и ваш контент будет помещен в этот div.

Электронная почта поставляется с настройками

Программное обеспечение для работы с электронной почтой, устанавливающее некоторые css, может иметь на вас неизвестный эффект. Вероятно, тип документа не объявлен, даже если он подтвержден, и это не то, что вам нужно.

Избегайте вложения в неправильный контейнер

Поскольку контейнер может быть body или div, содержимое нашего письма не должно быть полным html. Таким образом, содержимое электронной почты должно быть html-фрагментом с div в качестве корневого узла.

3. Окружающая среда (внешний контейнер)

Код электронной почты, который мы написали, принадлежит разным поставщикам услуг электронной почты, и соответствующие внешние контейнеры не совпадают.

Почтовый ящик QQ: контент, написанный вами, вложен в div

Outlook E-mail: содержание, которое я написал, я не знаю, что элементы вложены в самом элементе, а также элементы, которые я написал, смешивали вместе
Другая электронная почта, которую вы можете проверить сами

В-четвертых, разработка Doctype

Тег doctype — это стандартное объявление типа документа языка разметки общего назначения, и его назначение — сообщить стандартному синтаксическому анализатору языка разметки, какое определение типа документа (DTD) следует использовать для анализа документа.

Наиболее совместимым типом документа является XHTML 1.0 Strict, поскольку Gmail и Hotmail удалят ваш тип документа и заменят его этим типом документа. Использование этого типа документа означает, что синтаксис HTML5 использовать нельзя.

Пять, макет развития

  • В макете веб-страницы рекомендуется использовать таблицу (таблицу)
  • CSS является встроенным, вы не можете написать стиль в теге head, и вы не можете его обрисовать.
  • Его нельзя позиционировать плавающим образом. position: absolute; float: left; и так далее не получится, float можно распознать в клиенте почтового ящика QQ, но не в Outlook.
  • Чтобы обеспечить совместимость, вам необходимо установить ширину письма 600 пикселей, а максимум — 600 пикселей;

Макет веб-страниц должен использовать таблицы. Во-первых, поместите большой крайний стол, чтобы установить фон. Внутри слоя поместите вторую таблицу. используется для отображения контента. Ширина второй таблицы установлена ​​равной 600 пикселям, чтобы она не превышала ширину экрана клиента.

6. Стиль разработки

  • Избегайте конфликтов css или перезаписи
  • Попробуйте использовать несемантические теги, такие как div и span.
  • Старайтесь избегать сокращенных форм для значений свойств CSS.
  • Размер шрифта: 0; Очень важно, в противном случае QQ-Mail автоматически заполнит многие пробелы, влияют на макет
  • Уменьшите наличие ненужных пробелов и пробелов, влияющих на красоту страницы.
错误的写法
<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"> 

推荐写法
<div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">

Все правила CSS, предпочтительно встроенные стили. Из-за стилей, размещенных в шапке веб-страницы, она, скорее всего, будет удалена клиентом. Клиентская поддержка правил CSS Кроме того, не используйте сокращенную форму CSS, которую некоторые клиенты не поддерживают. Поскольку css мог быть установлен в среде, например, какой-то сброс, какой-то .class. Таким образом, мы можем использовать только встроенный стиль, чтобы обеспечить наш эффект, и установить базовый стиль на корневом узле контента, и попытаться использовать div, span и другие несемантические теги.

Семь, фотографии развития

  • Используйте меньше img, почтовый ящик не будет фильтровать ваши теги img, но система часто не загружает картинки незнакомых писем по умолчанию
  • Если IMG необходим, обязательно напишите ALT и Title;
  • Максимальный размер изображения в Outlook составляет 1728 пикселей, а часть, превышающая 1728, будет обрезана.
  • Outlook может автоматически уменьшать img, чтобы его верхняя позиция была 1728 пикселей (последний тест не масштабировался, он был напрямую обрезан)
  • Рекомендуется обрезать img и складывать их вместе
  • Некоторые клиенты будут добавлять границы к ссылкам img, и границы должны быть удалены.
<img border="0" style="display:block;
                    outline:none; 
                    text-decoration:none; 
                    -ms-interpolation-mode: bicubic;
                    border:none;">

Изображения являются единственными внешними ресурсами, на которые можно ссылаться. На другие внешние ресурсы, такие как файлы таблиц стилей, файлы шрифтов, видеофайлы и т. д., вообще нельзя ссылаться. Некоторые клиенты добавляют рамку к ссылке на изображение и удаляют рамку. Важно отметить, что многие клиенты не отображают изображения по умолчанию (например, Gmail), поэтому убедитесь, что основной контент можно прочитать даже без изображений.

Восемь, фон развития

  • Используйте меньше фона и рекомендуйте использовать вырезанные изображения как можно чаще.
  • Gmail также не поддерживает фоновые изображения в CSS.
  • В Outlook2007, Outlook2010 фоновое изображение не будет отображаться

Изображения являются единственными внешними ресурсами, на которые можно ссылаться. На другие внешние ресурсы, такие как файлы таблиц стилей, файлы шрифтов, видеофайлы и т. д., вообще нельзя ссылаться. Некоторые клиенты добавляют рамку к ссылке на изображение и удаляют рамку. Важно отметить, что многие клиенты не отображают изображения по умолчанию (например, Gmail), поэтому убедитесь, что основной контент можно прочитать даже без изображений.

Девять, сводка по совместимости электронной почты

  • Лучше использовать раскладку меток TABLE, через tr td контролировать расстояние до пробела и т. д.
  • Каждая настройка метки: поле: 0; отступ: 0; размер шрифта: 0; (обратите внимание на распаковку)
  • задать ширину, высоту
  • Используйте меньше картинок, меньше фона
  • Mail не поддерживает js, предупреждение
  • Рекомендуется добавить mso-line-height-rule:exactly перед использованием высоты строки.
  • margin:0; padding: 0;colspan="1" height="375" Порядок не может быть изменен

Клиент: почтовый ящик Foxmail Outlook QQ Чтобы справиться с причудами электронной почты, потратил много времени на тестирование, чтобы убедиться во всех дырах Outlook. Но .... все равно неизбежно совместимые проблемы Если вы совместимы с почтовым ящиком Foxmail и QQ, вы можете писать электронные письма почти так же, как писать в Интернете. Так как в почтовом клиенте разная поддержка CSS, его нужно многократно тестировать и потом передавать, и стиль правильный. Если есть несовместимая ситуация, обязательно используйте самый простой способ, используйте самый простой способ, как можно меньше со специальными тегами и сложными свойствами.

Источник: ежедневная сводка команды и обмен информацией.

Категории