Html ссылка email: Ссылка на адрес эл. почты

viber://calls

1

<a href="viber://calls">Открыть Вызовы в Viber</a>

Как работает: Открыть Вызовы в Viber

Как правильно сделать ссылку на WhatsApp

1. Открыть чат с номером

Замените “4957777777” на номер пользователя WhatsApp.

https://wa.me/4957777777

1

<a href="https://wa.me/4957777777">Чат с пользователем WhatsApp</a>

Как работает: Чат с пользователем WhatsApp

2. Открыть чат с номером и отправить сообщение:

Замените “4957777777” на номер пользователя WhatsApp.

https://wa.me/4957777777?text=Привет!

1

<a href="https://wa.me/4957777777?text=Привет!">Чат+сообщение WhatsApp</a>

Как работает: Чат+сообщение WhatsApp

3. Поделиться текстом

В приложении откроется список контактов для отправки:

whatsapp://send?text=Привет!

1

<a href="whatsapp://send?text=Привет!">Поделиться текстом WhatsApp</a>

Как работает: Поделиться текстом WhatsApp

Как сделать ссылку на Skype

1.

Замените “LOGIN” на имя пользователя Skype.

skype:LOGIN?userinfo

1

<a href="skype:LOGIN?userinfo">Skype</a>

Как работает: Просмотреть профиль Skype

2. Добавить в список контактов

Замените “LOGIN” на имя пользователя Skype.

skype:LOGIN?add

1

<a href="skype:LOGIN?add">Добавить в список контактов Skype</a>

Как работает: Добавить в список контактов Skype

3. Позвонить

Замените “LOGIN” на имя пользователя Skype.

skype:LOGIN?call

1

<a href="skype:LOGIN?call">Позвонить пользователю Skype</a>

Как работает: Позвонить пользователю Skype

4. Отправить сообщение

Замените “LOGIN” на имя пользователя Skype.

skype:LOGIN?chat

1

<a href="skype:LOGIN?chat">Отправить сообщение в Skype</a>

Как работает: Отправить сообщение в Skype

5.

Замените “LOGIN” на имя пользователя Skype.

skype:LOGIN?voicemail

1

<a href="skype:LOGIN?voicemail">Отправить голосовое сообщение в Skype</a>

Как работает: Отправить голосовое сообщение в Skype

Ссылка на VK

Прямая ссылка на диалог с пользователем вконтакте:

vk.me/agvento

1

<a href="vk.me/agvento">Написать в VK</a>

Как работает: Написать в VK

Ссылка на мессенджер Facebook

Прямая ссылка на диалог с пользователем вконтакте:

https://www.messenger.com/t/jack.malbon.3

1

<a href="https://www.messenger.com/t/jack.malbon.3">Facebook Messenger</a>

Как работает: Facebook Messenger

+7(495) 555-55-55

Пример ссылки на емайл

Написать автору

Написать автору

Ссылка на чат Viber

Добавить контакт в Viber

Поделиться текстом в Viber

Открыть Чаты в Viber

Открыть Вызовы в Viber

Чат с пользователем WhatsApp

Чат+сообщение WhatsApp

Поделиться текстом WhatsApp

Skype

Добавить в список контактов Skype

Позвонить пользователю Skype

Отправить сообщение в Skype

Отправить голосовое сообщение в Skype

Написать в VK

Facebook Messenger

Evgeny Agnishchenko

Один из основателей агентства Agvento. Web marketing и SEO в Agvento. "Самый честный SEO-шник этого города."

Создание и удаление гиперссылки в сообщении Outlook для Mac

Outlook для Microsoft 365 для Mac Office 2021 для Mac Outlook 2019 для Mac Outlook 2016 для Mac Office 2016 для Mac Office для бизнеса Office 365 для малого бизнеса Outlook для Mac 2011 Еще...Меньше

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

Вставка гиперссылки

1. В тексте сообщения настроите курсор в том месте, куда вы хотите добавить ссылку.

2. org/ListItem">

   На вкладке Сообщение нажмите кнопку Гиперссылка.

3. В поле Ссылка выберите Веб-страница или Файл, Этот документ или Адрес электронной почты:

4. Для веб-страницы или файла: добавьте полный URL-адрес. Для этого документа: выберите место в документе, выбрав Вверху документа, Заголовки или Закладки.

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

5. org/ListItem">

   В поле Текст введите текст, который должен отображаться в сообщении.

   Если ссылка должна отображаться как полный URL-адрес, оставьте поле Текст пустым.

   Примечание: Чтобы вставить ссылку из буфера обмена в текст сообщения, в меню Изменить выберите команду Вставить. Однако если в сообщение таким образом в нее вклеить ссылку, изменить ее текст будет нельзя. Текстом ссылки будет адрес, на который она указывает.

Преобразование текста в гиперссылку

1. Вы можете выбрать в сообщении текст, который вы хотите сделать гиперссылкой.

2. На вкладке Сообщение нажмите кнопку Гиперссылка.

3. В поле Ссылка введите соответствующий адрес.

Удаление гиперссылки

1. В сообщении наведите курсор на текст ссылки.

2. org/ListItem">

   На вкладке Сообщение щелкните значок гиперссылки и выберите удалить ссылку.

Ссылки в ваших сообщениях могут отображаться в виде полных URL-адресов или любого выбранного вами текста.

Выполните одно из указанных ниже действий.

Вставка гиперссылки

1. Поместите курсор в то место в тексте сообщения, где вы хотите добавить ссылку.

2. На вкладке Сообщение нажмите кнопку Гиперссылка.

3. В поле Ссылка введите соответствующий адрес.

4. В поле Текст введите текст, который должен отображаться в сообщении.

   Если ссылка должна отображаться как полный URL-адрес, оставьте поле Текст пустым.

   Примечания: 

   • Гиперссылки можно вставлять только в сообщения в формате HTML.

   • org/ListItem">

     Чтобы вставить ссылку из буфера обмена в текст сообщения, в меню Изменить выберите команду Вставить. Но если вставить ссылку в сообщение таким способом, вы не сможете изменить ее текст. Текстом ссылки будет адрес, на который она указывает.

Преобразование текста в гиперссылку

1. Выделите в сообщении текст, который вы хотите превратить в гиперссылку.

2. На вкладке Сообщение нажмите кнопку Гиперссылка.

3. В поле Ссылка введите соответствующий адрес.

Удаление гиперссылки

1. В сообщении наведите курсор на текст ссылки.

2. На вкладке Сообщение щелкните стрелку рядом с полем Гиперссылка и нажмите Удалить.

HTML-ссылки электронной почты — как добавить тему и основной текст

В этом посте объясняется, как создавать сложные HTML-ссылки электронной почты для вашего веб-сайта или блога, включая добавление темы электронного письма и основного текста. Проведя небольшое исследование для этого поста, я обнаружил, что в Интернете очень мало ресурсов, подробно описывающих продвинутые приемы кодирования, которые вы можете использовать для настройки ссылок электронной почты с помощью HTML. Итак, давайте проясним ситуацию…

Что такое ссылка на электронную почту?

Когда я имею в виду HTML  ссылки электронной почты Я имею в виду веб-ссылки, которые при нажатии автоматически открывают выбранное пользователем почтовое приложение на его компьютере, планшете или смартфоне. В своей базовой форме он просто сделает это и предварительно заполнит только поле электронной почты получателя. Однако, обладая некоторыми знаниями в области кодирования, вы можете настроить эти гиперссылки, чтобы также предварительно заполнить другую информацию, включая:

• тему
• основной текст
• поле CC (копия)
• поле BCC (слепая копия)

Базовый код

Базовый код для создания ссылки электронной почты в HTML выглядит следующим образом:

 Ваш видимый текст ссылки 

Видимая ссылка текст зажат между двумя фрагментами кода, которые сначала открывают, а затем закрывают элемент привязки (ссылки) . Гипертекстовая ссылка (href) всегда начинается с . Напишите мне по электронной почте
2. Соедините его с открывающимся и закрывающимся анкерным элементом.

    Напишите мне по электронной почте    

3. Добавьте команду гиперссылки и в кавычках добавьте адрес электронной почты.

  href="mailto:[email protected]"  >Напишите мне по электронной почте 

Надеюсь, это не было слишком болезненно. Читайте дальше, чтобы перейти на следующий уровень.

Как создать ссылку электронной почты в WordPress?

Чтобы создать этот базовый код на своем веб-сайте WordPress, выполните ту же процедуру, что и для создания обычной веб-ссылки. Выделите текст, нажмите кнопку инструмента ссылки  и введите mailto: , за которым следует адрес электронной почты (без пробелов).

 mailto:[электронная почта защищена] 

Добавляете собственный заголовок темы письма?

Чтобы предварительно заполнить заголовок темы, вы добавляете ?subject= , за которым сразу следует ваша тема.

 Ваш видимый текст ссылки 

Подождите секунду… что это за фрагмент кода %20?

Пробелы не допускаются в атрибуте href, поэтому мы заменяем каждый пробел на %20 

Вот еще пример:

 Ваш видимый текст ссылки 

Хорошо, понял. Как добавить основной текст к ссылкам электронной почты в формате HTML?

Чтобы предварительно заполнить электронное письмо основным текстом, добавьте ?body= , например:

 Ваш видимый текст ссылки 

Как совместить тему и основной текст?

Объединение нескольких команд помимо электронной почты адрес требует только один вопросительный знак  –  в начале, с которого начинается запрос. Затем вы добавляете амперсанд и  между каждой командой. Например:

 Ваш видимый текст ссылки 

Итак, первая команда начинается с ? , а последующие команды начинаются с и

Что еще поля электронной почты можно предварительно заполнить?

Команды могут быть в любом порядке. Большинство клиентских приложений электронной почты поддерживают все эти команды, но не все. Если команду нельзя использовать, ваши HTML-ссылки электронной почты будут по-прежнему работать, она просто пропустит команду.

Позвольте разбить информацию на небольшие кусочки

1. Начните с видимого текста

  Напишите мне по электронной почте  

2. Откройте опорную точку перед видимым текстом

    Напишите мне по электронной почте 

3. Закройте точку привязки после видимого текста

 Напишите мне по электронной почте    

4. Добавьте адрес электронной почты к атрибуту гиперссылки

 Напишите мне 

5. Добавьте адрес электронной почты

  Напишите мне 

6. Добавить тему command

 Напишите мне 

7. Добавьте тему

 Напишите мне 

8. Добавьте команду основного текста

 Напишите мне по электронной почте 

9. Добавьте основной текст

 < a href="mailto:[email protected]?subject=Hello%20you&body=  Этот%20blog%20post%20 имеет%20действительно%20помог%20me  ">Напишите мне по электронной почте 

10. Продолжайте добавлять другие команды, если хотите

 Напишите мне по электронной почте 

Вот код в действии → ссылка по электронной почте

—

Если вы используете WordPress…
Выделите видимый текст ссылки. Нажмите кнопку кнопку ссылки. Затем просто добавьте код ссылки гиперссылки между " кавычки. (начиная с mailto: )

Совет
Убедитесь, что в кавычках href нет пробелов.

Другие интересные настройки, которые не упоминаются на большинстве других веб-сайтов!!

Наряду со специальными кодами для замены пробелов символов существует целый ряд кодов, которые можно использовать для добавления других символов, чтобы оживить основной текст.

Общие символы абзаца

Символ	Код
Добавление одиночного возврата каретки (разрыв строки)	%0D
Добавление двойного возврата каретки	%0D%0D
Точка .	%2E
Запятая  ,	%2К
Восклицательный знак  !	%21
Вопросительный знак  ?	%3F
Речевые знаки  “	%22
Одинарная кавычка  '	%27
Амперсанд и	%26

Менее распространенные символы

Немного потренировавшись и набравшись терпения, вы скоро станете ниндзя ascii. 😉

Поищите в Google ASCII-арт, чтобы найти еще что-то подобное.

Надеюсь, эта статья оказалась для вас полезной. Если вы это сделали, рассмотрите возможность поделиться им или добавить комментарий ниже.

Best,
Команда Zaposphere

Ссылки в HTML-документах

 предыдущий следующий содержимое   элементы   атрибуты   индекс

Содержание

1. Введение в ссылки и якоря
   1. Посещение связанного ресурса
   2. Другие отношения связи
   3. Указание якорей и ссылок
   4. Заголовки ссылок
   5. Интернационализация и ссылки
2. А элемент
   1. Синтаксис имен якорей
   2. Вложенные ссылки незаконны
   3. Якоря с id атрибут
   4. Недоступен и неидентифицируем ресурсы
3. Отношения документов: элемент LINK
   1. Прямые и обратные связи
   2. Ссылки и внешний стиль листы
   3. Ссылки и поисковые системы
4. Информация о пути: элемент BASE
   1. Разрешающий родственник URI

HTML предлагает множество традиционных идиом для публикации форматированного текста и структурированные документы, но что отличает его от большинства других языков разметки, так это его функции для гипертекстовых и интерактивных документов. В этом разделе представлены ссылка (или гиперссылка, или веб-ссылка), основная гипертекстовая конструкция. А ссылка — это соединение с одного веб-ресурса на другой. Хотя простой концепции, ссылка была одной из основных сил, определяющих успех Веб.

А Звено имеет два конца, называемых якорями , и направление. Ссылка начинается с якоря «источник» и указывает на якорь «назначения», который может быть любым веб-ресурсом (например, изображением, видео клип, звуковой фрагмент, программа, документ HTML, элемент внутри HTML документ и др.).

12.1.1 Посещение связанного ресурса

Поведение по умолчанию, связанное со ссылкой, — получение другой веб-ресурс. Такое поведение обычно и неявно полученный путем выбора ссылки (например, путем нажатия, ввода с клавиатуры, так далее.).

Следующий отрывок HTML содержит две ссылки, одна целевой якорь которого является документом HTML с именем «chapter2.html», а другой, якорем назначения которого является изображение GIF в файле «forest. gif»:

<ТЕЛО>
  ...какой-то текст... 
Вы найдете гораздо больше в второй главе.
См. также эту карту зачарованного леса.

 

При активации этих ссылок (щелчком мыши, через клавиатуру ввод, голосовые команды и т. д.), пользователи могут посещать эти ресурсы. Обратите внимание, что href атрибут в каждом исходном якоре указывает адрес целевого якоря с URI.

Якорь назначения ссылки может быть элементом в HTML-документе. Якорю назначения должно быть присвоено имя якоря и любой URI, относящийся к нему. якорь должен включать имя в качестве идентификатора фрагмента.

Якоря назначения в документах HTML могут быть указаны либо с помощью A элемент (называя его с помощью имя атрибут) или любым другим элементом (название с атрибутом id ).

Так, например, автор может создать оглавление, записи которого ссылка на элементы заголовка h3 , h4 и т. д. в том же документе. Использование элемента A для создать якоря назначения, мы бы написали:

 
Содержание
 
Введение

Небольшая предыстория

Личное примечание

  ...остальное содержание... 
  ...тело документа... 
 
Введение 
  ...раздел 1... 
 
Небольшая предыстория 
  ...секция 2... 
 
Личное примечание 
  ...раздел 2.1... 
 

Мы можем добиться того же эффекта, сделав сами элементы заголовка анкеры:

 
Содержание
 
Введение

Небольшая предыстория

Личное примечание

  ...остальное содержание... 
  ...тело документа... 
 
Введение
 
  ...секция 1... 
 
Небольшая предыстория
 
  ...секция 2. .. 
 
Личное примечание
 
  ...раздел 2.1... 
 

12.1.2 Другая ссылка отношения

