Как использовать ссылки mailto: и tel: — Блог HTML Academy
Ссылки tel:
нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto:
можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.
Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.
mailto:
Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.
<a href="mailto:[email protected]">Напишите нам</a>
Текст письма указывается с помощью параметра body
<a href="mailto:[email protected]&body=привет">Напишите нам</a>
За тему письма отвечает параметр subject
.
<a href="mailto:[email protected]&body=привет?subject=вопрос">Напишите нам</a>
Можно даже указать кого-то в копии, для этого используются параметры cc
и bcc
.
<a href="mailto:[email protected]&[email protected]?body=Привет, подпишитесь на рассылку">Напишите нам</a>
Что произойдёт, если кликнуть на ссылку с
mailto
Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:
Если почтовая программа по умолчанию не установлена, появится окно выбора программы.
Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в >RFC 6068
Как стилизовать mailto
Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — Хорошим тоном считается указание в Хорошо В Чуть хуже В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания. Плохо Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё. Другое обязательное требование RFC 3966 — номер телефона, указанный в Хорошо Номер видно в тексте ссылки. Плохо Номер не видно в тексте ссылки, непредсказуемое поведение. На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства. ="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
} Получится такой результат: ❮ Предыдущая
❮ Ссылка на объект местоположения
Далее ❯ Получить URL текущей страницы: let url = location.href; Попробуйте сами » Установите URL текущей страницы: location.href = "https://www.w3schools.com"; Попробуйте сами » Другие примеры ниже. Свойство Возврат свойство Href: Location.Href Установите свойство HREF: Место. Относительный URL-адрес, например URL-адрес привязки, например Новый протокол, например: Установите значение href так, чтобы оно указывало на якорь на странице: location.href = "#top";a[href^="mailto:"]. ="mailto:"] {
font-size: 16px;
line-height: 32px;
color: #000000;
}
tel:
tel:
.<a href="tel:+79001111111">+7-900-111-11-11</a>
href
кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:<a href="tel:+78121111111">(812) 123-45-67</a>
href
указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.<a href="tel:+78121111111">123-45-67</a>
<a href="tel:1234567">123-45-67</a>
href
, должен быть явно виден на странице.Звоните <a href="tel:+79001111111">8-900-111-11-11</a> по любому поводу.
<a href="tel:+79001111111">Звоните</a> по любому поводу.
Что произойдёт, если кликнуть на ссылку с tel
Дополнительные материалы по теме
Ещё о вёрстке
Местоположение href Недвижимость
Примеры
Определение и использование
location.href
устанавливает или возвращает полный URL-адрес текущей страницы. Синтаксис
Описание URL-адрес Абсолютный URL-адрес, например:
http://www.example.com/default.htm
default.htm
location.href="#top"
ftp://someftpserver.com
mailto:[email protected]
file://host/path/example.txt Возвращаемое значение
Тип Описание Строка Полный URL-адрес страницы, включая протокол (например, https://). Дополнительные примеры
Установите значение href так, чтобы оно указывало на адрес электронной почты (откроется и будет создан новый сообщение электронной почты):
location. href = "mailto:[email protected]";
Попробуйте сами »
Поддержка браузеров
location.href
поддерживается во всех браузерах:
Хром | Край | Фаерфокс | Опера | ИЭ | |
Да | Да | Да | Да | Да | Да |
❮ Предыдущий ❮ Ссылка на объект местоположения Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Практическое руководство
Учебное пособие по SQL
Учебник по Python
Учебник по W3.
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
5 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры jQuery
FORUM 90 | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
- JavaScript - Форумы SitePoint
ameerulislam
1
Я только что изучал шаблон и увидел, что в атрибуте href есть пустой javascript:{}. Кажется, это мало что дало. Это просто заполнитель или какой-то комментарий, что эта навигация работает с javascript?
Обратите внимание, что он был обнаружен в vav-ссылках с неупорядоченными списками, как показано ниже.
PicnicTutorials
2
Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого
амерулислам
3
Эрик Уотсон:
Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого
да вроде ничего не делает.
ральф
4
Удалите его и забудьте, что когда-либо его видели. В любом случае встроенный JS — это мусор, и ему нечего делать вместо правильного URL-адреса.
фелгалл
5
Это даже не правильный встроенный JavaScript. Размещение JavaScript там не дает ему никакого доступа к информации о событии, вызвавшем запуск кода.
Он также предоставляет неработающую ссылку для всех, у кого не включен JavaScript.
амируислам
6
Спасибо, ребята, но не могли бы вы, ребята, сказать мне, что лучше оставить пустой href или href с # ? Или не важно!?
ральф
7
амерулислам:
лучше оставить пустой href или href с # ? Или не важно!?
Если щелкнуть ссылку с пустым href, вы получите сообщение об ошибке, а при нажатии на ссылку с символом # в качестве значения href просто перенесет вас наверх страницы, поэтому последний вариант лучше.
Редактировать:
Хм, я думал, что это так, но подумал, что лучше проверить, и это не так — нет сообщения об ошибке, когда href пустой. Но все же…
… реальный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.
амируислам
8
ральф_м:
Но главный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.
Только для временного использования. Для демонстрационных шаблонов. Ты знаешь что.
ральф
9
амерулислам:
Только для временного использования. Для демонстрационных шаблонов.
Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.
Вы это знаете.
Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript. Однако это паршивое кодирование, поскольку эти ссылки бесполезны с выключенным JS, что свидетельствует о плохой методологии кодирования.
амируислам
10
ральф_м:
Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.
Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript.