5. Важные особенности

• Каскадность: Стили внутри @media переопределяют базовые, если условие выполняется.

• Порядок имеет значение: Если два медиазапроса конфликтуют, применится тот, который объявлен ниже в CSS.

• Производительность: Браузер всё равно загружает весь CSS, но применяет только нужные стили.

Вывод

Медиазапросы @media работают как фильтры: браузер проверяет условия (размер экрана, тип устройства и т. д.) и применяет стили только если они соответствуют текущим параметрам. Это основа адаптивного дизайна, позволяющая создавать гибкие, удобные интерфейсы для любых устройств! 📱💻🖥️

Какие атрибуты доступны для тэга <a>?

Тег <a> (гиперссылка) — один из самых важных элементов HTML, используемый для создания ссылок. Вот полный список его атрибутов с пояснениями:

Основные атрибуты

1. href (обязательный для обычных ссылок)

   • Указывает URL или якорь (#section), куда ведёт ссылка.

   • Пример:

html

Copy

Download

Run

<a href="https://example.com">Ссылка</a>

<a href="#contacts">Якорь</a>

2. target

   • Определяет, где открыть ссылку:

     • _self (по умолчанию) — в текущей вкладке.

     • _blank — в новой вкладке/окне.

     • _parent / _top — во фреймах (устаревшее).

   • Пример:

html

Copy

Download

Run

<a href="https://example.com" target="_blank">Новая вкладка</a>

3. rel

   • Задает отношения между текущей и целевой страницами. Важные значения:

     • noopener — защита от window.opener-атак при target="_blank".

     • noreferrer — скрывает реферер (источник перехода).

     • nofollow — запрещает поисковикам переходить по ссылке (для SEO).

   • Пример:

html

Copy

Download

Run

<a href="https://example.com" rel="noopener noreferrer">Безопасная ссылка</a>

4. download

   • Заставляет браузер скачивать файл вместо перехода.

   • Можно указать имя файла:

html

Copy

Download

Run

<a href="/file.pdf" download="document.pdf">Скачать PDF</a>

Дополнительные атрибуты

5. title

   • Всплывающая подсказка при наведении.

   • Пример:

html

Copy

Download

Run

<a href="#" title="Подробнее...">Наведи на меня</a>

5. hreflang

   • Язык целевой страницы (например, en, ru).

   • Пример:

html

Copy

Download

Run

<a href="https://example.com/es" hreflang="es">Español</a>

5. type

   • MIME-тип ресурса (например, type="application/pdf" для PDF-файлов).

   • Пример:

html

Copy

Download

Run

<a href="/file.pdf" type="application/pdf">PDF-документ</a>

5. ping (редко используется)

   • Отправляет POST-запросы на указанные URL при переходе (для отслеживания кликов).

   • Пример:

html

Copy

Download

Run

<a href="https://example.com" ping="/track">Ссылка с трекингом</a>

5. referrerpolicy

   • Контролирует, какой реферер (источник перехода) отправляется:

     • no-referrer — не отправлять.

     • origin — только домен.

   • Пример:

html

Copy

Download

Run

<a href="https://example.com" referrerpolicy="no-referrer">Без реферера</a>

5. media (для <a> с rel="stylesheet")

   • Указывает, для каких устройств подходит CSS-файл (аналогично @media).

   • Пример:

html

Copy

Download

Run

<a href="print.css" rel="stylesheet" media="print">Стили для печати</a>

Устаревшие/не рекомендуемые атрибуты

• charset (кодировка, лучше указывать в <meta>).

• coords / shape (для карт-изображений, устарело).

• name (используйте id для якорей).

• rev (обратное отношение, почти не используется).

Специфические атрибуты для email и tel

• mailto: — ссылка на email:

html

Copy

Download

Run

<a href="mailto:test@example.com">Написать нам</a>

• tel: — ссылка на номер телефона (работает на мобильных):

html

Copy

Download

Run

<a href="tel:+79001234567">Позвонить</a>

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

html

Copy

Download

Run

<a

href="https://example.com"

target="_blank"

rel="noopener noreferrer nofollow"

title="Откроется в новой вкладке"

hreflang="en"

type="text/html"

referrerpolicy="no-referrer"

>

Пример ссылки

</a>

Важно!

• Всегда добавляйте rel="noopener" при target="_blank" для безопасности.

• Для SEO используйте nofollow на внешних ссылках, если не хотите передавать "вес" страницы.

• Атрибут download не работает с кросс-доменными URL.

Ссылки — основа веба, и правильное использование их атрибутов улучшает безопасность, UX и SEO вашего сайта! 🔗🚀

Как добавляются ссылки на почту и мобильные телефоны? Какой атрибут и значение отвечают за открытие ссылки в новом окне?

1. Ссылка на email (mailto:)

Чтобы создать кликабельную ссылку на электронную почту, используйте протокол mailto: в атрибуте href. Формат:

html

Copy

Download

Run

<a href="mailto:email@example.com">Написать нам</a>

Дополнительные параметры:

• Тема письма (subject):

html

Copy

Download

Run

<a href="mailto:email@example.com?subject=Вопрос по заказу">Написать</a>

• Текст письма (body):

html

Copy

Download

Run

<a href="mailto:email@example.com?body=Здравствуйте, у меня вопрос...">Написать</a>

• Несколько получателей (через запятую):

html

Copy

Download

Run

<a href="mailto:email1@example.com,email2@example.com">Копия письма</a>

2. Ссылка на телефон (tel:)

Для кликабельных номеров телефонов (работает на мобильных устройствах) используйте протокол tel:. Формат:

html

Copy

Download

Run

<a href="tel:+79001234567">Позвонить нам</a>

Важно:

• Указывайте номер в международном формате (с + и кодом страны).

• На ПК ссылка может не работать, но на смартфонах откроет набор номера.