WinNavigator

Frigate

Norton Commander

WinNC

Dos Navigator

Servant Salamander

Turbo Browser

Winamp, Skins, Plugins

Необходимые Утилиты

Текстовые редакторы

Юмор

File managers and best utilites

Поддерживаемые форматы аудио и видео. Html5 поддержка браузерами

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

Вы можете позволить некоторые старые браузеры (не поддерживает HTML5) поддержку HTML5.

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

Современные браузеры поддерживают HTML5.

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

Из - за этого, вы можете"церковь" браузеры обрабатывать «неизвестные»HTML элементы.

Вы можете даже церковь IE6 (Windows XP 2001) браузер обрабатывает HTML неизвестные элементы.

Элемент HTML5, определяется как элемент блока

HTML5 набор из восьми новых HTML семантика (семантических) элементов. Все эти элементы являются элементами уровня блока.

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

примеров

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

Добавление нового элемента в HTML

Вы можете добавлять новые элементы в HTML.

Примеры новых элементов , добавленных в HTML, а также элементы стиля , определенный для элемента под названием <myHero>:

примеров

<! DOCTYPE HTML> <HTML> <Head> <Meta Charset = "UTF-8"> <Title> HTML , чтобы добавить новый элемент </ title> <Script>

документ. createElement ( "myHero")

</ Script> <Style>

myHero { дисплей: блок ; Цвет фона: #ddd ; Обивка: 50 точек ; Размер шрифта: 30 точек ;}

</ Style> </ Head> <Body> <h2> Мой первый заголовок </ h2> <P> Мой первый абзац. </ P> <MyHero> Мой первый новый элемент </ myHero> </ Body> </ HTML>

Попробуйте »

JavaScript заявление document.createElement ( "myHero"), чтобы добавить новый элемент в браузере IE.

вопросы обозревателя Internet Explorer

Вы можете использовать метод, описанный выше, чтобы добавить элементы HTML5 браузеры IE, но:

Internet Explorer 8 и более ранних версиях IE браузер не поддерживает более одного пути.

Мы можем использовать Сьерд Висшера создан "HTML5 Включение JavaScript", "заточку " , чтобы решить эту проблему:

<! - [Если л IE 9]> <Script SRC = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ скрипт> <! [Endif] ->

Приведенный выше код является комментарием, роль, когда браузер версии IE меньше IE9 будет читать html5.js файл и разобрать его.

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

<! - [Если л IE 9]> <Script SRC = "http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js"> </ скрипт> <! [Endif] ->

Для IE браузера html5shiv является лучшим решением. html5shiv основным решением предложены новые элементы HTML5 IE6-8 не признают эти новые элементы не могут быть обернуты в качестве родительского узла дочерних элементов, и не может применить стили CSS.

Шив идеальное решение

примеров

Render HTML5 title> </ скрипт> Head>

<Body>

<h2> Моя первая статья </ h2>

<Статья> Этот учебник - наука не только технологии, но и мечта! ! ! </ Статья>

</ Body> </ HTML>

Попробуйте »

html5shiv.js код ссылки должны быть помещены в элемент <HEAD>, так как браузер IE при разборе HTML5 новые элементы необходимо загрузить файл.

www.w3big.com

Поддерживаемые форматы аудио и видео

175

Веб-программирование --- HTML5 --- Поддерживаемые форматы аудио и видео

В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.

По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.

Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.

У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.

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

Знакомимся с форматами

Официальный стандарт HTML5 не требует, чтобы браузеры поддерживали какой-либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали такую рекомендацию, но в результате интенсивного лоббирования она была отменена.) Вследствие этого разработчики браузеров могут выбирать форматы, какие они хотят поддерживать, несмотря на то обстоятельство, что разные форматы органически несовместимы друг с другом. Список и краткое описание основных форматов, используемых в настоящее время, приведен в таблице:

Формат Описание Расширение файла MIME тип