На сегодняшний день наиболее распространенным использованием ссылки является получение другого веб-сайта. ресурса, как показано в предыдущих примерах. Однако авторы могут вставлять ссылки в своих документах, которые выражают другие отношения между ресурсами чем просто «активировать эту ссылку, чтобы посетить соответствующий ресурс». Ссылки, которые выражать другие типы отношений имеют один или несколько типов ссылок, указанных в их привязке к источнику.

Роли ссылки, определенной A или LINK , указаны через rel и атрибуты версии .

Например, ссылки, определяемые элементом LINK , могут описывать позицию документа в серии документов. В следующем отрывке ссылки в документе под названием «Глава 5» указывают на предыдущую и следующую главы:

<ГОЛОВА>
  . ..другая информация о головке... 

<ССЫЛКА rel="prev" href="chapter4.html">
<ССЫЛКА rel="следующая" href="chapter6.html">

 

Тип первой ссылки — «предыдущая», а второй — «следующая». (два из нескольких распознаваемых типов ссылок). Ссылки, указанные ССЫЛКА , , а не отображаются вместе с документом. содержимое, хотя пользовательские агенты могут отображать его другими способами (например, как средства навигации).

Даже если они не используются для навигации, эти ссылки могут интерпретироваться в интересные способы. Например, пользовательский агент, который печатает серию HTML документы как единый документ могут использовать эту информацию о ссылках в качестве основы для формирование связного линейного документа. Ниже приведена дополнительная информация об использовании ссылки в интересах поисковых систем.

12.1.3 Указание якорей и ссылок

Хотя некоторые элементы и атрибуты HTML создают ссылки на другие ресурсов (например, элемент IMG , элемент элемент FORM и т. д.), в этой главе обсуждаются ссылки и якоря. созданный элементами LINK и A . Элемент LINK может появляться только в глава документа. Элемент A может появляться только в теле.

Когда Элемент атрибут href установлен, элемент определяет источник привязка для ссылки, которая может быть активирована пользователем для получения веб-ресурса. Исходная привязка — это расположение экземпляра A и целевой привязки. является веб-ресурсом.

Пользовательский агент может обрабатывать полученный ресурс несколькими способами: открытие нового HTML-документа в том же окне пользовательского агента, открытие нового HTML-документа документ в другом окне, запуская новую программу для обработки ресурса, и т.д. С Элемент имеет содержимое (текст, изображения и т. д.), пользовательские агенты могут отображать этот контент таким образом, чтобы указать на наличие ссылки (например, путем подчеркивание содержания).

Когда установлены атрибуты name или id элемента A , элемент определяет привязку, которая может быть местом назначения других ссылок.

Авторы могут установить атрибуты name и href одновременно в тот же Экземпляр .

Элемент LINK определяет связь между текущим документом и другой ресурс. Хотя LINK не имеет содержимого, определяемые им отношения могут быть обработаны некоторыми пользовательскими агентами.

12.1.4 Заголовки ссылок

Атрибут title может быть установлен как для A , так и для LINK на добавить информацию о характере ссылки. Эта информация может быть произнесена пользовательский агент, отображаемый в виде всплывающей подсказки, вызывает изменение изображения курсора и т. д.

Таким образом, мы можем дополнить предыдущий пример предоставление заголовка для каждой ссылки:

<ТЕЛО>
  . ..какой-то текст... 
Вы найдете гораздо больше в вторая глава.
вторая глава.
См. также этот карта
заколдованный лес.

 

12.1.5 Интернационализация и ссылки

Поскольку ссылки могут указывать на документы, закодированные с использованием разных кодировок символов, A и LINK элементы поддерживают атрибут charset . Этот атрибут позволяет авторам информировать пользовательские агенты о кодировании данных на другом конце ссылки.

Атрибут hreflang предоставляет агентам пользователя информация о языке ресурса в конце ссылки, как и Атрибут lang предоставляет информацию о языке содержимое элемента или значения атрибутов.

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

12.2

 A  - - (%inline;)* -(A) -- привязка -->
 кодировка  %кодировка; #ПРЕДПОЛАГАЕТСЯ -- символьная кодировка связанного ресурса --
    тип  %ContentType; #ПРЕДПОЛАГАЕТСЯ -- рекомендательный тип контента --
    имя  CDATA #ПРЕДПОЛАГАЕТСЯ -- именованный конец ссылки --
    href  %URI; #ПРЕДПОЛАГАЕТСЯ -- URI связанного ресурса --
    hreflang  %LanguageCode; #ПРЕДПОЛАГАЕТСЯ -- код языка --
    отн.  %LinkTypes; #ПРЕДПОЛАГАЕТСЯ -- типы ссылок вперед --
    ред.  %LinkTypes; #ПРЕДПОЛАГАЕТСЯ -- типы обратной ссылки --
    ключ доступа  %Символ; #ПРЕДПОЛАГАЕТСЯ -- ключевой символ специальных возможностей --
    форма  %форма; rect -- для использования с клиентскими картами изображений --
    координаты  %Координаты; #ПРЕДПОЛАГАЕТСЯ -- для использования с клиентскими картами изображений --
    tabindex  НОМЕР #ПРЕДПОЛАГАЕТСЯ -- позиция в порядке табуляции --
    onfocus  %Script; #ПРЕДПОЛАГАЕТСЯ -- элемент получил фокус --
    onblur  %Script; #ПРЕДПОЛАГАЕТСЯ -- элемент потерял фокус --
  >
 

Начальный тег: требуется , Конечный тег: требуется

Определения атрибутов

имя = cdata [CS]

Этот атрибут называет текущую привязку так, чтобы она могла быть местом назначения другой ссылки. Значение этого атрибута должно быть уникальным именем привязки. областью действия этого имени является текущий документ. Обратите внимание, что этот атрибут разделяет то же пространство имен, что и id атрибут.

href = uri [CT]

Этот атрибут указывает местоположение веб-ресурса, тем самым определяя связь между текущим элементом (исходным якорем) и целевым якорем определяется этим атрибутом.

hreflang = код языка [CI]

Этот атрибут указывает базовый язык ресурса, обозначенного href и может использоваться только при указании href .

тип = тип контента [CI]

Этот атрибут дает рекомендательную подсказку относительно типа контента доступны по целевому адресу ссылки. Это позволяет пользовательским агентам выбрать использование резервный механизм, а не извлекать содержимое, если им сообщают, что они получат контент в типе контента, который они не поддерживают.

Авторы, использующие этот атрибут, берут на себя ответственность за управление риском, это может стать несовместимым с контентом, доступным в целевой ссылке адрес.

Актуальный список зарегистрированных типов контента см. [МИМЕТИПЫ].

отн. = типов ссылок [CI]

Этот атрибут описывает связь между текущим документом и привязка, указанная атрибутом href . Значение этого атрибута равно разделенный пробелами список типов ссылок.

rev = типов ссылок [CI]

Этот атрибут используется для описания обратной ссылки от якоря, указанного атрибут href к текущему документу. значением этого атрибута является список типов ссылок, разделенных пробелами.

кодировка = кодировка [CI]

Этот атрибут указывает кодировку символов назначенного ресурса по ссылке. Пожалуйста, обратитесь к разделу о характере кодировки для более подробной информации.

Атрибуты, определенные в другом месте

• id , class (идентификаторы всего документа)
• язык (язык информация), дир (текст направление)
• заголовок (заголовок элемента)
• стиль (встроенный информация о стиле)
• формы и координаты (изображение карты)
• onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , , нажатие клавиши , onkeydown , onkeyup (внутренние события)
• цель (цель информация о кадре)
• tabindex (навигация с помощью вкладок)
• ключ доступа (ключи доступа)

Каждый Элемент определяет якорь

1. Содержимое элемента определяет позицию привязки.
2. Атрибут name называет якорь так, чтобы он мог быть местом назначения ноль или более ссылок (см. также анкоры с идентификатор ).
3. Атрибут href делает этот якорь исходным якорем ровно для одного ссылка на сайт.

Авторы также могут создать элемент A , не определяющий якорей, т. е. не указывает href , имя или идентификатор . Значения этих атрибутов могут быть установить позже через скрипты.

В следующем примере Элемент определяет ссылку. Исходный якорь текст «Веб-сайт W3C» и якорь назначения — «http://www.w3.org/»:

Для получения дополнительной информации о W3C обратитесь к
веб-сайт W3C.
 

Эта ссылка указывает на домашнюю страницу консорциума World Wide Web. Когда пользователь активирует эту ссылку в пользовательском агенте, пользовательский агент получит ресурс, в данном случае HTML-документ.

Пользовательские агенты обычно отображают ссылки таким образом, чтобы сделать их очевидной для пользователей (подчеркивание, перевернутое видео и т. д.). Точный рендеринг зависит от пользовательского агента. Рендеринг может варьироваться в зависимости от того, есть ли у пользователя уже побывали по ссылке или нет. Возможный визуальный рендеринг предыдущего ссылка может быть:

Дополнительные сведения о W3C см. на веб-сайте W3C.
                                                   ~~~~~~~~~~~~~
 

Чтобы явно указать агентам пользователя, какая кодировка символов целевая страница, установите кодировка атрибут:

Для получения дополнительной информации о W3C обратитесь к
Веб-сайт W3C
 

Предположим, мы определили привязку с именем "anchor-one" в файле "one.html".

  ...текст перед якорем... 
Это расположение первой привязки.
  .. .текст после якоря... 
 

Это создает привязку вокруг текста «Это расположение привязки один.». Обычно содержимое A не отображаются особым образом, когда A определяет только якорь.

Определив якорь, мы можем ссылаться на него с того же или другого документ. URI, обозначающие якоря, содержат символ «#», за которым следует имя якоря (фрагмент идентификатор). Вот несколько примеров таких URI:

• Абсолютный URI: http://www.mycompany.com/one.html#anchor-one
• Относительный URI: ./one.html#anchor-one или one.html#anchor-один
• Если ссылка определена в том же документе: #anchor-one

Таким образом, ссылка, определенная в файле "two.html" в том же каталоге, что и «one.html» будет ссылаться на якорь следующим образом:

.
  ...текст перед ссылкой... 
Для получения дополнительной информации см. якорь один.
  ...текст после ссылки... 
 

Элемент в следующем примере указывает ссылку (с href ) и одновременно создает именованный якорь (с именем ):

Я только что вернулся из отпуска! Вот
 somecompany.com/People/Ian/vacation/family.png">
фото моей семьи на озере..
 

Этот пример содержит ссылку на веб-ресурс другого типа (файл PNG изображение). Активация ссылки должна привести к извлечению ресурса изображения. из Интернета (и, возможно, отображается, если система настроена на выполнение так).

Примечание. Пользовательские агенты должны уметь находить якоря создан пустыми элементами A , но некоторые этого не делают. Например, какой-то пользователь агенты могут не найти «пустой якорь» в следующем фрагменте HTML:

...немного HTML...
Ссылка на пустой якорь
 

12.2.1 Синтаксис привязки имена

Имя привязки представляет собой значение либо имя или идентификатор атрибут при использовании в контексте якорей. Имена якорей должны соответствовать следующие правила:

• Уникальность: Имена якорей должны быть уникальный в пределах документа. Имена якорей, отличающиеся только регистром, могут не отображаться в том же документе.
• Сопоставление строк: сравнений между идентификаторами фрагментов и имена якорей должны быть выполнены путем точного (с учетом регистра) совпадения.

Таким образом, следующий пример корректен в отношении сопоставления строк и должны рассматриваться агентами пользователя как совпадения:

...
  ...дополнительный документ... 
...
 

НЕЗАКОННЫЙ ПРИМЕР:
Следующий пример недопустим с точки зрения уникальности, так как два имени такие же, за исключением регистра:

...
...
 

Хотя следующий отрывок является допустимым HTML, поведение пользовательского агента не определено; некоторые пользовательские агенты могут (ошибочно) считать это совпадением и другие не могут.

...
  ...дополнительный документ. .. 
...
 

Имена якорей должны быть ограничены ASCII персонажи. Пожалуйста, обратитесь к приложению для получения дополнительной информации о не-ASCII-символы в URI значения атрибутов.

12.2.2 Вложенные ссылки недопустимы

Ссылки и анкоры, определенные Элемент не должен быть вложенным; элемент A не должен содержать никаких других A элемента.

Поскольку DTD определяет LINK элемент должен быть пустым, LINK элементы также не могут быть вложенными.

12.2.3 Анкеры с

Атрибут id может использоваться для создания якоря в начальном теге любого элемент (включая элемент A ).

Этот пример иллюстрирует использование атрибута id для позиционирования привязки в элемент h3 . Якорь связан с через А элемент.

Подробнее об этом можно прочитать в разделе втором. 
  ... далее в документе 
 
Раздел второй
 
  ... далее в документе 
См. раздел второй выше.
Больше подробностей.
 

В следующем примере якорь назначения именуется с идентификатором . атрибут:

Я только что вернулся из отпуска! Вот
фото моей семьи на озере..
 

Атрибуты id и name имеют одно и то же пространство имен. Это означает, что они не могут оба определить якорь с тем же именем в том же документе. Это допустимо используйте оба атрибута, чтобы указать уникальный идентификатор элемента для следующих элементы: А , ПРИЛОЖЕНИЕ , ФОРМА , РАМА , IFRAME , IMG и MAP . Когда оба атрибута используются в одном элементе, их значения должны быть идентичный.

НЕЗАКОННЫЙ ПРИМЕР:
Следующий отрывок является недопустимым HTML, так как эти атрибуты объявляют одно и то же имя дважды в одном и том же документе.

...
...

 
 ...страниц и страниц... 
<А имя="a1">
 

В следующем примере показано, что id и имя должны быть одинаковыми, когда оба появляются в начальном теге элемента:

...
 

Из-за спецификации в HTML DTD имя атрибут может содержать ссылки на символы. Таким образом, значение Dürst является действительный значение атрибута name , как Dürst . идентификатор Атрибут, с другой стороны, не может содержать ссылки на символы.

Использовать id или имя ? Авторы должны учитывать следующее проблемы при принятии решения об использовании id или имя для имени якоря:

• Атрибут id может действовать не только как имя привязки (например, стиль селектор листов, идентификатор обработки и т. д.).
• Некоторые старые пользовательские агенты не поддерживают привязки, созданные с идентификатором атрибут.
• Атрибут name позволяет использовать более богатые имена привязок (с сущностями).

12.2.4 Недоступно и неидентифицируемые ресурсы

Ссылка на недоступный или неидентифицируемый ресурс является ошибкой. Хотя пользовательские агенты могут по-разному обрабатывать такую ​​ошибку, мы рекомендуем следующее поведение:

• Если пользовательский агент не может найти связанный ресурс, он должен предупредить пользователь.
• Если пользовательский агент не может определить тип связанного ресурса, он должен еще попробуй обработать. Это должно предупредить пользователя и может позволить пользователю вмешаться и определить тип документа.

12.3 Отношения документов:

 LINK  - O EMPTY -- независимая от носителя ссылка -->
 кодировка  %кодировка; #ПРЕДПОЛАГАЕТСЯ -- символьная кодировка связанного ресурса --
    href  %URI; #ПРЕДПОЛАГАЕТСЯ -- URI связанного ресурса --
    hreflang  %LanguageCode; #ПРЕДПОЛАГАЕТСЯ -- код языка --
    тип  %ContentType; #ПРЕДПОЛАГАЕТСЯ -- рекомендательный тип контента --
    отн.   %LinkTypes; #ПРЕДПОЛАГАЕТСЯ -- типы ссылок вперед --
    ред.  %LinkTypes; #ПРЕДПОЛАГАЕТСЯ -- типы обратной ссылки --
    медиа  %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- для рендеринга на этих носителях --
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Атрибуты, определенные в другом месте

