Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


-->

HTML Атрибут media



Определение и использование media

Атрибут media указывает, для какого носителя/устройства оптимизирован связанный документ.

Атрибут media используется для указания того, что целевой URL предназначен для специальных устройств (например, iPhone), речевых или печатных носителей.

Атрибут media может принимать несколько значений.



Применение media

Атрибут media можно использовать для следующих элементов:

Элемент Атрибут
<a> media
<area> media
<link> media
<source> media
<style> media

Примеры media

Пример A

Ссылка с атрибутом media:

<a href="att_a_media.php"
media="print and (resolution:300dpi)">
Открыть страницу атрибутов носителя для печати.</a>
Попробуйте сами »
Пример Area

Карта-изображение с кликабельной областью:

<img src="planets.gif" width="145" height="126" alt="Планеты" usemap="#planetmap">

<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" alt="Солнце"
href="sun.html" media="screen and (min-color-index:256)">
</map>
Попробуйте сами »
Пример Link

Две разные таблицы стилей для двух различных типов носителей (экран и печать):

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Попробуйте сами »
Пример Source

Использование атрибута media:

<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Попробуйте сами »
Пример Style

Укажите стиль для печати:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}

</style>
Попробуйте сами »

Поддержка браузеров media

Атрибут media имеет следующую поддержку браузера для каждого элемента:

Элемент
a Да Да Да Да Да
area Да Да Да Да Да
link Да Да Да Да Да
source Не поддерживает Не поддерживает Не поддерживает Не поддерживает Не поддерживает
style Да Да Да Да Да