MP3	Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera	mp3	audio/mp3
Ogg Vorbis	Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3	ogg	audio/ogg
WAV	Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений	wav	audio/wav
H.264	Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight)	mp4	video/mp4
Ogg Theora	Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей	ogv	video/ogg
WebM	Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео	webm	video/webm

В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.

Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora - звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.

Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формате H.264 или Theora. Чтобы не усложнять этот вопрос излишними подробностями, в приведенной таблице каждый видеоформат соотнесен с наиболее употребляемым для его упаковки контейнером, для которого также обеспечивается наиболее высокий уровень поддержки для Интернета.

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

Поддержка браузерами форматов мультимедиа

Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как они поддерживаются разными браузерами. Разобраться в этом вопросе вам поможет следующие таблицы, в которых показаны поддержки основными браузерами аудио- и видеоформатов:

Поддержка браузерами аудиоформатов HTML5

	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
MP3	9	24	5	3.1	-	3	-
Ogg Vorbis	-	3.6	5	-	10.5	-	-
WAV	-	3.6	8	3.1	10.5	-	-

Поддержка браузерами видеоформатов HTML5

	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
H.264	9	24	5	3.1	-	4	2.3
Ogg Theora	-	3.5	5	-	10.5	-	-
WebM	9 (при установке кодеков)	4	6	-	10.6	-	2.3

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

Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за правило кодировать его в формате H.264 Baseline Profile (а не в формате High Profile). Для телефонов iPhone и под управлением операционной системы Android следует использовать размер 640x480, а для BlackBerry — 480x360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.

Множество форматов: как понравиться всем браузерам

Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение Flash для посетителей, которые пользуются браузерами, не признающими HTML5, такими как, например, IE8.

К счастью, элементы <audio> и <video> поддерживают достаточно хорошую систему предоставления резервных решений, которая была хорошо отлажена новаторами веб-технологий. Но, к сожалению, война форматов означает, что содержимое нужно будет кодировать, по крайней мере, дважды, что является затратным процессом по времени, процессорным ресурсам и дисковому пространству.

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

Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного

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

Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного

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

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

Элемент <source>

Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента <video> или <audio> и замена его вложенным списком элементов <source>. Например:

В данном случае элемент <audio> содержит два элемента <source>, каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome - файл mysong.mp3.

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

Этот же метод применяется и для элемента <video>. В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:

В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате H.264 всегда должен быть в списке первым. В противном случае он не будет проигрываться на старых устройствах iPad под управлением iOS 3x. (Эта проблема была решена в операционной системе iOS 4, но размещение файла H.264 вверху списка ничем ничему не вредит.)

Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы необходимо использовать форматы H.264 и Theora для основного решения HTML5 и Flash для резервного. Для лучшего качества видео формат Theora можно заменить форматом WebM. Или же можно совсем разойтись и включить все версии своего видео — H.264, Theora и WebM в указанном порядке. Версия WebM идет перед версией Theora для того, чтобы браузеры, которые поддерживают эти формата, выбрали видео лучшего качества.

Ну а если гулять по полной программе, то можно создать одну веб-страницу с видео как для настольных компьютеров, так и для мобильных устройств. В таком случае нужно не только предоставить файлы в формате H.264 и Theora, но также создать версии видеофайлов меньшего объема, более подходящие для менее мощных мобильных устройств и интернет-подключений с меньшей пропускной способностью.

Резервное решение Flash

Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково - игнорируют их. Например, если Internet Explorer 8 встречается открывающий тег элемента <video>, он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p> </video>

браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:

<p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p>

Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.

Теперь, после того как мы научились вставлять резервное содержимое, надо решить, какое именно содержимое вставлять. Одним из примеров плохого резервного содержимого будет текстовое сообщение, наподобие предыдущего "Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5". Посетители веб-сайтов считают сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на сайт, приветствующий их таким образом.