• id , class (идентификаторы всего документа)
• язык (язык информация), дир (текст направление)
• заголовок (заголовок элемента)
• стиль (встроенный информация о стиле)
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
• ссылка , hreflang , тип , rel , rev (ссылки и анкеры)
• цель (цель информация о кадре)
• носитель (заголовок информация о стиле)
• кодировка (символ кодировки)

Этот элемент определяет ссылку. В отличие от A , он может появиться только в HEAD . раздел документа, хотя он может появляться любое количество раз. Хотя ССЫЛКА не имеет содержания, он передает информацию об отношениях, которая может быть представлена пользовательские агенты различными способами (например, панель инструментов с раскрывающимся меню ссылки).

В этом примере показано, как несколько определений LINK могут отображаться в HEAD раздел документа. Текущий документ - "Chapter2.html". отн. атрибут определяет отношение связанного документа с текущим документ. Значения «Index», «Next» и «Prev» объясняются в разделе по типам ссылок.

<ГОЛОВА>
  
  
  
  <ССЫЛКА rel="Предыдущая" href="Глава1.html">

  . ..остальная часть документа... 
 

12.3.1 Прямые и обратные ссылки

Атрибуты rel и rev играют взаимодополняющие роли — атрибуты rel атрибут указывает прямую ссылку, а атрибут rev указывает обратную ссылка на сайт.

Рассмотрим два документа A и B.

Документ А: 
 

Имеет то же значение, что и:

Документ Б: 
 

Оба атрибута могут быть указаны одновременно.

12.3.2 Ссылки и внешние таблицы стилей

Когда Элемент LINK связывает внешнюю таблицу стилей с документом, элемент Атрибут type определяет язык таблицы стилей и тип . Атрибут media указывает предполагаемый носитель или носитель рендеринга. Пользовательские агенты могут сэкономить время, извлекая из сети только те листы, которые относятся к текущему устройству.

Типы носителей далее обсуждалось в разделе о таблицах стилей.

12.3.3 Ссылки и поисковые системы

Авторы могут использовать элемент LINK для предоставления разнообразной информации поисковые системы, в том числе:

• Ссылки на альтернативные версии документа, написанные другим человеком язык.
• Ссылки на альтернативные версии документа, предназначенные для разных носителей, например, версия, специально подходящая для печати.
• Ссылки на стартовую страницу сборника документов.

В приведенных ниже примерах показано, как информация о языке, типах мультимедиа и типы ссылок могут быть объединены для улучшения обработки документов поисковыми системами.

В следующем примере мы используем атрибут hreflang , чтобы сообщить поиску Engines, где можно найти версии документа на голландском, португальском и арабском языках. Обратите внимание на использование атрибута charset для арабского руководства. Обратите также внимание на использование lang , чтобы указать, что значение заголовка Атрибут элемента LINK , обозначающий руководство на французском языке, указан на французском языке.

<ГОЛОВА>






 

В следующем примере мы сообщаем поисковым системам, где найти вариант руководства.

<ГОЛОВА>

 com/manual/postscript.ps">

 

В следующем примере мы сообщаем поисковым системам, где найти переднюю страница сборника документов.

<ГОЛОВА>



 

Дополнительная информация приведена в примечаниях в приложении о том, как помочь поисковым системам проиндексировать ваш веб-сайт. сайт.

12.4 Информация о пути:

 BASE  - O EMPTY -- URI базы документов -->
 href  %URI; #REQUIRED -- URI, который действует как базовый URI --
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

href = uri [CT]

Этот атрибут указывает абсолютный URI, который действует как базовый URI для разрешение относительных URI.

Атрибуты, определенные в другом месте

• цель (цель информация о кадре)

В HTML ссылки и ссылки на внешние изображения, апплеты, обработку форм программы, таблицы стилей и т. д. всегда указываются с помощью URI. Относительные URI разрешается в соответствии с базовым URI, который может поступать из разных источников. Элемент BASE позволяет авторам явно указывать базовый URI документа.

При наличии Элемент BASE должен появиться в HEAD раздел HTML-документа перед любым элементом, ссылающимся на внешний источник. Информация о пути, указанная элементом BASE , влияет только на URI в документ, в котором появляется элемент.

Например, учитывая следующую декларацию BASE и A декларация:

 <ГОЛОВА>
   
    aviary.com/products/intro.html">
 
 <ТЕЛО>
   
Вы видели наши клетки для птиц?
 

 

относительный URI "../cages/birds.gif" будет разрешаться в:

http://www.aviary.com/cages/birds.gif
 

12.4.1 Разрешение относительных URI

Пользовательские агенты должны вычислять базовый URI для разрешения относительных URI. согласно [RFC1808], раздел 3. Ниже описано, как [RFC1808] относится конкретно к HTML.

Пользовательские агенты должны вычислять базовый URI в соответствии со следующим приоритеты (от наивысшего приоритета к низшему):

1. Базовый URI задается Элемент BASE .
2. Базовый URI задается метаданными, обнаруженными во время протокола взаимодействие, например заголовок HTTP (см. [RFC2616]).
3. По умолчанию базовым URI является URI текущего документа. Не весь HTML документы имеют базовый URI (например, действительный HTML-документ может появиться в электронном письме и не может обозначаться URI). Такие HTML-документы считаются ошибочны, если они содержат относительные URI и полагаются на базовый URI по умолчанию.

Кроме того, 9Элементы 0433 OBJECT и APPLET определяют атрибуты, которые имеют приоритет над значением, установленным элементом BASE . Пожалуйста, проконсультируйтесь с определения этих элементов для получения дополнительной информации о проблемах URI, характерных для их.

Примечание. Для версий HTTP, определяющих заголовок Link, пользовательские агенты должны обрабатывать эти заголовки точно так же, как LINK элементы в документе. HTTP 1.1, как определено в [RFC2616], не включить поле заголовка Link (см. раздел 19.6.3).

Безопасность и защита | мое социальное обеспечение

Подтверждение личности

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

Готовы зарегистрироваться? Теперь вы можете создать новую учетную запись my Social Security через нашего партнера по учетным данным, Login.gov, или вы можете получить доступ к своей информации, используя свою учетную запись ID.me, если она у вас есть.

• Login.gov — это ваша единственная государственная учетная запись для простого, безопасного и частного доступа к участвующим правительственным учреждениям США.
• ID.me — это поставщик услуг единого входа, который соответствует требованиям правительства США к онлайн-подтверждению личности и аутентификации.

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

Создать учетную запись Войти

Щелкните здесь для получения дополнительной информации о том, как войти в систему или создать учетную запись.

Защита вашей учетной записи

Интернет-мошенники используют хитрые «фишинговые» схемы, чтобы ежегодно обманывать миллионы людей. Фишинг — это практика использования методов социальной инженерии по электронной почте, чтобы заставить получателя раскрыть личную информацию, щелкнуть вредоносную ссылку или открыть вредоносное вложение.

Как обнаружить фишинговое письмо, выдаваемое за социальное обеспечение?

• Большинство электронных писем от Social Security приходят с адреса электронной почты «.gov». Если адрес электронной почты не заканчивается на «.gov», соблюдайте осторожность, прежде чем открывать вложения или нажимать изображения или ссылки в электронном письме. В настоящее время Social Security отправляет электронные письма с адресов [email protected], [email protected], [email protected], [email protected] и echosign.com
.
• В некоторых случаях мы используем маркетинговые фирмы для повышения осведомленности об онлайн-услугах Social Security, включая создание моей учетной записи Social Security. Мы разрешаем этим фирмам отправлять электронную почту напрямую физическим лицам. Любые ссылки, которые вы найдете в этих электронных письмах, всегда должны указывать на веб-адрес «.gov/».
• Ссылки, логотипы или изображения в теле официального электронного письма службы социального обеспечения всегда будут направлять вас на официальный веб-сайт службы социального обеспечения. Вместо того, чтобы полагаться на то, как выглядит ссылка, выполните следующие действия, чтобы подтвердить подлинность ссылки:
• Чтобы проверить веб-адрес ссылки или изображения, наведите на них указатель мыши, пока не появится текстовое поле с веб-адресом. Это фактический адрес, на который вас перенаправят, и он всегда должен включать «.gov/». Косая черта всегда должна следовать за доменом «.gov».
Пример
• — https://www.ssa.gov/myaccount/
• Ссылки на официальный сайт социального обеспечения всегда начинаются с https://www.ssa.gov/ или https://secure.ssa.gov/.
• Ниже приведены примеры мошеннических веб-сайтов, якобы направляющих вас в Службу социального обеспечения. Обратите внимание на расположение косой черты.
• https://www.socialsecurity.gov.gmx.de/
• http://www.socialsecurity.gov.bx.co.rx/setup

Что делать, если я получил фишинговое электронное письмо, якобы отправленное Службой социального обеспечения?