Правильный подход — это включить в качестве резервного содержимого другое работоспособное видеоокно, иными словами, любое содержимое, которое бы пользовалось на обычной видеостранице, т.е. странице без поддержки HTML5. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.

В следующем листинге приведен пример использования в качестве резервной решения в элементе <video> проигрывателя Flowplayer:

Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента <object>, в который вставляем элемент <video> непосредственно перед закрытием тега </object>:

Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.

professorweb.ru

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

Вы можете научить старые браузеры корректно обрабатывать HTML5.

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

HTML5 поддерживается во всех современных браузерах.

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

Из - за этого, вы можете "teach" старые браузеры для обработки "unknown" HTML элементов.

Вы даже можете научить IE6 (Windows XP 2001) , (Windows XP 2001) , как обрабатывать неизвестные HTML элементы.

Определить HTML5 элементы, как элементы блока

HTML5 определяет восемь новых семантических HTML элементов. Все эти элементы уровня блока.

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

header, section, footer, aside, nav, main, article, figure { display: block; }

Добавление новых элементов в HTML

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

В этом примере добавляется новый элемент с именем <myHero> в HTML, и определяет стиль отображения для него:

пример

Creating an HTML Element document.createElement("myHero") myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }

<h2>My First Heading</h2>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body></html>

Попробуй сам "

Оператор JavaScript document. createElement("myHero") document. createElement("myHero") добавляется, только для удовлетворения IE.

Проблема с Internet Explorer

Вы можете использовать решение, описанное выше, для всех новых элементов HTML5, но:

Internet Explorer 8 и выше, не позволяет моделирование неизвестных элементов.

К счастью, Сджоэрд Вишшер создал "HTML5 Enabling JavaScript" , « the shiv »:

Код выше , является комментарием, но версия предыдущей в IE9 будет читать (and understand it) .

Полное Shiv решение

пример

Styling HTML5

<h2>My First Article</h2>

<article>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</article>

</body></html>

Попробуй сам "

Ссылка на shiv код должен быть помещен в <head> элемент, так как Internet Explorer должен знать обо всех новых элементов , прежде чем читать их.

HTML5 Скелет

пример

HTML5 Skeleton

<header> <h2>HTML5 SKeleton</h2></header>

<nav><ul> <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li> <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li> <li><a href="html5_canvas.asp">HTML5 Graphics</a></li></ul></nav>

<h2>Famous Cities</h2>

<article><h3>London</h3><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></article>

<article><h3>Paris</h3><p>Paris is the capital and most populous city of France.</p></article>

<article><h3>Tokyo</h3><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></article>

</section>

</body></html>

Попробуй сам "

www.w3im.com

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

Вы можете научить старые браузеры корректно обрабатывать HTML5.

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

HTML5 поддерживается во всех современных браузерах.

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

Из-за этого, вы можете "научить" старые браузеры обрабатывать «неизвестные» HTML элементы.

Вы даже можете научить IE6 (Windows XP, 2001), как обрабатывать неизвестные HTML элементы.

Определение элементов HTML5 как блочные элементы

HTML5 определяет восемь новых семантических HTML элементов. Все эти элементы уровня блока.

header, section, footer, aside, nav, main, article, figure { display: block; }

Добавление новых элементов в HTML

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

В этом примере добавляется новый элемент с именем <myHero> в HTML, и определяет стиль отображения для него:

пример

Creating an HTML Element document.createElement("myHero") myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }

<h2>My First Heading</h2>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body> </html>

Попробуй сам "

JavaScript заявление document.createElement("myHero") добавляется, только для удовлетворения IE.

Проблема с Internet Explorer

Можно использовать раствор, описанный выше, для всех новых элементов HTML5, но:

Internet Explorer 8 и более ранних версий, не допускает укладку неизвестных элементов.

К счастью, Сьерд Висшера создал "HTML5 Включение JavaScript", " the shiv ":

Приведенный выше код является комментарием, но предыдущими версиями до IE9 будет читать (и понимать).

Полное Shiv решение

пример

Styling HTML5

<h2>My First Article</h2>

<article>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</article>

</body> </html>

Попробуй сам "

HTML5 Скелет

пример

HTML5 Skeleton

<header> <h2>HTML5 SKeleton</h2></header>

<h2>Famous Cities</h2>

<article><h3>London</h3><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></article>

<article><h3>Paris</h3><p>Paris is the capital and most populous city of France.</p></article>

<article><h3>Tokyo</h3> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p></article>

</section>

</body></html>

Попробуй сам "

www.w3ii.com

HTML5 Новые теги, поддержка браузерами p.2

<mark>текст</mark>

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mark</title> <style> mark { background: #ffec82; padding: 0 3px; border: 1px dashed #333; } </style> </head> <body> <header> <h2>Следы невиданных зверей</h2> </header> <article> История о том, как возле столовой появились загадочные розовые следы с <mark>шестью пальцами</mark>, и почему это случилось. </article> </body> </html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Атрибуты

label - Устанавливает видимую метку для меню.type - Задает тип меню.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег MENU</title> </head> <body> <p><strong>В этом выпуске:</strong></p> <menu> <li>Русская кухня. Уха бурлацкая</li> <li>Украинская кухня. Вареники</li> <li>Молдавская кухня. Паприкаш</li> <li>Кавказская кухня. Суп-харчо</li> <li>Прибалтийская кухня. Вертиняй</li> </menu> </body> </html>

Пример 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег MENU</title> </head> <body> <menu type="toolbar"> <li> <menu label="Файл"> <button type="button">Новый...</button> <button type="button">Открыть...</button> <button type="button">Сохранить</button> </menu> </li> <li> <menu label="Правка"> <button type="button">Копировать</button> <button type="button">Вырезать</button> <button type="button">Вставить</button> </menu> </li> </menu> </body> </html>

Браузеры

Поддерживают полностью.

<meter value="значение">текст</meter>

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

Атрибуты

value - Устанавливает значение. Обязательный атрибут.min - Задает минимально возможное значение.max - Задает максимально возможное значение.low - Определяет предел, при достижении которого значение считается низким.high - Определяет предел, при достижении которого значение считается высоким.optimum - Определяет наилучшее или оптимальное значение.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>meter</title> </head> <body> <p>Температура воды</p> <meter value="0" max="100" low="10" high="60">Низкая</meter> <meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter> </body> </html>

Браузеры

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

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox -

<nav>ссылки</nav>

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nav</title> </head> <body> <header> <h2>Чебурашка и крокодил Гена</h2> </header> <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> | <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav> <article> <h3>Добро пожаловать!</h3> </article> </body> </html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

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

Атрибуты

for - Определяет идентификатор одного и более элементов для связывания с тегом <output>.form - Задает имя формы, которой принадлежит область для вывода.name - Задает уникальное имя элемента.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>output</title> </head> <body> <form> <p>Введите длину в сантиметрах: <input type="number" name="cm" autofocus="autofocus" /></p> <p>Длина в дюймах: <output name="result" onforminput="this.value=(this.form.cm.value/2.54).toFixed(2)">0</output></p> </form> </body> </html>

Браузеры

Internet Explorer -

Chrome -

Opera 9.6-11.0

Safari -

Firefox -

<progress value="<число>" max="<число>"> Текст </progress>

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Атрибуты

value - Текущее значение прогресса.max - Максимальное значение прогресса.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>progress</title> </head> <body> <p>Пожалуйста, подождите, фотографии загружаются.</p> <progress max="100" value="25"> Загружено на <span>25</span>% </progress> </body> </html>

Браузеры

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox 6.0-7.0

<ruby> текст <rp>текст</rp><rt>аннотация</rt><rp>текст</rp> </ruby>

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rp</title> </head> <body> <p> <ruby> 字 <rp>(</rp><rt>zì</rt><rp>)</rp> </ruby> </p> </body> </html>

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

<ruby> текст <rt>аннотация</rt> </ruby>

Тег <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

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

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>rt</title> <style> .date { font-size: 1.5em; } .date ruby { background: #0078c9; color: #fff; } .date rt { background: #a0dae8; color: #000; padding: 2px; } </style> </head> <body> <p> <ruby> 23<rt>ноябрь</rt></ruby> </p> </body> </html>

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

<ruby> текст <rt>аннотация</rt> </ruby>

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

Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>.

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

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ruby</title> <style> p:lang(zh-CN) { font-size: 2em; } </style> </head> <body> <p lang="zh-CN"> <ruby> 汉<rt>hàn</rt> 字<rt>zì</rt> </ruby> </p> </body> </html>

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

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

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег <section> внутрь другого.

Атрибуты

cite - Адрес раздела, если он берется с другого сайта

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <section> <h2>Съёмки фильма Полипропилен</h2> <p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p> </section> <section> <h2>Хороший язык</h2> <p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p> </section> </body> </html>

Браузеры

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

Internet Explorer до версии 8.0 включительно игнорирует тег <section>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору SECTION.

Атрибуты

media - Определяет устройство, для которого будет воспроизводиться файл.src - Адрес файла.type - MIME-тип медийного источника.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>source</title> </head> <body> <video controls="controls"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>

Браузеры

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 11.0

Safari 3.1-5.0

Firefox 4.0-6.0

<details> <summary>Текст</summary> </details>

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>summary</title> </head> <body> <details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details> </body> </html>

Браузеры

Internet Explorer -

Chrome 12.0-13.0

Opera -

Safari -

Firefox -

<time>дата и время</time> <time datetime="<дата и время>">текст</time>

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Атрибуты

datetime - Задает дату, время или оба значения для текста.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>time</title> <style> time { background: #f0f0f0; } </style> </head> <body> <article> <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p> <p><time>1960-08-19</time> первый полет собак в космос.</p> <p><time>1961-04-12</time> первый полет человека в космос.</p> <p><time>1963-06-16</time> первый полет женщины-космонавта.</p> <p><time>1969-07-21</time> высадка человека на Луну.</p> </article> </body> </html>

Браузеры

Браузеры, которые не поддерживают тег <time> отображает его содержимое. Браузеры с поддержкой тега могут устанавливать для элемента стилевое оформление.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в таблице.

Аудио кодеки/Браузеры	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis	-	+	+	-	+
wav	/p -	-	+	+	+
mp3	+	+	-	+	-
AAC	+	+	-	+	-

Видео кодеки/Браузеры	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/theora	-	+	+	-	+
H.264	+	+	-	+	-
WebM	-	+	+	-	+

Атрибуты

autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.controls - Добавляет панель управления к видеоролику.height - Задает высоту области для воспроизведения видеоролика.loop - Повторяет воспроизведение видео с начала после его завершения.poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится.preload - Используется для загрузки видео вместе с загрузкой веб-страницы.src - Указывает путь к воспроизводимому видеоролику.width - Задает ширину области для воспроизведения видеоролика.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video controls="controls" poster="video/duel.jpg"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 10.50-11.0

Safari 3.1-5.0

Firefox 4.0-6.0

Текст<wbr>текст

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег WBR</title> <style> .word { font-size: 2em; } wbr { display: inline-block; } </style> </head> <body> <p>Самое длинное слово из химии</p> <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p> </body> </html>

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса .

Internet Explorer 8 и Opera не делают переносы длинной строки, пока в стилях для WBR не указано свойство display со значением inline-block, как показано в примере.

Internet Explorer 6.0-9.0 (8.0 возможны баги)

Chrome 10.0-13.0

Opera 9.6-11.0 (возможны баги)

Safari 3.1-5.0

Firefox 3.0-6.0

Информация взята с htmlbook.ru

vaccina.net

Смотрите также

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..