• Если вы не уверены, что электронное письмо, которое вы получили, поступило от Службы социального обеспечения или одной из наших маркетинговых фирм, НЕ НЕ отвечайте на электронное письмо и не нажимайте на любые ссылки, содержащиеся в сообщении электронной почты.
• Сообщите об инциденте, переслав подозрительное электронное письмо в Группу готовности к компьютерным чрезвычайным ситуациям США (US-CERT) по адресу [email protected]. (http://www.us-nocert.gov/nav/report_phishing.html).

Какие еще советы можно использовать для обнаружения фишинговых сообщений?

• Проверьте отправителя. Будьте осторожны при получении электронной почты от отправителя, которого вы не знаете или о котором давно не слышали. Наведите указатель мыши на адрес электронной почты «От», чтобы убедиться, что он совпадает с отображаемым адресом электронной почты или именем отправителя.
• Ищите неправильный выбор формулировки, формулировки или правописания.
• Если электронное письмо содержит название компании, номер телефона или ссылку на веб-сайт, проверьте легитимность этих элементов, выполнив поиск официального номера или веб-сайта в поисковой системе.
• Не отвечайте на электронные письма с запросом личной информации. Компании с хорошей репутацией и государственные учреждения не будут запрашивать у вас личную информацию по электронной почте.

Есть ли другие ресурсы, которые я могу использовать, чтобы узнать больше о фишинге?

Во избежание проблем с безопасностью обновляйте веб-браузер. Для получения дополнительной информации о «фишинге» перейдите на сайт OnGuard Online.

Может ли электронная почта HTML использовать современный CSS? — Smashing Magazine

• 35 минут чтения
• Smashing Podcast
• Поделиться в Twitter, LinkedIn

Об авторе

Дрю — штатный инженер, специализирующийся на фронтенде в Snyk, а также являющийся соучредителем Notist и небольшая система управления контентом Perch. Перед этим, … Больше о Дрю ↬

В этом выпуске The Smashing Podcast мы говорим об электронной почте в формате HTML. Должны ли мы по-прежнему проектировать, как для IE5? Виталий разговаривает с экспертом Реми Пармантье, чтобы выяснить это.

Показать заметки

• Rémi Parmentier в Твиттере
• Могу ли я написать по электронной почте?

Еженедельное обновление

• Встречайте «Контрольные списки шаблонов проектирования интеллектуальных интерфейсов» автор: Виталий Фридман
• Разбираемся с WAI-ARIA: полное руководство автор: Кейт Кальцевич
• JavaScript API, о которых вы не знаете
• Доступность во времена безголовых автор: Жозефина Шефер
• Переосмысление звездных оценок для читателей автор: Мэтт Атанасиу0480

  Виталий Фридман: он разработчик электронной почты и веб-сайтов, проживающий на севере Франции, недалеко от Лилля, и известный в Интернете как HTeuMeuLeu. Он работает в собственном небольшом агентстве веб-разработки Tilt Studio с 2008 года. Он также проводит семинары, выступает с докладами и пишет статьи в своем блоге, посвященные электронным письмам в формате HTML. Теперь Реми также любит коллекционировать консоли Game Boy и слушать Sufjan Stevens. Мои Smashing друзья, пожалуйста, поприветствуйте Реми Пармантье. Здравствуйте, Реми. Как у тебя сегодня дела?

  Реми Пармантье: Я в ударе.

  Виталий: О, как приятно это слышать, Реми. Я не знаю, когда мы узнали, что мы виделись, может быть, я не знаю, 27 лет назад?

  Реми: А, да, похоже на то. Да, я думаю, что мы встретились лично в первый и последний раз на конференции Smashing во Фрайберге в 2019 году, я думаю.

  Виталий: Думаю да. Кажется, это было очень, очень давно.

  Реми: Да, это даже не это десятилетие, так что.

  Виталий: Да, нет. Итак, Реми, это будет здесь, может быть, вопросы из зала уже идут. Так что, если это было 27 лет назад, было ли тогда то же самое, когда вы писали электронные письма TL, как сегодня? Или что-то изменилось с тех пор?

  Реми: Ты уже дразнишь меня. Нет, я бы сказал, что все как-то изменилось. Есть различия, такие как мобильные электронные письма, мы делаем адаптивные электронные письма в настоящее время, чего не было 27 лет назад. Так что да, таких отличий очень много.

  Виталий: Ага. Так что это всегда интересно для меня, потому что постоянно шутят о электронных письмах в формате HTML и о людях, которые должны писать электронные письма в формате HTML, и о людях, которых заставляют делать электронные письма. И вы любите делать электронные письма в формате HTML.

  Реми: Ага.

  Виталий: Ты должен объясниться, Реми.

  Реми: Да, я не знаю, как именно это получилось, но у меня не было бы того отвращения, которое в наши дни испытывает большинство веб-разработчиков, когда их просят закодировать электронное письмо в формате HTML.

  Реми: И я думаю, что одной из причин может быть то, что я стар, поэтому, когда я начал свою первую работу в веб-агентстве, это было где-то в 2006 году. веб-страницы были закодированы. Таким образом, мы используем таблицы для макетов веб-страниц, а также для электронной почты в формате HTML. Так что тогда не так уж все и отличалось. И поэтому со временем мы увидели, что сеть превратилась во что-то другое. Сначала в качестве семантической сети с растущим внедрением CSS и растущим использованием CSS для макетов. А потом у нас появился адаптивный веб. И в настоящее время у нас есть всевозможные веб-приложения и тому подобное. И да, это правда, что электронная почта не уловила все эти шаги, по крайней мере, не с той же легкостью и в те же сроки, что и Интернет.

  Реми: Но я чувствую, что время от времени это догоняет. И мы также используем хорошие и современные вещи в электронных письмах в формате HTML. Так что да, мне очень нравятся электронные письма в формате HTML. И я думаю, что одна часть этого заключается в том, что всякий раз, когда я натыкаюсь на действительно странную ошибку или поведение или что-то, что действительно сводит с ума обычного человека, мне нравится просто копаться и пытаться разобраться во всем, попытаться понять, почему это происходит. Кстати, почему все так? И поэтому я думаю, что в настоящее время это действительно интересная ниша HTML-разработки.

  Виталий: Но это, наверное, держит тебя… Я не знаю, это держит вас в напряжении и не дает вам спать по ночам, думая обо всех этих невероятных, замечательных ошибках, происходящих, я не знаю, в Microsoft Outlook и, не дай Бог, в Lotus Notes. Вы все еще тестируете Lotus Notes?

  Реми: Нет, нет, нет. Я не проверял это уже несколько лет, так что.

  Виталий: Хорошо. Это делает меня немного счастливее на данный момент. Но каждый раз, когда я думаю об электронных письмах в формате HTML, я вспоминаю ваш замечательный доклад, в котором вы говорите, что на самом деле мы должны думать о разработке электронной почты как о немного другом способе, немного другом мышлении, которое требуется, чтобы на самом деле все было правильно. И я помню, как вы говорили о мышлении в Email Geek, которое, я думаю, действительно принимает несколько иной оборот, или взгляд на то, что вообще означает проектирование и разработка электронных писем. Так что, если кто-то очень, скажем так, не знаком с этой территорией, если вам нужно объяснить, чем создание и разработка электронных писем в формате HTML отличается от обычного веб-сайта… Я имею в виду, трудно сказать, что это обычный… С веб-сайтов и приложений. Обычный всегда имеет небольшой подтон. Чем они на самом деле отличаются? И какие важные навыки абсолютно необходимы даже для того, чтобы иметь смысл в создании и дизайне электронной почты в формате HTML?

  Реми: Да, я думаю, что разница может сводиться к двум вещам. Первым может быть ландшафт почтового клиента. Таким образом, у нас есть множество почтовых клиентов, существующих и используемых людьми по всему миру, в то время как в браузерах в настоящее время у нас, к сожалению, есть только один браузер: Chrome и Chromium, используемые Edge, и WebKit, используемые Safari, что очень аналогично, а также. И, к сожалению, сейчас в мире браузеров не так много разнообразия. И на самом деле это хорошо, что мне нравится в пространстве электронной почты, так это то, что у нас есть много разнообразия, тонны почтовых клиентов. И, конечно же, плохая часть этого заключается в том, что каждый клиент имеет свои собственные ошибки и причуды, а также странное поведение и функции, которых вы не ожидаете и которые могут вас удивить. Но я думаю, что это действительно одно и то же — иметь такую ​​среду с таким количеством разных почтовых клиентов.

  Реми: И вторая вещь, которая действительно сильно отличается, я думаю, это люди, это пользователи. А в Интернете, даже если вы не знаете заранее, кто будет посещать ваши сайты, вы можете узнать это позже. Если вы используете какую-либо аналитику или просто смотрите статистику своего сервера, вы будете знать, сколько страниц было просмотрено, сколько людей зашло на ваш сайт и тому подобное. В мире электронной почты очень сложно иметь такую ​​статистику, потому что мы не можем использовать для этого JavaScript и мы не можем использовать статистику сервера, потому что электронные письма никогда не находятся на нашем собственном сервере. Они находятся на сервере службы электронной почты, поэтому нам нужно полагаться на невидимые пиксели отслеживания. Но они не очень надежны, потому что не все отображают изображения в электронных письмах, а иногда у вас есть проксирование изображений, как в Gmail или Apple Mail, и поэтому вы получаете статистику, которая очень предвзята и, я думаю, немного неверна, потому что вы пропускаете много информации. Население.

  Реми: Значит, вы не знаете, кто открывает ваши электронные письма, как и когда. И поэтому вы не можете разработать и закодировать электронное письмо, ожидая, что «О, хорошо. Я знаю, что моя пользовательская база на 90% состоит из Apple Mail, поэтому мне не нужно заботиться об Outlook». Вы не можете этого сделать. Так что вам нужно иметь более широкий взгляд и быть очень скромным и понимать, что вы не сможете кодить для всех, но вам нужно делать это настолько хорошо, насколько вы можете, приблизиться к этому. Потому что вы действительно не знаете, кто будет открывать ваши электронные письма.

  Виталий: Но, несмотря на все это, несмотря на всю эту непредсказуемость, и я помню, как вы упоминали в своем сеансе в … Кроме того, одна вещь, которая на самом деле происходит довольно часто, и чего у нас просто нет на обычных веб-страницах или в приложениях, заключается в том, что почтовые клиенты также меняют способ работы электронной почты в формате HTML. Они добавляют ссылки, меняют ссылки, запутывают вещи, меняют разметку из соображений безопасности и конфиденциальности. И все эти вещи очень часто выходят из-под контроля. И не говоря уже о всех различных причудах, которые есть во всех разных почтовых клиентах.

  Виталий: Но, несмотря на все это, я время от времени очень удивляюсь, когда вижу огромный, я бы даже сказал, экстраординарный уровень творчества, когда дело доходит до того, во что люди превращают электронные письма в формате HTML. Я не знаю, от корзины покупок в электронном письме до игр и всего остального.

  Виталий: Какие самые впечатляющие вещи вы видели в электронной почте в формате HTML?

  Реми: Я думаю, это должно быть электронное письмо, отправленное несколько лет назад. Это было электронное письмо под названием «Запрос Супермена», и на самом деле это была мини-игра. Я думаю, это называется приключением Night Beat, и это игра, в которой вы выбираете свой собственный путь, где вы — маленький персонаж, который путешествует по стране столов и TD, и вам нужно найти свой путь к лучшим письмам. И это действительно такое умное использование всех возможностей CSS с проверенным вводом, переключателями и тому подобными вещами. Это действительно взорвало мой разум в то время, и это все еще застряло в моей памяти. Потому что это не только очень умно с самого начала, но и, я думаю, потребовалось огромное количество времени и терпения, чтобы сделать что-то подобное. Да, это было действительно впечатляюще.

  Виталий: Да, я думаю, ты тоже упоминал об этом в какой-то момент. Это выглядело совершенно невероятно, просто иметь возможность сделать это по электронной почте. Это просто что-то неконтролируемое. Лично для меня это было, я думаю, когда Марк Роббинс, кажется, однажды выступал с презентацией. Он работает в одной из почтовых компаний.

  Реми: Да, сейчас он работает в Salesforce.

  Виталий: Сейчас Salesforce. Хорошо. И я помню, как он говорил об электронной почте в формате HTML, и все это казалось очень естественным. А затем, в конце сеанса, он показал, что на самом деле это было в электронной почте в формате HTML, где была вся презентация, слайды, выделение и все такое. Это было очень, очень впечатляюще.

  Виталий: Одна вещь, которая действительно продолжает меня впечатлять, я думаю, в этих вещах, это то, что, кажется, есть различия даже в пределах одной и той же платформы. Итак, если я посмотрю на Outlook и outlook.com, если я посмотрю на Gmail на разных устройствах и на gmail.com, если я посмотрю, я посмотрю на веб-почту Yahoo и приложения Yahoo, мне покажется, что даже несмотря на то, что у них один и тот же поставщик, в основном, они действуют по-разному.

  Виталий: Может, прольете немного света? Часто ли они сильно отличаются друг от друга, или что мы, как разработчики, должны помнить, когда, скажем, имеем дело с Gmail? Потому что существует 50 000 версий Gmail или их всего несколько?

  Реми: Может быть, их не так много. Но да, есть несколько различий и оценок в том, что мы можем назвать семейством почтовых клиентов, как вы сказали, таких как Gmail или Outlook. И не всегда понятно, почему так, но, пожалуй, одно из самых раздражающих на данный момент — в Gmail. Например, вы получите разный уровень поддержки CSS независимо от того, используете ли вы настольную веб-почту, которая обычно имеет наилучшую поддержку CSS среди клиентов Gmail, по сравнению с мобильными приложениями. И даже если вы используете мобильные приложения, вы получите другой уровень поддержки CSS, независимо от того, используете ли вы адрес Gmail или сторонний адрес электронной почты, например, если вы используете свою электронную почту Outlook.com. адрес в приложении Gmail на Android или iOS.

  Реми: В таком случае вы получите, пожалуй, наихудшую из возможных поддержку CSS. Потому что Gmail, я думаю, из соображений безопасности лишает многих стилей и многого другого. Он не поддерживает теги стиля, не поддерживает медиа-запросы. Таким образом, вы получаете действительно голый и действительно необработанный HTML с несколькими стилями, как раз то, что вам нужно, чтобы получить свои цвета и несколько подобных вещей. Но это действительно минималистичный подход, который вам нужен, чтобы ваша электронная почта выглядела хорошо в таких обстоятельствах. Ага.

  Виталий: Ага. Так что это всегда такая история, и вы, вероятно, можете услышать очень разочарованные голоса из темных уголков Интернета, говорящие: «Что случилось с Outlook?»

  Виталий: Мы высмеивали Outlook, я не знаю, сколько лет, и я не знаю, когда это было в 2012 или 11 году или, может быть, даже раньше, когда произошел большой переход использовать механизм рендеринга Microsoft Word, как я слышал. Так и осталось, ну с тех пор, если не ошибаюсь.

  Реми: Да, именно так.

  Виталий: Итак, Реми, что нам с этим делать? Есть ли какая-нибудь, я не знаю, какая-либо помощь в поле зрения. Неужели нам навсегда придется иметь дело с движком рендеринга Word?

  Реми: Это действительно очень горячая тема, потому что в Microsoft что-то происходит. Возможно, они слышали все жалобы за эти годы, и похоже, что они что-то делают. Итак, как вы упомянули, в 2007 году Microsoft решила перенести Outlook в Windows с механизма рендеринга Internet Explorer на механизм рендеринга Word.

  Реми: И это было настоящим проклятием для всех разработчиков электронной почты, потому что Word действительно ужасно рендерил HTML и CSS. Он не только поддерживает очень ограниченные функции CSS и HTML, но часто делает это действительно неправильно. Таким образом, он неправильно вычисляет вес изображений в CSS или не… Происходит много вещей, которые действительно пугают веб-разработчика. Итак, что изменилось на данный момент, так это то, что всего несколько месяцев назад, я думаю, это было в прошлом месяце или всего месяц назад, Microsoft выпустила первую общедоступную бета-версию Outlook для Windows, использующую механизм рендеринга Edge.

  Реми: Итак, они делают совершенно новый Outlook для Windows, и это просто веб-приложение, встроенное в настольное приложение. Так что теперь это будет означать устранение почти всех проблем, которые изначально создал Outlook. Так что пока лучше, но я искренне верю, что Microsoft действительно стремится донести это до своих конечных пользователей и посмотреть, как дела пойдут дальше. И если они развернут это как реальное обновление и замену реальных версий Outlook, работающих в Word, это будет действительно большое изменение, потому что это означает, что нам больше не нужно использовать таблицы для макетов. Потому что единственная причина, по которой мы используем таблицы в электронных письмах в формате HTML, связана с Outlook для Windows, потому что Word на самом деле не понимает ничего, кроме таблиц для макетов. Итак, сейчас мы действительно можем сказать, что Microsoft собирается выпустить все это обновление и что все пользователи перейдут на него. И да, это действительно то, что нам нужно сделать.

  Виталий: Ну, я слышу много восторга и надежды и не знаю, я бы сказал восторга по этому поводу. Это кажется очень интересным ходом, на который нам, вероятно, следует обратить внимание, так что это аккуратно.

  Виталий: Но учитывая сценарий тогда, так со столами или без, как вы думаете, что тогда будет… Может быть, оглядываясь назад, взгляните на свою работу конкретно, как бы вы создавали электронные письма в формате HTML? Итак, существует множество решений, очевидно, существует множество шаблонов, очень разных типов шаблонов, есть также MGML и так далее, и тому подобное.

  Виталий: Мне интересно, как вы относитесь к тому, что для этого нужно, так что же значит создавать электронные письма в формате HTML сегодня? Это все еще круто, я не знаю, кодировать электронные письма в формате HTML с нуля или делать другие конкретные шаблоны, которые нормализуют работу почтовых клиентов? Что вы думаете об этом?

  Реми: Так что я определенно в лагере с нуля прямо здесь. Но я также и в сети. Мне нравится делать что-то с нуля.

  Реми: Я думаю, что способ увидеть это в том, что он не так уж отличается от Интернета. Если бы вам нужно было кодировать веб-сайт, вы бы использовали что-то вроде Bootstrap или, может быть, начали бы с темы WordPress по умолчанию и построили свой веб-сайт на ее основе? Или вы предпочитаете создавать что-то с нуля? Так что да, это действительно способ увидеть вещи. И оба подхода могут быть хороши. Это действительно зависит от времени, которое у вас есть, знаний, которые у вас есть, а также воли и терпения, которые у вас есть.

  Реми: Так что да, я действительно, обычно сам, предпочитаю вырезать все с нуля. Но для любых новичков, если для них хорошо начать с уже сделанного шаблона, который они нашли в своем ESP, тогда сделайте это и, возможно, начните учиться оттуда и посмотрите, как вы можете улучшить вещи оттуда, и посмотрите, с какими проблемами вы столкнетесь. шаблоны по умолчанию и посмотрите, как вы можете улучшить ситуацию и создать что-то лучшее на их основе. Тоже хороший подход.

  Виталий: Верно. А в вашем случае, с чего бы вы начали? Начинаются с… Я имею в виду, очевидно, я думаю, я предполагаю. Я не знаю, должен ли я предполагать это или нет.

  Виталий: Будете ли вы начинать с таблиц HTML или как вы думаете? Затем вы создаете сначала мобильные устройства, а затем настольные компьютеры, или как это работает для вас?

  Реми: Да, так что в течение нескольких лет я думаю, что начало, которое я подхожу к индустрии разработки электронной почты и сообществу, было больше связано с тем, чтобы делать вещи плавными или гибридными, как мы их идем. Это означает, что мы собираемся сначала создать макеты, которые могут подстраиваться под любые размеры экрана с помощью наших медиа-запросов. Таким образом, просто используя div, например, div по умолчанию реагирует. Если вы не установите какой-либо фиксированный вес, он будет подстраиваться под размер вашего окна. И затем оттуда вы можете использовать медиа-запросы, независимо от того, ориентированы ли они на мобильные устройства или настольные компьютеры, чтобы улучшить ситуацию. Так что это действительно то, что мы называем прогрессивными улучшениями и изящной деградацией. Так что весь этот образ мышления, я думаю, действительно важен в мире электронной почты.

  Реми: Так что да, подход к таблицам и, по крайней мере, мой подход заключался в том, чтобы помещать таблицы в условные комментарии для Outlook, потому что на самом деле они нужны только Outlook. А затем для других клиентов используйте div и обычную семантику HTML, такую ​​как теги h2, h3, абзацы и т. д., чтобы создавать свои элементы и размещать их. И я программировал таким образом, я не знаю, как долго, но уже довольно долго, и это все еще работает хорошо. Так что я думаю, что это действительно ценный подход.

  Виталий: О, интересно. Это означает, что в основном… Правильно предположить, что тогда у вас будет одна разметка специально для Outlook, а остальные получат старый добрый div или даже потенциальную статью раздела. Это даже жизнеспособно там?

  Реми: Что касается некоторых семантик, таких как теги статей или редакторов и фотографий, это обычно неуместно, потому что ваша электронная почта может быть включена в более сложное приложение, такое как Gmail. А Gmail — это веб-почта и сам HTML. Поэтому, когда Gmail вставляет ваш HTML-бюллетень в свой интерфейс, вы получаете HTML-код Gmail вокруг вашего собственного HTML-кода. Тогда семантика может не иметь смысла. И вдобавок ко всему, Gmail специально не поддерживает эти теги, поэтому вам нужно найти правильный запасной вариант на годы.

  Реми: Но что касается Outlook, идея состоит не столько в том, чтобы создать отдельный изолированный код для всей электронной почты, сколько в том, чтобы добавить небольшие фрагменты кода только для Outlook, которые будут говорить: «Хорошо, Я собираюсь открыть таблицу для Outlook прямо сейчас». И тогда у меня появятся остальные мои проблемы как для Outlook, так и для других почтовых клиентов. А затем в конце своего электронного письма или блога я просто добавлю еще один блок, который у меня есть только для Outlook, который будет говорить: «Хорошо, я закрываю таблицу, которую я открыл». И это все для таблиц и только для Outlook.

  Виталий: Хорошо. Действительно ли все еще хорошая идея встраивать стили в электронную почту?

  Реми: Да. Да, это потому, что хотя многие клиенты поддерживают теги стилей и даже Outlook для Windows, на самом деле это часто удивляет людей. Обычно это хорошая идея, потому что некоторые клиенты не поддерживают тег стиля. Итак, ранее я упомянул приложения Gmail на мобильных устройствах, когда вы не используете учетные записи Gmail. Так что это то, что мы, специалисты по электронной почте, часто называем GANGA для приложений Gmail с учетными записями, отличными от Gmail.

  Виталий: Вот это аббревиатура.

  Реми: Да, мне нравится эта аббревиатура. Итак, в GANGA вы не получаете поддержку тегов стиля, поэтому вам нужно встроить туда свой стиль. Так что это действительно хороший способ убедиться, что в этих очень ограничительных условиях, по крайней мере, ваше электронное письмо выглядит правильно для текста, размеров шрифта и тому подобных вещей.

  Реми: Но вы можете иметь некоторые из ваших стилей в отдельных текстах стилей. Собственно, это то, что мы можем сделать с ответными электронными письмами. Когда мы используем медиа-запросы, мы не можем встраивать медиа-запросы, поэтому нам приходится использовать теги стиля. Поэтому мы делаем и то, и другое.

  Реми: Что касается встроенных стилей, это также важно, потому что всякий раз, когда вы собираетесь отвечать на электронное письмо или пересылать электронное письмо, что очень уникально для электронных писем, некоторые из них действительно не то, что происходит на веб-сайтах… Почтовые клиенты, а это в значительной степени относится ко всем почтовым клиентам, действительно удалят все теги стиля вашего кода, когда вы сделаете это. И поэтому, если у вас нет встроенного стиля, внезапно ваши электронные письма будут выглядеть как что-то совершенно сломанное. Так что всегда безопаснее иметь хотя бы минимальное количество встроенных сообщений, чтобы ваши электронные письма выглядели хорошо, когда это происходит.

  Виталий: Верно. Кстати, как насчет фазы шрифта? Поэтому, когда мы говорим о встраивании шрифтов, очевидно, что эти шрифты должны где-то жить. Вы не собираетесь прикреплять их к электронному письму. А потом иногда я вижу, что появляются ошибки кода, когда вы пытаетесь получить шрифты из одного места, а затем он не знает, откуда он будет загружен. Таким образом, вы не можете просто, скажем, внести в белый список пару доменов и на этом закончить. Так что это должно быть просто общедоступным для всех.

  Реми: Ага.

  Виталий: Верно. Каков общий способ справиться с этим?

  Реми: Итак, да. Но это очень специфическая проблема. И это случалось со мной несколько раз, особенно при работе с клиентами, чьи телефоны размещены на их собственном сервере, но они используют правила CORS для безопасности, поэтому шрифт не может быть вызван из определенной веб-почты. Я думаю, в конце концов, он как бы разваливается, потому что тогда он работает нормально, потому что ограничения CORS, подобные этому, не применяются к приложениям электронной почты.

  Реми: Например, Apple Mail поддерживает начертание шрифта и не подчиняется правилам CORS. Таким образом, даже если у вас есть ограничения CORS, ваши шрифты все равно будут доступны в Apple Mail. Что касается начертания шрифта, Apple Mail действительно является одним из немногих, кто поддерживает его, потому что веб-почты почти нет, поэтому ни Gmail, ни Outlook.com, который поддерживает такой шрифт, ни Yahoo. И есть только несколько международных или местных почтовых клиентов, которые в этом случае поддерживают начертание шрифта.

  Реми: Так что да, всякий раз, когда вы используете шрифт, вы должны понимать, что немногие люди могут увидеть ваши шрифты, и потому что они могут быть удалены из почтовых клиентов, таких как Gmail или outlook.com. И у вас могут быть такие ошибки CORS. Таким образом, это всегда вопрос прогрессивного улучшения и плавного снижения производительности… Мне нравится использовать шрифт в электронных письмах, когда он является частью дизайна, и это отличное улучшение, но вы всегда должны понимать, что это не сработает для 100% ваших подписчиков. Так что просто всегда нужно думать о том, что произойдет, если это не сработает.

  Виталий: Верно. Что вы думаете о таких вещах, как MGML? Используете ли вы что-то подобное, что-то вроде языка шаблонов для написания кодов, я бы сказал, более быстрых и все еще далеких электронных писем в формате HTML? Или может использовать что-то другое? Что вы думаете об этом?

  Реми: Да, MGML очень популярен, и на него всегда интересно посмотреть. И что самое интересное, Mailjet наняла меня в качестве консультанта, когда мы запускали MGML в 2015 или 16 году, кажется. Поэтому я работал с ними, чтобы убедиться, что вывод HTML с помощью MDML соответствует нашим отраслевым стандартам и хорошо работает во всех средах, включая Outlook. И поэтому очень забавно видеть, что и по сей день он довольно хорошо держится, и хотя я знаю, что были обновления для MGML и тому подобного. Но базовый способ ведения дел, который в первую очередь является мобильным, хорошо себя зарекомендовал на протяжении всех этих лет.

  Реми: Итак, я сам не использую MGML, но использую некоторые из наших инструментов. И в этом году, в частности, я очень углубился в Parcel, онлайн-редактор кода, предназначенный для электронных писем в формате HTML. И поэтому в нем много забавных вещей, которые действительно помогут вам кодировать электронные письма, может быть, быстрее. Есть компоненты, есть встраивание стилей, и вы можете отправлять тесты на свой почтовый ящик из редактора. Так что это действительно здорово.

  Реми: И я также ходил с Mazo, который также является платформой узлов для создания электронных писем HMTL. Я вижу это как JQL или Ivanti, которые не столько навязывают вам способ написания кода, сколько вы можете принести свой собственный код, и это просто помогает вам легче и быстрее выводить вещи и выполнять всевозможные небольшие подпрограммы, такие как встраивание стилей или что-то в этом роде.

  Реми: Так что да, я думаю, что за последние несколько лет мы действительно начинаем видеть подобные инструменты, которые действительно завоевывают популярность среди разработчиков электронной почты. Так что вы можете… Ага. Да, я думаю, что это хороший признак зрелости среди...

  Виталий: Верно, и пока они говорят об отправке электронных писем самому себе из Parcel, что, на мой взгляд, на самом деле довольно круто, какова будет ваша стратегия для тестирования и отлаживать электронные письма? То есть вы буквально отправляете его себе по электронной почте, а затем проверяете на своем телефоне, скажем, все ли в порядке, а затем возвращаетесь в редактор, исправляете, а затем снова отправляете? Или есть какой-то другой способ или подход для этого? Что вы думаете?

  Реми: Да, обычно это мой первый подход, я просто тестирую и отправляю самому себе. И под отправкой самому себе я подразумеваю отправку на десятки и десятки адресов электронной почты, которые я создал почти везде, чтобы я мог видеть, как код электронной почты ведет себя в разных почтовых клиентах.

  Виталий: Какое забавное место для всех этих адресов электронной почты. Наверное, тонны различных тестов, спама и всего остального собираются в одном забавном месте.

  Реми: Ага. Было бы странно, если бы эти почтовые ящики когда-нибудь просочились из-за какой-то утечки данных. Люди будут задаваться вопросом: «Что именно делает этот почтовый ящик? Только за последний час было отправлено 20 писем по этому поводу. Я не уверен, почему».

  Реми: Но кроме того, у нас есть возможность делать скриншоты электронной почты. Так что это похоже на стек браузера для электронной почты. Таким образом, вы просто копируете свой HTML-код электронной почты, просто отправляете свое HTML-письмо на адрес, а затем вы получаете снимки экрана во многих, многих различных почтовых клиентах. Таким образом, вы получите быстрый предварительный просмотр того, как выглядит ваша электронная почта в Apple Mail, на iOS, в Gmail, в Outlook, в Windows, и все это всего за несколько кликов. И это действительно хороший способ убедиться, что ваш код хорошо работает во всех этих различных средах.

  Виталий: И, конечно же, есть CanIEmail.com, о котором вы замечательно анонсировали на SmashingConf Freiburg. Как это было два года назад?

  Реми: Да, это было во Фрайбурге в 2019 году. Так что уже почти три года.

  Виталий: Ага. Я имею в виду, может быть, вы также можете немного рассказать об этом и, возможно, о любых новых функциях, которые появятся, и о том, что это такое. Но лично для меня это просто отличный ресурс, чтобы просто узнать, насколько хорошо поддерживается конкретная функция. Подумайте об этом CanIUse.com, только для электронной почты?

  Реми: Это действительно была идея. И я думаю, что часть этого чувства, что сообщество электронной почты взрослеет и растет, заключается в том, что у нас есть такие места, где мы не только можем более публично узнать, что делают почтовые клиенты, что они поддерживают и тому подобное, но мы также может способствовать этому. И это было действительно, я думаю, недостающей частью. Потому что до этого у нас было несколько веб-сайтов, которые давали вам поддержку нескольких свойств CSS в нескольких почтовых клиентах, но большую часть времени это была просто часть статей в блогах, которые были действительно устаревшими, или на веб-сайте, который вы не могли " т действительно взаимодействовать с.

  Реми: Итак, идея CanIEmail заключалась в том, чтобы сделать это доступным и открытым исходным кодом, чтобы каждый мог внести в него свой вклад. И если вы видите, что почтовый клиент что-то не поддерживает, то вы можете сообщить об этом на веб-сайте, и все от этого выиграют, от них. Так что это действительно отличная база знаний, которой может воспользоваться каждый.

  Виталий: Ага. Да, конечно. Ну, я должен задать вопрос. Я задаю его каждый раз и знаю, каким будет ваш ответ, но я действительно хочу быть… О, эти вещи изменились, и я хочу, чтобы вы просто объяснили нашим замечательным слушателям, почему мы находимся там, где мы есть.

  Виталий: Теперь, очевидно, снова идет большой разговор о том, что электронная почта в формате HTML устарела, HTML-таблицы и все такое. Но у нас есть этот невероятный, растущий цвет возможностей CSS, сетка, контейнерные запросы, каскадные слои. CSS расцветает как никогда. Но когда мы смотрим на это электронное письмо в формате HTML, мы, вероятно, должны немного скептически относиться к тому, когда мы вообще сможем использовать эти вещи и делать это надежно, и если это вообще вариант.

  Виталий: Вот мне интересно, и я думаю, что многим интересно, стоит ли нам ожидать в какой-то момент сейчас в будущем, в любой момент, действительно какого-то интер… О, это очень сложное слово… Дезинфекция взаимодействия с электронной почтой в формате HTML и функциями, которые поддерживаются в Yahoo и Outlook. А если Edge двигается, то, ну, не двигается… Outlook перемещается в Edge, а Edge не переходит в Outlook. Вероятно, это лучший способ выразить это.

  Виталий: Бывает? Мы добираемся туда или-

  Реми: Это очень интересный вопрос, потому что это также горячая тема в мире электронной почты. Поскольку я думаю, что это было только в прошлом месяце, в прошлом году была создана новая группа, о которой было объявлено, и она называется Консорциум разметки электронной почты, сокращенно EMC. И в основном это группа разработчиков электронной почты, маркетологов и дизайнеров, таких как я, которые решили собраться вместе и попытаться действительно упростить ситуацию, чтобы сделать электронную почту лучше для всех. Так что это означает лучшее для разработчиков, больше стандартизации и больше единообразия для почтовых клиентов. А также лучше для пользователей, потому что если почтовые клиенты получат поддержку, например, для всех ваших ролей или всех ваших свойств, то мы сможем сделать некоторые части электронных писем более доступными для людей, которым это нужно. И то же самое касается некоторых вещей, связанных с производительностью. Если мы получим поддержку графических тегов и адаптивных изображений, мы сможем доставлять более эффективную и производительную электронную почту, потому что у нас могут быть изображения меньшего размера и тому подобное.

  Реми: Так что это действительно работа. А я много чего не делал. Так что я думаю, что это в основном Марк Роббинс и Элис Ли, и я сожалею, что забыл его имя, но несколько человек, которые действительно активны в сообществе Email Geeks. Я думаю, что они являются основными членами ядра, но также есть много членов, которые будут способствовать запуску этого. Итак, теперь речь идет о попытке привлечь внимание разработчиков почтовых клиентов и заставить их улучшить ситуацию. И хорошая новость заключается в том, что уже есть несколько почтовых клиентов, которые заявили, что заинтересованы в улучшении работы. Так что я знаю, что были немецкие почтовые клиенты, подобные этому.

  Реми: Да, это действительно что-то новенькое. Так что мне очень не терпится увидеть, куда это может пойти, потому что в прошлом были попытки улучшить ситуацию, но они так и не прижились или провалились через несколько месяцев. Итак, я знаю, что эта группа тайно существует уже год и пытается что-то сделать, поэтому очень приятно видеть, что теперь это стало достоянием общественности, и мне очень не терпится увидеть, к чему это приведет. И, надеюсь, это приведет к лучшим стандартам и единообразию для почтовых клиентов.

  Виталий: О, это звучит очень захватывающе, и это почти заставляет меня чувствовать, что будущее HTML-электронной почты светло. Тем не менее, мне, вероятно, следует немного поумерить свой энтузиазм только потому, что я не думаю, что мы должны ожидать, я не знаю, CSS sub grid и React или JavaScript в скором времени попадут в мир электронной почты HTML. Или я ошибаюсь там?

  Реми: Что касается JavaScript, я думаю, что это не то, чего вы должны ожидать, и на самом деле это не то, чего вы должны хотеть, потому что, во-первых, вы действительно хотите, чтобы в ваших электронных письмах была яркая карусель и тому подобное? Я не уверен в этом.

  Виталий: Я имею в виду, вы можете сделать это и с помощью CSS и интерактива, я не знаю.

  Реми: Да, да. Но я не совсем уверен в этом. Но главная проблема с JavaScript на самом деле заключается в безопасности, потому что, если вы позволите какой-либо одной строке JavaScript внутри почтового клиента, тогда некоторые действующие лица действительно могут получить весь ваш почтовый ящик и просто загрузить все ваши данные и тому подобное с тем, что вы даже знаете об этом. Так что JavaScript действительно таит в себе большую опасность. Поэтому никогда не стоит ожидать полной поддержки JavaScript в почтовых клиентах. Но что касается того, что вы упомянули подсетку, и я думаю, что это то, о чем я точно не слышал, но я думаю, что это то, что мы должны ожидать в следующем выпуске Apple Mail, потому что, если я не ошибаюсь, это в следующем сафари.

  Виталий: Сафари 16, да.

  Реми: Да, iOS 16. И обычно каждый раз, когда Apple добавляет новые функции в WebKits и Safari, Apple Mail также выигрывает от этого. Это то, что должно появиться в Apple Mail этой осенью. Таким образом, если вам действительно нужно использовать подсетки CSS, вы сможете сделать это к концу года. Но вам просто нужно напомнить себе, что теперь это будет работать только в Apple Mail. Так что да.

  Виталий: Но при этом, я имею в виду, ты просто так распускаешь чудесную, красивую карусель. Тем не менее, я отчетливо помню это время, может быть, в течение очень короткого периода времени, когда идея интерактивных электронных писем вызвала огромный ажиотаж. И я думаю, что до сих пор, где у вас был AMP для электронной почты?

  Реми: Да, AMP для электронной почты.

  Виталий: И у вас есть все красивые карусели и все остальное, что вы когда-либо хотели, без необходимости писать ни строчки JavaScript, потому что это было бы просто встроено в платформу, а затем вы могли бы повторно использовать один из этих компонентов. Как вы думаете, это все еще актуально или куда мы идем с этим?

  Реми: Так что да, интерактивная электронная почта по-прежнему актуальна, и все время от времени об этом говорят. Но на самом деле есть два подхода к этому. Таким образом, самый традиционный — использовать CSS и просить CSS использовать небольшие взаимодействия, возможные в CSS, например, с проверенным псевдоселектором или псевдоселектором hover. И оттуда вы можете делать вещи, когда, если вы наведете курсор на определенную зону, появится какой-то другой контент, так что вы можете поменять местами изображение при наведении или что-то в этом роде. И мы проверили, вы можете делать гораздо более подробные взаимодействия, когда, если вы нажмете на что-то, что-то еще появится в вашей электронной почте, и вы можете делать такие вещи. Так что это весьма ограничивает, потому что вы просто ограничиваете эти два вида взаимодействия. Но он имеет достойную поддержку, например, в Outlook.com, вы можете делать такие вещи и в электронной почте Yahoo для настольных компьютеров. И Gmail также поддерживает взаимодействие при наведении. Так что всегда интересно делать это для Gmail.

  Реми: Но подход с наведением, как вы упомянули, заключался в том, что Google несколько лет назад анонсировал AMP для электронной почты, и идея заключалась в том, чтобы внедрить фреймворк AMP JavaScript в мир электронной почты в формате HTML, что является интересной идеей в первое место. Но теперь я думаю, что прошло довольно много лет с тех пор, как они сделали это, и я думаю теперь, оглядываясь назад, что это, вероятно, был не лучший подход, потому что они сделали это, добавив новый тип мины в ваше электронное письмо. Таким образом, когда вы отправляете электронное письмо в формате HTML, вы не просто отправляете HTML-файл людям, вы отправляете код электронной почты, который на самом деле представляет собой код из нескольких частей, где есть простая текстовая версия электронного письма, часть HTML и все остальное. своего рода редактор, говорящий, кому вы отправляете свое электронное письмо, и тому подобное.

  Реми: И что Google сделал с AMP для электронной почты, так это то, что они добавили совершенно новый раздел AMP для электронной почты в код электронной почты, подобный этому. Но это означало, что если вы хотите отправить AMP для электронной почты, то все же, если вы хотите отправить сейчас AMP для электронной почты, для вашего ESP или службы отправки электронной почты, для поддержки этих конкретных типов мин, иначе вы не можете перейти к коду это и отправить. Таким образом, вся индустрия электронной почты очень, очень хотела посмотреть, кто поддержит это, а кто нет. И через несколько лет, прямо сейчас, похоже, что большинство почтовых провайдеров и сервисов на самом деле не поддерживали это. Так, например, MailChimp не поддерживает это, поэтому многие известные почтовые сервисы не поддерживают AMP для электронной почты. Таким образом, вы не можете легко отправить AMP для электронной почты.

  Реми: И я думаю, что еще один момент, который делает AMP для электронной почты довольно сложным, заключается в том, что даже если вам удастся отправить AMP для электронной почты, вам нужно попасть в белый список от каждого клиента, который поддерживает AMP для электронной почты. Итак, если вы хотите отправить AMP для электронной почты, вам нужно попасть в белый список от Google, чтобы люди, использующие одно письмо Google для настольных компьютеров, увидели его, и вам нужно попасть в белый список из почты ?? это тоже поддерживает. А так это довольно сложный процесс, на мой взгляд. И это также полностью противоречит основной природе электронной почты, которая является очень открытым стандартом. Любой может отправлять электронную почту, любые почтовые клиенты могут читать электронную почту. Поэтому они пытаются обходить формат электронной почты, чтобы сделать его интерактивным, но я думаю, что это усложняет задачу.

  Реми: Так что да, я все еще думаю, что это может быть интересным применением. Я не знаю, использовали ли вы когда-нибудь Google Docs и получали ли вы электронное письмо, в котором кто-то прокомментировал ваши Google Docs, и вы можете в Gmail ответить по электронной почте, это AMP для электронной почты, и вы можете ответить прямо из Gmail. входящие к комментарию, который был оставлен в вашем документе. Я думаю, что это удивительное использование AMP для электронной почты. Но трудно представить, как это можно сделать более популярным. И, да, трудно представить, что это завоюет популярность, и найти такое хорошее применение для более традиционных электронных писем.

  Виталий: Ну, может быть, пока мы заканчиваем этот пункт, я должен задать один вопрос, который меня давно беспокоит. Если бы была функция мечты, которую вы хотели бы иметь в электронной почте в формате HTML, что-то, что могло бы появиться во всех почтовых клиентах повсюду завтра, если бы вы просто хотели, чтобы это было там, что бы это была за функция?

  Реми: Так что я думаю, что это не обязательно будет функция HTML CSS, но мне бы хотелось увидеть что-то вроде реакции на электронные письма, как у вас в Slack или на GitHub, или просто на сообщения на iOS и Android. . И это было бы забавной функцией, и я думаю, что это могло бы сэкономить много электронных писем, потому что каждый раз, когда вам нужно просто отправить им электронное письмо со словами «Итак, хорошо, я понял», вы можете просто отправить ответ, и это будет намного быстрее. Но опять же, это потребует большой стандартизации и реализации. Так что я думаю, что мы не очень сильно пострадали.

  Виталий: Если вы, дорогой слушатель, хотели бы услышать больше от Реми, вы можете найти его в Твиттере, где он HTeuMeuLeu, или нам придется поместить эту ссылку в заметки. А также на его сайте HTeuMeuLeu.com. Но также на SmashingConf он часто проводит мастер-классы по электронной почте в формате HTML. Мы обсудим, когда появится следующий.

  Виталий: У тебя есть какие-нибудь напутствия с нашей замечательной публикой Реми на сегодня? Сегодня мы узнали все об электронной почте в формате HTML, но что вы узнали из этого занятия или вообще? Какие напутствия вы хотели бы передать людям, которые могут быть рады присоединиться к этой темной стороне мира и разработать и создать HTML-письмо вместе с вами?

  Реми: Что ж, надеюсь, я убедил некоторых из вас, что да, разработка электронной почты — это вещь, и она может быть реализована. Если вы недовольны тем, как работает веб-сайт в наши дни, присоединяйтесь к нам. Здесь действительно весело. И да, есть еще целое сообщество. Так что да, не стесняйтесь связаться со мной и просто присоединиться к нам. Нас десятки.

  Виталий: Конечно. И если вам, дорогие друзья, интересно сообщество HTML Email Geeks, насколько я понял. Реми, поправьте меня, если я ошибаюсь. Есть Email Geeks, есть Slack-канал. И вы также можете поговорить с Реми, и я уверен, что он будет очень рад указать вам на группу, где тусуются все крутые ребята, говорящие о электронных письмах в формате HTML.

  Реми: Абсолютно.

  Проблемы с отображением электронной почты Outlook и способы их решения

  Перейти к основному содержанию
  • Создание электронной почты
  • Дизайн электронной почты

  Нет ничего хуже, чем тратить часы на создание красивого электронного письма, наполненного остроумными анимированными GIF-файлами, потрясающими изображениями и доступными кнопками, только для того, чтобы обнаружить, что оно не дает предварительного просмотра Outlook при переходе к электронной почте. тестирование. Сокрушение души.

  Электронные письма Outlook, которые не отображают должным образом электронные письма в формате HTML, долгое время были основным продуктом в книге по электронной почте, вызывающей раздражение. Но так ли это должно быть? Узнайте, как преодолевать препятствия Outlook и создавать динамичные, привлекательные электронные письма, которые наверняка будут выглядеть великолепно… даже в Outlook!

  В этом посте вы узнаете:

  • Множество версий Microsoft Outlook
  • Как решить проблемы с отображением электронной почты Outlook
  • Код, который вам нужен, чтобы противостоять страхам Outlook

  Множество версий Microsoft Outlook

  Название «Outlook» охватывает несколько разных почтовых клиентов с несколькими разными механизмами рендеринга и как минимум двумя разными настройками просмотра. Все это может стать огромной головной болью, если вы позволите. Давайте погрузимся в различные версии Outlook.

  Outlook 2007-2019

  Это настольные версии Outlook для Windows. Они используют Word в качестве механизма рендеринга, что имело смысл в то время, когда электронная почта была похожа на написание писем. (Ах, более простые времена.) Но для маркетологов электронной почты это не подходит для рендеринга электронных писем Outlook в формате HTML.

  120 DPI (точек на дюйм) добавляет сложности. Пользователи Windows могут выбрать 120 DPI, чтобы увеличить разрешение экрана. Если они это сделают, почтовые клиенты для настольных компьютеров будут уважать это и будут обновлять изображения и текст, чтобы они были крупнее. К сожалению, это может нанести ущерб вашей электронной почте.

  Outlook для Mac

  Это настольная версия Outlook для Mac. Он использует Webkit в качестве механизма рендеринга. Это означает, что он обычно находится на одном уровне с Apple Mail и iOS в том, что касается рендеринга электронной почты. Если он хорошо выглядит в вашем браузере, есть большая вероятность, что он будет хорошо выглядеть в Outlook для Mac, и у вас будет меньше шансов, что ваше электронное письмо в формате html не будет отображаться должным образом.

  Outlook.com и мобильные приложения Outlook

  Эти клиенты используют Webkit или механизмы рендеринга на основе Webkit, поэтому они обеспечивают хорошее рендеринг HTML и обычно не нарушают работу ваших электронных писем.

  Outlook Office 365

  Существует две разные версии Outlook Office 365:

  • Почтовый клиент для настольных ПК
  • Почтовый веб-клиент

  Версия для настольных ПК аналогична Outlook 2007–2019 и использует Word в качестве механизма рендеринга. (сложно для электронной почты). Веб-клиент электронной почты использует Webkit или Blink и отображает электронные письма аналогично Outlook.com (намного проще).

  Нет больше битых писем Предварительно просматривайте свои электронные письма в более чем 100 почтовых клиентах, приложениях и устройствах, включая все версии Outlook, чтобы гарантировать безошибочное взаимодействие с подписчиками. Узнайте, как →

   

  Один Outlook, чтобы управлять ими всеми

  В январе 2021 года Microsoft объявила о своем видении «Единого Outlook» по замене настольных клиентов одним клиентом, который будет работать везде, начиная с этого года.

  Новый почтовый клиент Outlook будет основан на текущих веб-приложениях Outlook. Есть большие надежды, что он будет иметь механизм рендеринга на основе Webkit и будет отображать электронные письма в формате HTML, чтобы уменьшить вероятность того, что ваше электронное письмо в формате html не будет отображаться должным образом в Outlook. К сожалению, все эти старые настольные клиенты не исчезнут, когда это произойдет, поэтому их все равно придется поддерживать в некоторой степени.

  Как решить проблемы с рендерингом электронной почты в Outlook: что можно и чего нельзя делать

  Ключевым моментом является то, что мы работаем с двумя разными механизмами рендеринга — Word и Webkit. Webkit легче кодировать, а Word сложнее. Ни то, ни другое не обязательно хорошо или плохо, они просто требуют разных подходов и имеют разные особенности, которые необходимо учитывать.

  Давайте рассмотрим некоторые распространенные проблемы с отрисовкой в ​​настольных клиентах Outlook и способы их решения.

  Включите в изображения атрибуты ширины и высоты

  Outlook не поддерживает стили CSS для ширины и высоты. Если вы не включите атрибуты ширины и высоты, Outlook отобразит ваше изображение в его реальном размере. Если вы используете изображения Retina (что и должно быть), это приведет к гигантским изображениям, которые сломают ваши электронные письма.

  Изображение Retina без атрибута ширины в Outlook делает электронное письмо шире

  Включите текст ALT

  Не позволяйте сообщению безопасности Outlook говорить за ваши изображения. Не забудьте включить текст ALT; Outlook не отображает изображения по умолчанию, если люди не включают эту функцию.

  Электронная почта в Outlook с заблокированными изображениями

  Используйте таблицы

  Электронная почта прошла долгий путь, и вы можете использовать блоки

  во многих почтовых клиентах, но Outlook не входит в их число. Outlook будет игнорировать большинство стилей, которые вы применяете к своим тегам

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

  Используйте код, специфичный для Outlook, для решения проблем с отрисовкой

  Это может не решить все ваши проблемы, но включение некоторых специфичных для Outlook CSS может помочь вам решить проблему с отрисовкой, которую вы видите только в Outlook. Или вы можете скрыть небольшой блок, если ваша электронная почта Outlook не отображается должным образом, и использовать условный код, чтобы показать версию, которая будет работать с для определенной версии Outlook. (Подробнее об условном коде позже.)

  Добавляйте высоту строки для небольших изображений или ячеек таблицы

  Outlook устанавливает минимальную высоту для ячеек таблицы и изображений. Если вы используете ячейку таблицы в качестве разделителя или у вас есть небольшое изображение, обязательно добавьте к элементу атрибут line-height, равный высоте, которую вы хотите, чтобы они отображались. Например:

  Исправьте проблемы с масштабированием DPI

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

  К счастью, есть решение. Во-первых, вы должны добавить пространство имен XML в тег HTML:

  .
  
   

  Затем добавьте код для исправления масштабирования изображения прямо перед тегом:

  Наконец, не забудьте указать любую установленную ширину как свойства CSS с пикселями, а не как атрибут таблиц.

  ✗ Не для ширины=”600″:

  ✔ Да, вот так со стилем=”width:600px;”:

  Это решит большинство ваших проблем для клиентов с разрешением 120 DPI. Взгляните на это параллельное сравнение таблиц до и после исправления:

  0

  8

  0

  Outlook 2013 с разрешением 120 DPI (без исправления)	Outlook 2013 с разрешением 120 DPI (с исправлением)

   

  Какая разница!

  Не ожидайте, что эффекты наведения будут работать

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

  Не полагайтесь на анимированные GIF-файлы, чтобы донести свою точку зрения

  Клиенты Outlook для настольных ПК не поддерживают анимированные GIF-файлы. Вы можете сделать так, чтобы в начальном кадре отображалось изображение, которое вы хотите отобразить в Outlook, или вы можете скрыть анимированный GIF-файл из Outlook и использовать условное кодирование для отображения нужного неподвижного изображения. (h4) Не используйте интерактивный контент без запасного варианта

  Интерактивные электронные письма в формате HTML — это большое «нет» для Outlook. Они зависят либо от кода AMP, либо от взлома флажка, ни один из которых не поддерживается в Outlook.

  В случае AMP для электронной почты вместо AMP-файла будет отображаться HTML-файл, поэтому для этого не требуется дополнительное кодирование. Для интерактивности взлома флажка вам придется скрыть интерактивный контент и показать запасной вариант Outlook. Опять же, условное кодирование — ваш друг, когда дело доходит до электронных писем Outlook в формате HTML.

  Не добавлять отступы и поля к изображениям

  Outlook удаляет отступы и поля с изображений. Добавьте отступы к ячейке таблицы вокруг изображения или, если изображение находится в той же ячейке, что и копия, добавьте поле к тегу вокруг копии (

  ,

  ,

  и т. д.).

  Код, который вам нужен, чтобы справиться со страхами перед электронной почтой Outlook в формате HTML.

  Есть три типа кода, которые помогут сделать ваши электронные письма сияющими в этих клиентах: условное кодирование, свойства MSO и VML.

  Работать с чем-то новым может быть страшно, но оно того стоит. Когда вы заставите его работать правильно, и это больше не означает, что ваша электронная почта Outlook не отображается должным образом, вы почувствуете себя на вершине мира!

  Условное кодирование

  Условное кодирование проверяет, какой почтовый клиент или браузер использует ваш подписчик, и показывает код только в том случае, если он выполняет условие внутри комментария, например:

  Вы даже можете использовать это для целевых версий настольных клиентов Outlook, добавив номера версий:

  Outlook далеко не прост, поэтому номера версий не соответствуют названию почтового клиента:

  • Outlook 2000 = mso 9
  • Outlook 2002 = mso 10
  • Outlook 2003 = mso 11
  • Outlook 2007 = mso 12
  • Outlook 2010 = mso 14
  • Outlook 2013 = mso 15
  • Outlook 2016, Outlook 2019 и Office 365 desktop = mso 16

  9000 клиентов. где меньше (lt), больше (gt), меньше или равно (lte) или больше или равно (gte). Например:

  Если вы видите некоторые проблемы только на конкретном клиенте, вы можете настроить таргетинг именно на этот клиент, чтобы скрыть и отобразить более качественный контент для него.

  Вы также можете использовать условные комментарии, чтобы скрыть содержимое от Outlook, сказав «if !mso», что означает «if not mso»:

  
  Это видно во всех приложениях, кроме настольных клиентов Outlook
  
   

  Следует помнить: условный код работает только в настольных клиентах Outlook. Поскольку именно здесь возникает множество проблем, они, вероятно, понадобятся вам больше, чем любое исправление для клиентов веб-почты.

  Существуют также способы нацеливания на веб-клиенты, но нет способа нацелить один веб-клиент Outlook на другой. Поэтому, когда вы ориентируетесь на Outlook.com, вы также ориентируетесь на веб-клиент Office 365 (но не на настольный клиент).

  Вы можете ориентироваться на веб-клиенты Outlook, используя тот факт, что Outlook добавляет «x_» ко всем именам классов, но не делает этого для селектора атрибутов. Итак, если у вас есть класс «foo» и вы хотите по-разному относиться к нему для веб-клиентов Outlook, вы можете настроить его с помощью этого кода:

  [класс~="x_foo"] { }
   

  (Спасибо Марку Роббинсу за это исправление и Дилану Смиту за howtotarget.email.)

  Свойства MSO

  Как упоминалось выше, для Outlook можно добавить специальный CSS, который будет влиять только на почтовые клиенты Outlook для настольных компьютеров. Вот некоторые из наиболее распространенных:

  mso-hide: all;

  Это свойство скрывает все от настольных клиентов Outlook. Он удаляется при пересылке электронной почты, поэтому будьте осторожны с его использованием отдельно, если это функция, которую, как вы знаете, часто используют ваши подписчики. Вы можете соединить его с условным кодом «if not mso», если вы кодер «на всякий случай».

  mso-line-height-rule: точно;

  Это свойство гарантирует, что Outlook отображает высоту строки, указанную вами в свойстве line-height. Без этого Outlook не обязательно учитывает высоту строки. Если вы работаете в отрасли, где точность является ключевым фактором, вы, вероятно, хорошо знакомы с этим свойством.

  mso-padding-alt

  Это немного менее распространено, но позволяет объявить отступы, специфичные для Outlook. Если обычное заполнение, которое у вас есть в ячейке, не совсем правильно отображается в Outlook, вы можете использовать mso-padding-alt , чтобы установить значения, соответствующие вашему дизайну для Outlook.

  mso-ansi-font-size

  Это позволяет вам установить размеры шрифта для Outlook. Если Outlook отображает ваш шрифт немного больше, чем в других почтовых клиентах, и вы получаете короткую последнюю строку копии, которую вы не хотели, добавьте mso-ansi-font-size и установите размер шрифта, который подходит для вашей копии. .

  Существует множество других свойств MSO, которые вы можете использовать, поэтому поэкспериментируйте, чтобы найти что-нибудь, что устранит проблему рендеринга.

  VML

  VML означает язык векторной разметки. Это версия SVG от Microsoft, но язык устарел и используется очень редко (ура, электронная почта!). У Microsoft есть документация по VML, заархивированная в Интернете, поэтому вы все равно можете посмотреть, как использовать ее для создания векторов в Outlook, где она все еще поддерживается. Теоретически, когда Microsoft перейдет на свою модель «One Outlook», мы сможем отказаться от VML.

  Не забудьте включить объявление пространства имен VML. Обычно я добавляю его к элементу в моем стандартном шаблоне, чтобы я мог использовать VML всякий раз, когда мне нужно:

  После этого вы можете добавить любой VML в свой код внутри условий MSO:

  Этот код создаст синий прямоугольник размером 200 на 50 пикселей. Это может быть не то, что вы действительно можете использовать в электронной почте, но вы можете использовать VML для добавления кнопок с закругленными углами в ваш код, фоновых изображений и фоновых градиентов. Вы также можете использовать VML для создания искусственного абсолютного позиционирования, теневых эффектов или резервного варианта для поддержки рисунков CSS в Outlook. После того, как вы погрузитесь в работу с VML, вы сможете многое сделать с ним.

  Протестируйте, чтобы убедиться, что рендеринг электронной почты Outlook проходит гладко!

  Outlook долгое время был бичом маркетологов по электронной почте, но это не обязательно.

  С помощью правильных инструментов вы можете создавать красивые электронные письма Outlook HMTL, которые правильно отображаются в Outlook. Ознакомьтесь с ресурсами в этом посте, чтобы создать свои навыки кодирования в Outlook, и протестируйте их в своих электронных письмах с помощью Litmus Builder и Email Previews. Думайте о кодировании для Outlook как о головоломке, ожидающей решения, и вы можете полюбить Outlook и все его причуды.

  Убедитесь, что ваш дизайн выглядит правильно

  Неработающие электронные письма приводят к снижению конверсий. Предварительно просматривайте свои электронные письма в более чем 100 почтовых клиентах, приложениях и устройствах, чтобы обеспечить безошибочное взаимодействие с подписчиками. Каждый раз.

  Узнайте больше

  Самый популярный

  1. Советы и ресурсы

     Время чтения: 18 мин

  2. Дизайн электронной почты

     Время чтения: 18 мин

  3. Советы и ресурсы

     0003

     Время чтения: 12 мин.

  4. Не пропустите Litmus Live 2022 этой осенью!

     Лучшее мероприятие по электронной почте от профессионалов электронной почты, для профессионалов электронной почты.
     Из любого места и любого бюджета.

     Узнать больше

  Электронный маркетинг стал лучше

  Базовый синтаксис | Руководство по Markdown

  Обзор

  Почти все приложения Markdown поддерживают базовый синтаксис, изложенный в исходном проектном документе Markdown. Существуют незначительные различия и расхождения между процессорами Markdown — они везде, где это возможно, отмечаются в строке.

  Заголовки

  Чтобы создать заголовок, добавьте цифровые знаки ( # ) перед словом или фразой. Количество используемых вами цифровых знаков должно соответствовать уровню заголовка. Например, чтобы создать заголовок третьего уровня (

  ), используйте три цифровых знака (например, ### Мой заголовок ).

  Уценка	HTML	Визуализированный вывод
  # Уровень заголовка 1	Уровень заголовка 1
  ## Уровень заголовка 2	Уровень заголовка 2	Уровень заголовка 2
  ### Уровень заголовка 3	Уровень заголовка 3	Уровень заголовка 3
  #### Уровень заголовка 4	Уровень заголовка 4	Уровень заголовка 4
  ##### Уровень заголовка 5	Уровень заголовка 5	Уровень заголовка 5
  ###### Уровень заголовка 6	Уровень заголовка 6	Уровень заголовка 6

  Альтернативный синтаксис

  В качестве альтернативы, в строке ниже текста добавьте любое количество == символов для уровня заголовка 1 или -- символов для уровня заголовка 2. HTML Визуализированный вывод Уровень заголовка 1
===============

  Уровень заголовка 1

  Уровень заголовка 2
---------------

  Уровень заголовка 2

  Уровень заголовка 2

  Передовые практики для заголовков

  Приложения Markdown не согласны с тем, как обрабатывать отсутствующий пробел между цифрами ( # ) и названием заголовка. Для совместимости всегда ставьте пробел между цифрами и названием заголовка.

  ✅  Сделай это	❌  Не делайте этого
  # Вот заголовок	#Вот заголовок

  Вы также должны ставить пустые строки до и после заголовка для совместимости.

  ✅  Сделай это	❌  Не делайте этого
  Попробуйте поставить пустую строку перед... # Заголовок ...и после заголовка.	Без пустых строк это может выглядеть неправильно. # Заголовок Не делайте этого!

  Абзацы

  Чтобы создать абзац, используйте пустую строку для разделения одной или нескольких строк текста.

  Уценка	HTML	Визуализированный вывод
  Мне очень нравится использовать Markdown. Думаю, теперь я буду использовать его для форматирования всех своих документов.	Мне очень нравится использовать Markdown. Думаю, теперь я буду использовать его для форматирования всех своих документов.	Мне очень нравится использовать Markdown. Думаю, теперь я буду использовать его для форматирования всех своих документов.

  Передовой опыт работы с абзацами

  Если абзац не находится в списке, не добавляйте отступы с помощью пробелов или табуляции.

  Примечание: Если вам нужно сделать отступ абзаца в выводе, см. раздел о том, как сделать отступ (вкладка).

  ✅  Сделай это	❌  Не делайте этого
  Не ставьте табуляцию или пробелы перед абзацами. Выровнять строки по левому краю, как здесь.	Это может привести к неожиданным проблемы с форматированием.   Не добавляйте табуляцию или пробелы перед абзацами.

  Разрывы строк

  Чтобы создать разрыв строки или новую строку (
), завершите строку двумя или более пробелами, а затем введите return.

  Уценка	HTML	Визуализированный вывод
  Это первая строка. А это вторая строка.	Это первая строка. А это вторая строка.	Это первая строка. А это вторая строка.

  Передовые методы переноса строки

  Вы можете использовать два или более пробела (обычно называемых «конечными пробелами») для разрыва строки почти в каждом приложении Markdown, но это спорно. Трудно увидеть пробелы в конце в редакторе, и многие люди случайно или намеренно ставят два пробела после каждого предложения. По этой причине вы можете захотеть использовать что-то другое, кроме завершающих пробелов, для разрывов строк. Если ваше приложение Markdown поддерживает HTML, вы можете использовать
Тег HTML.

  В целях совместимости используйте завершающий пробел или HTML-тег
в конце строки.

  Есть еще две опции, которые я не рекомендую использовать. CommonMark и несколько других облегченных языков разметки позволяют вводить обратную косую черту ( \ ) в конце строки, но не все приложения Markdown поддерживают это, поэтому с точки зрения совместимости это не лучший вариант. И, по крайней мере, пара легких языков разметки не требует ничего в конце строки — просто введите return, и они создадут разрыв строки.

  ✅  Сделай это	❌  Не делайте этого
  Первая строка с двумя пробелами после. И следующая строка. Первая строка с тегом HTML после. И следующая строка.	Первая строка с обратной косой чертой после.\ И следующая строка. Первая строка без ничего после. И следующая строка.

  Выделение

  Вы можете выделить текст жирным шрифтом или курсивом.

  Полужирный

  Чтобы выделить текст жирным шрифтом, добавьте две звездочки или символы подчеркивания до и после слова или фразы. Чтобы выделить середину слова жирным шрифтом, добавьте две звездочки без пробелов вокруг букв.

  Уценка	HTML	Визуализированный вывод
  Я просто люблю **жирный текст**.	Мне просто нравится выделение жирным шрифтом.	Я просто люблю полужирный текст .
  Я просто люблю __жирный текст__.	Мне просто нравится выделение жирным шрифтом.	Я просто люблю полужирный текст .
  Любовь**это**смелая	Любовьэтосмелая	Любовь это полужирный

  Bold Best Practices

  Приложения Markdown не согласны с тем, как обрабатывать знаки подчеркивания в середине слова. Для совместимости используйте звездочки, чтобы выделить середину слова жирным шрифтом.

  ✅  Сделай это	❌  Не делайте этого
  Любовь**это**смелая	Любовь__это__смелый

  Курсив

  Чтобы выделить текст курсивом, добавьте одну звездочку или подчеркивание до и после слова или фразы. Чтобы выделить середину слова курсивом, добавьте одну звездочку без пробелов вокруг букв.

  Уценка	HTML	Визуализированный вывод
  Курсивом выделен *кошачье мяуканье*.	Курсивом обозначено кошачье мяуканье.	Текст, выделенный курсивом, — это кошачье мяуканье .
  Курсивом выделен текст _кошачьего мяу_.	Курсивом обозначено кошачье мяуканье.	Текст, выделенный курсивом, — это кошачье мяуканье .
  А*кот*мяу	котмяу	А кот мяу

  Italic Best Practices

  Приложения Markdown не согласны с тем, как обрабатывать знаки подчеркивания в середине слова. Для совместимости используйте звездочки, чтобы выделить середину слова курсивом.

  ✅  Сделай это	❌  Не делайте этого
  А*кошка*мяу	A_cat_meow

  Жирный и курсив

  Чтобы одновременно выделить текст жирным шрифтом и курсивом, добавьте три звездочки или знака подчеркивания до и после слова или фразы. Чтобы выделить середину слова полужирным шрифтом и выделить его курсивом, добавьте три звездочки без пробелов вокруг букв.

  Уценка	HTML	Визуализированный вывод
  Этот текст ***действительно важен***.	Этот текст действительно важен.	Этот текст действительно важен .
  Этот текст ___действительно важен___.	Этот текст действительно важен.	Этот текст действительно важен .
  Этот текст __*действительно важен*__.	Этот текст действительно важен.	Этот текст действительно важен .
  Этот текст **_действительно важен_**.	Этот текст действительно важен.	Этот текст действительно важен .
  Это действительно***очень***важный текст.	Это действительнооченьважный текст.	Это действительно очень важный текст.

  Лучшие практики для жирного и курсивного начертания

  Приложения Markdown не согласны с тем, как обрабатывать знаки подчеркивания в середине слова. Для совместимости используйте звездочки, чтобы выделить жирным шрифтом, а середину слова выделить курсивом.

  ✅  Сделай это	❌  Не делайте этого
  Это действительно***очень***важный текст.	Это действительно ___ очень ___ важный текст.

  Цитаты

  Чтобы создать цитату, добавьте > перед абзацем.

   > Дороти последовала за ней через множество красивых комнат в ее замке.
   

  Результат визуализации выглядит следующим образом:

  Дороти последовала за ней через множество красивых комнат в ее замке.

  Цитаты с несколькими абзацами

  Цитаты могут содержать несколько абзацев. Добавьте > в пустые строки между абзацами.

   > Дороти последовала за ней через множество красивых комнат в ее замке.
  >
  > Ведьма велела ей мыть кастрюли и чайники, подметать пол и поддерживать огонь дровами.
   

  Результат визуализации выглядит следующим образом:

  Дороти последовала за ней через множество красивых комнат в ее замке.

  Ведьма велела ей мыть кастрюли и чайники, подметать пол и поддерживать огонь дровами.

  Вложенные цитаты

  Цитаты могут быть вложены друг в друга. Добавьте >> перед абзацем, который вы хотите вложить.

   > Дороти последовала за ней через множество красивых комнат в ее замке.
  >
  >> Ведьма велела ей мыть кастрюли и чайники, подметать пол и поддерживать огонь дровами.
   

  Результат визуализации выглядит следующим образом:

  Дороти последовала за ней через множество красивых комнат в ее замке.

  Ведьма велела ей мыть кастрюли и чайники, подметать пол и поддерживать огонь дровами.

  Цитаты с другими элементами

  Цитаты могут содержать другие элементы в формате Markdown. Не все элементы можно использовать — вам нужно будет поэкспериментировать, чтобы увидеть, какие из них работают.

   > #### Квартальные результаты выглядят великолепно!
  >
  > - Выручка была зашкаливающей.
  > - Прибыли были выше, чем когда-либо.
  >
  > *Все* идет по **плану**.
   

  Результат визуализации выглядит следующим образом:

  Квартальные результаты выглядят великолепно!

  • Доход был зашкаливающим.
  • Прибыль была выше, чем когда-либо.

  Все идет по плану .

  Передовой опыт работы с цитатами

  Для совместимости ставьте пустые строки до и после цитат.

  г.

  ✅  Сделай это	❌  Не делайте этого
  Попробуйте поставить пустую строку перед... > Это цитата ...и после цитаты.	Без пустых строк это может выглядеть неправильно. > Это цитата Не делайте этого!

  Списки

  Элементы можно упорядочивать в упорядоченные и неупорядоченные списки.

  Упорядоченные списки

  Чтобы создать упорядоченный список, добавьте позиции с номерами, за которыми следуют точки. Номера не обязательно должны быть в порядке цифр, но список должен начинаться с единицы.

  Уценка	HTML	Визуализированный вывод
  1. Первый предмет 2. Второй предмет 3. Третий предмет 4. Четвертый предмет	<ол>    Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий предмет Четвертый предмет
  1. Первый предмет 1. Второй предмет 1. Третий предмет 1. Четвертый предмет	Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий предмет Четвертый предмет
  1. Первый предмет 8. Второй предмет 3. Третий предмет 5. Четвертый предмет	Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий элемент Четвертый предмет
  1. Первый элемент 2. Второй элемент 3. Третий элемент     1. Элемент с отступом     2. Элемент с отступом 4. Четвертый элемент	Первый элемент    Второй элемент    Третий элемент             Элемент с отступом        Элемент с отступом            Четвертый элемент	Первый предмет Второй предмет Третий предмет Элемент с углублением Элемент с углублением Четвертый предмет

  Заказной список Передовой опыт

  CommonMark и несколько других облегченных языков разметки позволяют использовать круглые скобки ( ) ) в качестве разделителя (например, 1) Первый элемент ), но не все приложения Markdown поддерживают это, поэтому это не лучший вариант. с точки зрения совместимости. Для совместимости используйте только точки.

  ✅  Сделай это	❌  Не делайте этого
  1. Первый элемент 2. Второй элемент	1) Первый элемент 2) Второй элемент

  Ненумерованные списки

  Чтобы создать ненумерованный список, добавьте тире ( - ), звездочки ( * ) или плюс ( + ) перед элементами строки. Сделайте отступ для одного или нескольких элементов, чтобы создать вложенный список.

  Уценка	HTML	Визуализированный вывод
  - Первый предмет - Второй предмет - Третий предмет - Четвертый предмет	Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий предмет Четвертый предмет
  * Первый элемент * Второй элемент * Третий элемент * Четвертый элемент	Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий предмет Четвертый предмет
  + Первый предмет + Второй предмет + Третий предмет + Четвертый предмет	Первый элемент    Второй элемент    Третий элемент    Четвертый элемент	Первый предмет Второй предмет Третий предмет Четвертый предмет
  - Первый элемент - Второй элемент - Третий элемент      - Элемент с отступом      - Элемент с отступом - Четвертый элемент	Первый элемент    Второй элемент    Третий элемент             Элемент с отступом        Элемент с отступом< /li>            Четвертый элемент	Первый предмет Второй предмет Третий предмет Элемент с отступом Элемент с углублением Четвертый предмет

  Начало элементов ненумерованного списка с цифрами

  Если вам нужно начать элемент ненумерованного списка с числа, за которым следует точка, вы можете использовать обратную косую черту ( \ ), чтобы избежать точки.

  Уценка	HTML	Визуализированный вывод
  - 1968\. Отличный год! - Я думаю, что 1969 год был вторым лучшим.	1968. Отличный год!    Я думаю, что 1969 год был вторым лучшим годом.	1968 год. Отличный год! Я думаю, что 1969 год был вторым лучшим.

  Рекомендации по работе с ненумерованными списками

  Приложения Markdown не согласны с тем, как обрабатывать разные разделители в одном списке. Для совместимости не смешивайте разделители в одном списке — выберите один и придерживайтесь его.

  ✅  Сделай это	❌  Не делайте этого
  - Первый предмет - Второй предмет - Третий предмет - Четвертый предмет	+ Первый предмет * Второй предмет - Третий предмет + Четвертый предмет

  Добавление элементов в списки

  Чтобы добавить еще один элемент в список, сохранив непрерывность списка, сделайте отступ для элемента четыре пробела или одну табуляцию, как показано в следующих примерах.

  Совет: Если что-то выглядит не так, как вы ожидаете, дважды проверьте, что вы сделали отступ для элементов в списке четыре пробела или один табулятор.

  Пункты

   * Это первый элемент списка.
  * Вот второй пункт списка.
      Мне нужно добавить еще один абзац ниже второго элемента списка.
  * А вот и третий пункт списка.
   

  Результат визуализации выглядит следующим образом:

  Цитаты

   * Это первый элемент списка.
  * Вот второй пункт списка.
      > Цитата отлично смотрелась бы под вторым элементом списка.
  * А вот и третий пункт списка.
   

  Результат визуализации выглядит следующим образом:

  блоков кода

  Блоки кода обычно имеют отступ в четыре пробела или одну табуляцию. Когда они находятся в списке, сделайте для них отступ в восемь пробелов или две табуляции.

   1. Откройте файл.
  2. Найдите следующий блок кода в строке 21:
          
            <голова>
              
            
  3.  Обновите заголовок, чтобы он соответствовал названию вашего сайта.
   

  Результат визуализации выглядит следующим образом:

  1. Откройте файл.

  2. Найдите следующий блок кода в строке 21:

      
        <голова>
          
        
      

  3. Обновите заголовок, чтобы он соответствовал названию вашего веб-сайта.

  Изображения

   1. Откройте файл, содержащий талисман Linux.
  2. Полюбуйтесь его красотой.
      ![Такс, талисман Linux](/assets/images/tux.png)
  3. Закройте файл.
   

  Результат визуализации выглядит следующим образом:

  1. Откройте файл, содержащий талисман Linux.

  2. Поразитесь его красоте.

  3. Закрыть файл.

  Списки

  Неупорядоченный список можно вложить в упорядоченный список или наоборот.

   1. Первый элемент
  2. Второй пункт
  3. Третий пункт
      - элемент с отступом
      - элемент с отступом
  4.  Четвертый пункт
   

  Результат визуализации выглядит следующим образом:

  1. Первый элемент
  2. Второй предмет
  3. Третий предмет
     • Элемент с углублением
     • Элемент с отступом
  4. Четвертый предмет

  Код

  Чтобы обозначить слово или фразу как код, заключите его в обратные кавычки ( ` ).

  Уценка	HTML	Визуализированный вывод
  В командной строке введите «nano».	В командной строке введите nano.	В командной строке введите нано .

  Экранирование обратных кавычек

  Если слово или фраза, которые вы хотите обозначить как код, содержат одну или несколько обратных кавычек, вы можете избежать их, заключив слово или фразу в двойные обратные кавычки ( `` ).

  Уценка	HTML	Визуализированный вывод
  ``Используйте `код` в файле Markdown``	Используйте `code` в файле Markdown.	Используйте `code` в вашем файле Markdown.

  Блоки кода

  Чтобы создать блоки кода, сделайте отступ в каждой строке блока не менее чем на четыре пробела или одну табуляцию.

   
        <голова>
        
      
   

  Результат визуализации выглядит следующим образом:

   
    <голова>
    
  
   

  Примечание: Для создания блоков кода без отступов строк используйте изолированные блоки кода.

  Горизонтальные линейки

  Чтобы создать горизонтальную линейку, используйте три или более звездочек ( *** ), дефисов ( --- ) или подчеркиваний ( ___ ) в отдельной строке.

   ***
  ---
  _________________
   

  Визуализированный вывод всех трех выглядит одинаково:

  ---

  Передовой опыт использования горизонтальных правил

  Для совместимости поставьте пустые строки до и после горизонтальных линеек.

  ✅  Сделай это	❌  Не делайте этого
  Попробуйте поставить пустую строку перед... --- ...и после горизонтальной линейки.	Без пустых строк это был бы заголовок. --- Не делай этого!

  Ссылки

  Чтобы создать ссылку, заключите текст ссылки в скобки (например, [Duck Duck Go] ), а затем сразу же укажите URL-адрес в скобках (например, (https://duckduckgo.com) ).

   Моя любимая поисковая система — [Duck Duck Go] (https://duckduckgo.com). 
   

  Результат визуализации выглядит следующим образом:

  Моя любимая поисковая система — Duck Duck Go.

  Примечание: Чтобы создать ссылку на элемент на той же странице, см. ссылку на идентификаторы заголовков. Чтобы создать ссылку, которая открывается в новой вкладке или окне, см. раздел о целевых ссылках.

  Добавление заголовков

  Вы можете дополнительно добавить заголовок для ссылки. Это будет отображаться в виде всплывающей подсказки, когда пользователь наводит курсор на ссылку. Чтобы добавить заголовок, заключите его в кавычки после URL-адреса.

   Моя любимая поисковая система — [Duck Duck Go] (https://duckduckgo.com «Лучшая поисковая система для конфиденциальности»).
   

  Результат визуализации выглядит следующим образом:

  Моя любимая поисковая система — Duck Duck Go.

  URL-адреса и адреса электронной почты

  Чтобы быстро превратить URL-адрес или адрес электронной почты в ссылку, заключите их в угловые скобки.

  Обработанный вывод выглядит следующим образом:

  https://www.markdownguide.org
  [email protected]

  Форматирование ссылок

  Чтобы выделить ссылки, добавьте звездочки до и после скобок и круглых скобок. Чтобы обозначить ссылки как код, добавьте обратные кавычки в скобках.

   Мне нравится поддерживать **[EFF](https://eff.org)**.
  Это *[Руководство по уценке](https://www.markdownguide.org)*.
  См. раздел [`code`](#code).
   

  Результат визуализации выглядит следующим образом:

  Мне нравится поддерживать EFF .
  Это руководство по уценке .
  См. раздел , код .

  Ссылки в стиле ссылок

  Ссылки в стиле ссылок — это особый тип ссылок, которые упрощают отображение и чтение URL-адресов в Markdown. Ссылки в справочном стиле состоят из двух частей: часть, которую вы храните в тексте, и часть, которую вы сохраняете где-то еще в файле, чтобы текст было легко читать.

  Форматирование первой части ссылки

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

  Хотя это и не обязательно, вы можете включить пробел между первой и второй скобками. Метка во втором наборе скобок не чувствительна к регистру и может содержать буквы, цифры, пробелы или знаки препинания.

  Это означает, что следующие примеры форматов примерно эквивалентны для первой части ссылки:

  • [hobbit-hole][1]
  • [нора хоббита] [1]

  Форматирование второй части ссылки

  Вторая часть ссылки в справочном стиле форматируется со следующими атрибутами:

  1. Метка в скобках, за которой сразу следует двоеточие и как минимум один пробел (например, [метка]: ).
  2. URL-адрес ссылки, которую можно дополнительно заключить в угловые скобки.
  3. Необязательный заголовок ссылки, который можно заключить в двойные, одинарные или круглые кавычки.

  Это означает, что все следующие примеры форматов примерно эквивалентны для второй части ссылки:

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle «Образ жизни хоббита»
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle «Хоббитский образ жизни»
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (образ жизни хоббитов)
  • [1]: «Образ жизни хоббита»
  • [1]: «Образ жизни хоббита»
  • [1]: (образ жизни хоббитов)

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

  Пример соединения частей

  Допустим, вы добавили URL-адрес в качестве стандартной URL-ссылки к абзацу, и в Markdown это выглядит так:

   В норе в земле жил хоббит. Не противная, грязная, мокрая дырка, заполненная концами
  ни червей, ни гнилого запаха, ни сухой, голой, песчаной дыры, в которой не на что сесть или
  есть: это была [хоббитская нора](https://en.wikipedia.org/wiki/Hobbit#Lifestyle «Хоббитский образ жизни»), а это означает комфорт.
   

  Хотя это может указывать на интересную дополнительную информацию, отображаемый URL-адрес на самом деле мало что добавляет к существующему необработанному тексту, кроме того, что его становится труднее читать. Чтобы исправить это, вы можете вместо этого отформатировать URL-адрес следующим образом:

   В норе в земле жил хоббит. Не противная, грязная, мокрая дырка, заполненная концами
  ни червей, ни гнилого запаха, ни сухой, голой, песчаной дыры, в которой не на что сесть или
  есть: это была [нора хоббита][1], а это означает комфорт. 
  [1]:  «Образ жизни хоббитов».
   

  В обоих приведенных выше случаях визуализированный вывод будет идентичным:

  В норе под землей жил хоббит. Не противная, грязная, мокрая дыра, наполненная концами червей и гнилостным запахом, и не сухая, голая, песчаная дыра, в которой не на что присесть или поесть: это была хоббичья нора, и означает комфорт.

  , а HTML для ссылки будет следующим:

   hobbit-hole
   

  Рекомендации по ссылкам

  Приложения Markdown не согласны с тем, как обрабатывать пробелы в середине URL-адреса. Для совместимости попробуйте закодировать любые пробелы в URL с помощью %20 . В качестве альтернативы, если ваше приложение Markdown поддерживает HTML, вы можете использовать HTML-тег a .

  ✅  Сделай это	❌  Не делайте этого
  [ссылка](https://www. example.com/my%20great%20page) ссылка	[ссылка](https://www.example.com/моя замечательная страница)

  Изображения

  Чтобы добавить изображение, добавьте восклицательный знак ( ! ), замещающий текст в квадратных скобках и путь или URL-адрес ресурса изображения в скобках. При желании вы можете добавить заголовок в кавычках после пути или URL-адреса.

   ![Горы Сан-Хуан прекрасны!](/assets/images/san-juan-mountains.jpg "Горы Сан-Хуан")
   

  Результат визуализации выглядит следующим образом:

  Примечание: Чтобы изменить размер изображения, см. раздел о размере изображения. Чтобы добавить подпись, см. раздел о подписях к изображениям.

  Связывание изображений

  Чтобы добавить ссылку на изображение, заключите Markdown для изображения в квадратные скобки, а затем добавьте ссылку в круглых скобках.

   [![Старая скала в пустыне](/assets/images/shiprock.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/в/фотолист-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtUP-SXY-4CUhAL-SXY-4CUhAL fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh5kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXGNZc-8MYLmoXX5 bXMYi-bXMY6-bXMYv)
   

  Результат визуализации выглядит следующим образом:

  Экранирующие символы

  Чтобы отобразить буквенный символ, который в противном случае использовался бы для форматирования текста в документе Markdown, добавьте обратную косую черту ( \) перед персонажем.

   \* Без обратной косой черты это был бы маркер в неупорядоченном списке.
   

  Обработанный вывод выглядит следующим образом:

  * Без обратной косой черты это был бы маркер в неупорядоченном списке.

  Символы, которые можно экранировать

  Для экранирования следующих символов можно использовать обратную косую черту.

  Символ	Имя
  \	обратная косая черта
  `	обратная кавычка (см. также экранирование обратных кавычек в коде)
  *	звездочка
  _	подчеркивание
  { }	фигурные скобки
  [ ]	кронштейны
  < >	угловые скобы
  ( )	скобки
  #	знак фунта
  +	плюс
  -	знак минус (дефис)
  .	точка
  !	восклицательный знак
  |	труба (см. также выпускную трубу в таблицах)

  HTML

  Многие приложения Markdown позволяют использовать теги HTML в тексте, отформатированном в формате Markdown. Это полезно, если вы предпочитаете определенные HTML-теги синтаксису Markdown. Например, некоторым людям проще использовать теги HTML для изображений. Использование HTML также полезно, когда вам нужно изменить атрибуты элемента, например указать цвет текста или изменить ширину изображения.

  Чтобы использовать HTML, поместите теги в текст файла в формате Markdown.

   Это **слово** выделено жирным шрифтом. Это слово выделено курсивом.
   

  Визуализированный вывод выглядит следующим образом:

  Это слово выделено полужирным шрифтом. Это слово выделено курсивом.

  Рекомендации по HTML

  Из соображений безопасности не все приложения Markdown поддерживают HTML в документах Markdown. Если вы сомневаетесь, проверьте документацию вашего приложения Markdown.

  No related posts.