Меню сайта
    • Free Soft по категориям
    • Клипарт
    • Справочник HTML тегов
    • Справочник CSS
    • Телевидение online
    • Потоковые радиостанции
    • Сборник mp3
    • Информация о сайте
    • Гостевая книга
    • Обратная связь
    • Видео
    • Каталог всех материалов сайта
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Приработок в интернете!
  • Уникальное место! Здесь можно легко заработать реальные деньги.
  • К вашим услугам несколько методов заработка!
  • Просматривайте сайты, читайте письма рекламодателей, выполняйте несложные и интересные тесты и задания за вознаграждение.
  • Вы сможете получить свои первые деньги уже сразу после начала работы.
  • Кликайте по баннеру ниже и начинайте работать!
SEO sprint - Всё для максимальной раскрутки!

Справочник HTML тегов

по алфавиту  /  по категориям
<!DOCTYPE> <!-- --> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdo> <bgsound> <blockquote> <big> <body> <blink> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <comment> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <form> <footer> <frame> <frameset> <h1> <h2> <h3> <h4><h5><h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <marquee> <mark> <menu> <meta> <meter> <nav> <nobr> <noembed> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <plaintext> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <span> <source> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <tt> <u> <ul> <var> <video> <wbr> <xmp>
Теги HTML5
<!DOCTYPE> <!-- --> <a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <command> <comment> <datalist> <dd> <del> <details> <dfn> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <form> <footer> <h1> <h2> <h3> <h4><h5><h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <plaintext> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <span> <source> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <ul> <var> <video> <wbr>
Устаревшие теги
<acronym> <applet> <basefont> <bgsound> <big> <blink> <center> <dir> <frame> <frameset> <marquee> <nobr> <noembed> <noframes> <plaintext> <strike> <tt> <u> <xmp>
Справочник HTML для сайта uCoz.
Так как все модели сайтов имеют одну и ту же структуру написания веб страниц, справочник может быть полезен не только вебмастеру uCoz. В справочнике описаны теги, соответствующие актуальности в HTML5, не вошедшие в HTML5 теги, считаются устаревшими.
Желаю Вам удачи, уважаемые сайтостроители!







Тег <!DOCTYPE> указывает тип документа

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

Синтаксис тега <!DOCTYPE> (закрывающий тэг обязателен)


<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Пояснение синтаксиса


Элемент верхнего уровня - указывает на элемент верхнего уровня в документе, для документа HTML это тег

Публичность - объект является публичным (PUBLIC) или системным (SYSTEM)

Регистрация - сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) - разработчик не зарегистрирован. Для W3C значение ставится (-)

Организация - уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>

Тип - тип документа,для HTML и XHTML значение указывается DTD

Имя - имя документа для описания DTD

Язык - язык на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML и XHTML указывается английский язык (EN)

URL - адрес документа с DTD


Варианты тега (закрывающий тег не обязателен )

Стандарт HTML 4.01 Strict
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Строгий тип документа в котором отсутствуют устаревшие и неодобряемые теги (лучше не применять просто так)

Стандарт HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Переходный тип документа в котором присутствуют все теги (подходит больше остальных)

Стандарт HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Для типа документов в которых используются фреймы (лучше не применять просто так)

Стандарт XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Строгий тип документа в котором отсутствуют устаревшие атрибуты тегов (лучше не применять просто так)

Стандарт XHTML 1.0 Transitional
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Переходный тип документа в котором есть устаревшие атрибуты тегов (подходит больше остальных)

Стандарт XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Для типа документов в которых используются фреймы (лучше не применять просто так)

Стандарт XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Модульный тип документа без устаревших тегов и атрибутов (лучше не применять просто так)

Стандарт XHTML Basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd">

Тип документа для мобильных устройств (лучше не применять просто так)

Стандарт HTML 5
<!DOCTYPE html>

Тип документа составленного с применением тегов HTML5 (лучше не применять, если компоновка не соответствует типу)

Значение тега для сайта uCoz


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Подходит для модулей сайта, можно вписать его в настройках модуля, после этого он пропишется на всех страницах модуля

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Подходит для модулей сайта, можно вписать его в настройках модуля, после этого он пропишется на всех страницах модуля

<!DOCTYPE html>

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


Тег <!-- -->

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

Синтаксис тега

<!-- --> (закрывающий тэг обязателен)
<!-- Комментарий -->

Тег работает в браузерах



Пример применения тега

<!DOCTYPE html>
<html>
<head>
<title>Тэг <!-- --></title>
</head>
<body>
<header>
<h1>Тэг <!-- --></h1>
</header>
<!-- Картинка -->
<div align="center">
<figure>
<img src="http://free20860soft.narod.ru/kartinka.jpg">
</figure>
</div>
<!-- /Картинка -->
</body>
</html>

<a>

Тег предназначен для ссылок, в HTML5 количество атрибутов поубавилось. Тег поддерживает глобальные атрибуты,а так же атрибуты событий в Html5.

Синтаксис тега <a> (закрывающий тэг обязателен)

<a href="URL">Описание</a>
<a id="Имя" class="Имя">Описание</a>

Тег работает в браузерах



Атрибуты тега <a>

Атрибут href

Это обычная ссылка,вписываем адрес + добавляем описание

<a href="Адрес" >Описание</a>

Это ссылка якорь указываем имя id якоря (на английском или цыфры)

<a id="Имя">Описание</a>

Это ссылка на якорь id,после # вписываем его имя (которое дали) + добавляем описание

<a href="#Имя">Описание</a>
Атрибут rel

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

alternate

Альтернативный вариант документа

author

Ссылка на страницу автора

bookmark

Адрес для закладок

external

Ссылка на внешний документ

help

Ссылка на документ с помощю

license

Ссылка на информацию о лицензии

next

Ссылка на следующий документ

nofollow

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

noreferrer

Указывает что браузер не должен посылать заголовок HTTP Referer

prefetch

Указывает что документ на который ведёт ссылка должен кэшироваться

prev

Ссылка на предыдущий документ

search

Ссылка для поиска

sidebar

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

tag

Теги имеющие отношение к ссылке

Атрибут target

Этот атрибут определяет как (в каком окне) открывать документ

_blank

Открывает связанный документ в новом окне

_self

Открывает связанный документ в родительском окне

_parent

Открывает связанный документ в родительском фрейме

_top

Открывает связанный документ в полном окне

Фрейм

Открывает связанный документ в указанном фрейме

Атрибут type

Этот атрибут указывает на тип конечного документа


Пример применения тега

<!DOCTYPE html>
<html>
<head>
<title>Тэг <a></title>
</head>
<body>
<!-- Картинка - ссылка -->
<div align="center">
<figure>
<a http://free-softec.ucoz.ru/" target="_blank">
<img src="http://free20860soft.narod.ru/images/image_html/sobachka.gif">
</a>
</figure>
</div>
<!-- /Картинка - ссылка -->
</body>
</html>

Пример в действии - кликните по картинке.



Тег <abbr> добавляет описание абревиатуре



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



Синтаксис тега <abbr> (закрывающий тэг обязателен)

<abbr>Описание</abbr>

Тег работает в браузерах






Атрибуты тега <abbr>

Атрибут title

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

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег abbr в HTML5</title>
</head>
<body>
<article>
<abbr title="Курий Евгений Васильевич">Вебмастеринг</abbr>
</article>
</body>
</html>


Пример в действии

Подведите мышку к слову


Вебмастеринг

Тег <acronym> добавляет акронимум абревиатуре



Тег <acronym> добавляет описание акронимум абревиатуре, а через атрибут дополняет подсказкой при наведении мышки, на подобии хинта. Акронимум, разновидность абревиатуры интерпретирующей слова в словосочетания и наоборот. Текст заключенный в теге <acronym> подчеркивается пунктирной линией. Не поддерживается в HTML5, вместо него следует применять тег <abbr>.



Синтаксис тега <acronym> (закрывающий тэг обязателен)


<acronym>Описание</acronym>

Тег работает в браузерах




Атрибуты тега <acronym>

Атрибут title

Атрибут добавляет пояснение абревиатуре акронимума

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег acronym</title>
</head>
<body>
<article>
<acronym title="Центральный универмаг">ЦУМ</acronym>
</article>
</body>
</html>

Тег <adress> предназначен для дополнительной личной информации



Тег <adress> предназначен для дополнительной личной информации включая адрес, телефон, е-майл, скайп и т.д. Для добавления контактной информации о материале с другого сайта прописывается внутри тега <article>. Браузеры делают разрыв строки перед и после тега <adress>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <adress> (закрывающий тэг обязателен)


<adress>Информация</adress>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг adress</title>
</head>
<body>
<header>
<h3>Тэг adress</h3>
</header>
<adress>
Курий Евгений
<a href="mailto:evk@mail.ru">Е-майл</a>
Белгородская область
г. Строитель<br>
</adress>
</body>
</html>


Пример в действии


Курий Евгений Е-майл Белгородская область г. Строитель

Тег <applet> предназначен для установки аплетов



Тег <applet> предназначен для установки аплетов,программ написаных на языке Java.Тег давно устарел и вместо него используется тег <object>.



Синтаксис тега <applet> (закрывающий тэг обязателен)


<applet>code="URL"</applet>

Тег работает в браузерах




Тег <area> добавляет ссылочную разметку



Тег <area> служит для добавления на страницу с изображением ссылочную разметку, т.е устанавливая координаты ссылкам, Вы можете распределить изображение по зонам, в рамках которых будет действовать ссылка. Прописывается всегда внутри тега <map>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <area> (закрывающий тэг не обязателен)


<map><area href="URL"></map>

Тег работает в браузерах





Атрибуты тега <area>

Атрибут alt

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

Является обязательным если указан атрибут href.

Атрибут coords

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

Атрибут href

Указывает адрес для использования

Атрибут rel

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

alternate

Альтернативный вариант документа

author

Ссылка на страницу автора

bookmark

Адрес для закладок

external

Ссылка на внешний документ

help

Ссылка на документ с помощю

license

Ссылка на информацию о лицензии

next

Ссылка на следующий документ

nofollow

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

noreferrer

Указывает что браузер не должен посылать заголовок HTTP Referer

prefetch

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

prev

Ссылка на предыдущий документ

search

Ссылка для поиска

sidebar

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

tag

Теги имеющие отношение к ссылке

Атрибут shape


default

Определяет всю область изображения

rect ▼


Порядок написания координат в значении rect -> X1 -> Y1 -> X2 -> Y2

circle ▼


Порядок написания координат в значении circle -> X -> Y -> R

poly ▼


Порядок написания координат в значении poly -> X1 -> Y1 -> X2 -> Y2 -> X3 -> Y3


Атрибут target

Этот атрибут определяет как ( в каком окне ) открывать документ

_blank

Открывает связанный документ в новом окне

_self

Открывает связанный документ в родительском окне

_parent

Открывает связанный документ в родительском фрейме

_top

Открывает связанный документ в полном окне

Фрейм

Открывает связанный документ в указанном фрейме

Атрибут type

Этот атрибут указывает на тип конечного документа

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг area</title>
</head>
<body>
<div align="center">
<figure>
<img src ="/html/img/map-area.jpg" width="428"
height="656" alt="1234" usemap ="#1234">
<map name="1234">
<area shape="rect" coords="0,0,200,200" href="/html/demo/map-area-gus.html" alt="1">
<area shape="rect" coords="0,228,200,428" href="/html/demo/map-area-lebed.html" alt="2">
<area shape="rect" coords="0,456,200,656" href="/html/demo/map-area-induk.html" alt="3">
<area shape="rect" coords="228,0,428,200" href="/html/demo/map-area-green.html" alt="4">
</map>
</figure>
</div>
</body>
</html>


Пример в действии


1234 1 2 3 4

Тег <article> предназначен для импортируемого материала



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



Синтаксис тега <article> (закрывающий тэг обязателен)


<article>Элемент</article>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег article в HTML5</title>
</head>
<body>
<header>
<h1>Тэг article в HTML5</h1>
</header>
<article>
Тег для обозначения материала импортируемого с другого сайта.
Материалом может быть не только текст. Им может быть любой элемент с содержимым вне зависимости от его функциональных возможностей.
</article>
</body>
</html>


Пример в действии


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

Тег <aside> создаёт дополнительное поле



Тег <aside> служит для добавления на страницу дополнительного поля. В дополнительном поле может содержатся что угодно. Для дополнительного поля нужно прописывать индивидуальные стили. Тег поддерживает глобальные атрибуты в HTML5



Синтаксис тега <aside> (закрывающий тэг обязателен)


<aside>Элемент</aside>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег aside в HTML5</title>
<style>
article {
display:block;
width:50%;
height:auto;
float:left;
background-color:green;
padding:10px;
-webkit-box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
-moz-box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
aside {
display:block;
width:30%;
height:auto;
margin:1px 5px auto auto;
background-color:yellow;
padding:10px;
-webkit-box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
-moz-box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
nav {
color:green;
font-weight:bold;
}
nav a:link {
text-decoration:blink;
}
</style></head>
<body>
<header>
<h3>
Тэг aside
</h3>
</header>
<article>
Тег aside служит для добавления на страницу дополнительного поля.
В дополнительном поле может содержатся что угодно.
Для дополнительного поля нужно прописывать индивидуальные стили.
</article>
<aside>
<nav>
<ul>
<li><a href="#">№1</a></li>
<li><a href="#">№2</a></li>
<li><a href="#">№3</a></li>
<li><a href="#">№4</a></li>
<li><a href="#">№5</a></li>
</ul>
</nav>
</aside>
</body>
</html>


Пример в действии



Тег aside служит для добавления на страницу дополнительного поля. В дополнительном поле может содержатся что угодно. Для дополнительного поля нужно прописывать индивидуальные стили.
  • №1
  • №2
  • №3
  • №4
  • №5

Тег HTML | <audio> предназначен для установки аудио плеера



Тег <audio> позволяет добавить на страницу плеер для воспроизведения файлов .mp3, .ogg. Дополнительно нужно прописывать стили для плеера и укомплектовывать соответствующими кодеками. Начинающему вебмастеру uCoz не советую ломать голову над его изготовлением. Система не даёт установить соответствующие плагины для его воспроизведения в чистом виде (сприменением одного тега). На момент создания статьи плееры уже были созданы, но их компоненты нарушали нормальную работу страницы. Советую использовать плееры с более гибкой и более пожходящие для системы. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5.



Синтаксис тега <audio> (закрывающий тэг обязателен!)


<audio src="URL"></audio>
<audio><source src="URL"></audio>

Тег работает в браузерах





Пример применения (для разных браузеров)


<!DOCTYPE html>
<html>
<head>
<title>Тег audio</title>
</head>
<body>
<audio autoplay preload="auto">
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" type='audio/ogg; codecs=vorbis'>
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" type="audio/mpeg">
Ваш браузер не поддерживает тег <audio>. <a href="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3">Скачайте музыку</a>
</audio>
</body>
</html>

Атрибуты тега <audio>

Атрибут autoplay

Атрибут autoplay воспроизводит установленную композицию автоматически, при загрузке страницы

Синтаксис атрибута autoplay


<audio autoplay="autoplay"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут autoplay</title>
</head>
<body>
<audio autoplay>
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" >
</audio>
</body>
</html>

Атрибут controls

Атрибут controls добавляет панель управления к установленному плееру в виде плейлиста и кнопок навигации

Синтаксис атрибута controls


<audio controls="controls"></audio>
Пример применения
<!DOCTYPE html>
 <html>
<head>
<title>Атрибут controls</title>
</head>
<body>
<audio controls>
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" >
</audio>
</body>
</html>

Атрибут loop

Атрибут loop воспроизводит установленную композицию как repeat в обычном плеере (крутит по кругу)

Синтаксис атрибута loop


<audio loop="loop"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут loop</title>
</head>
<body>
<audio loop>
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" >
</audio>
</body>
</html>

Атрибут preload

Атрибут preload воспроизводит установленную композицию как repeat в обычном плеере (крутит по кругу)

Синтаксис атрибута preload


<audio preload="none | metadata | auto"></audio>

Значения атрибута preload

none - файл не будет загружаться

metadata - загрузится только дополнительная информация о файле

auto - установленный файл музыки загрузится сразу после загрузки страницы

Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут preload</title>
</head>
<body>
<audio autoplay preload="auto">
<source src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" controls autobuffer>
</audio>
</body>
</html>

Атрибут src

Атрибут src указывает путь к файлу который будет воспроизводится. Можно так же использовать тег <source>

Синтаксис атрибута src


<audio src="URL"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут src</title>
</head>
<body>
<audio src="http://free-softec.ucoz.ru/player/mp3/marina_aleksandrova-otstavnye_oficery.mp3" controls autobuffer></audio>
</body>
</html>


Пример в действии



Тег <b> выделяет текст жирным шрифтом



Тег <b>  выделяет текст внутри себя жирным шрифтом, аналогично свойству CSS font-weight, но он его просто выделяет, для выделения по важности применяется тег <strong>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <b> (закрывающий тэг обязателен)


<b>Выделяемый текст</b>

Тег работает в браузерах


Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег b</title>
</head>
<body>
<h1>Что вперёд?</h1>
<p>Советую начинать с <b>пива</b>.<br>
Как пойдут первые звонки, начинайте <b>пивом</b> запивать <b>водку</b>.<br>
Так будет интереснее провести свободное время.</p>
</body>
</html>


Пример в действии


Что вперёд?

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


Тег <base> устанавливает относительный адрес



Тег <base> предназначен для связи, без указания базового (полного) адреса. Например указав в теге базовый адрес все ссылки можно будет прописывать с относительным (неполным) адресом. На сайте uCoz не обязательно его прописывать, можно указывать сразу относительный (короткий адрес), без разницы на страницах модулей или в html документе находящемся на сервере. Тег обязательно должен находится внутри тега <html>. Работает в HTML5



Синтаксис тега <base> (закрывающий тэг не обязателен)


<head>
<base href|target|URL >
</head>

Тег работает в браузерах





Атрибуты тега <base>

Атрибут target

Этот атрибут определяет как (в каком окне) открывать документ

_blank - Открывает связанный документ в новом окне

_self - Открывает связанный документ в родительском окне

_parent - Открывает связанный документ в родительском фрейме

_top - Открывает связанный документ в полном окне

Фрейм - Открывает связанный документ в указанном фрейме

Атрибут href

Спомощью этого атрибута указываем адрес

<base href="Адрес" >

Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег base</title>
<base href="http://free20860soft.narod.ru/images/image_html/">
<base target="_blank">
</head>
<body>
<img src="girls.gif">
</body>
</html>

Пример в действии




Тег <basefont> форматирует текст



Тег <basefont> был предназначен для управления текстом, его размерами и цветом. Указанные значения использовались во всем документе за исключением тега <font>, в котором можно было изменить параметры текста. В HTML5 не поддерживается, вместо него используется форматирование текста с применением свойств CSS.



Тег работает в браузерах


Тег <bdo> устанавливает направление текста



Тег <bdo> позволяет изменить направление текста справa налево. В CSS есть свойство с аналогичными свойствами direction.Тег поддерживает глобальные атрибуты,а так же атрибуты событий в HTML5



Синтаксис тега <bdo> (закрывающий тэг обязателен)


<bdo dir="Направление">Текст</bdo>

Тег работает в браузерах


Атрибуты тега <bdo>

Атрибут dir

Этот атрибут определяет как будет отражатся текст

ltr - Текст отображается слева направо

rtl - Текст отображается справа налево

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег bdo</title>
</head>
<body>
<bdo dir="rtl">
А роза упала на лапу Азора
</bdo>
</body>
</html>

Пример в действии


А роза упала на лапу Азора

Тег <bgsoun> устанавливает звук при открытии страницы


Тег <bgsound> является устаревшим, многие браузеры его не поддерживают. В HTML5 для этих целей применяется тег <audio>. Для Юкоз он тоже не подходит, пока...

Тег <blockquote> устанавливает выделение длинной цитаты



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



Синтаксис тега <blockquote> (закрывающий тэг обязателен)


<blockquote>Длинная цитата</blockquote>

Тег работает в браузерах





Атрибуты тега <blockquote>

Атрибут cite

Спомощью этого атрибута указываем адрес источника

Синтаксис атрибута cite


<blockquote cite="Адрес">Цитата</blockquote>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг blockquote</title>
</head>
<body>
<blockquote>
Желание способно затмить последствия решений, принятых без объективного анализа.
И всё это потому, что последствия мы относим ко всему, кроме изначального заблуждения в необходимости исполнения желания.
<big>Не всем известный автор</big>
</blockquote>
</body>
</html>

Пример в действии

 по ссылке

Тег <big> увеличивает размер текста



Тег <big> был предназначен для увеличения размера текста находящегося внутри него. Тег устарел и вместо него следует использовать свойство CSS <font-size>.


Тег работает в браузерах


Тег <body> воспроизводит контент



Тег <body>  предназначен для показа набранного контента в окне браузера. Набираемый контент может заключать в себя дополнительные стили, теги и скрипты. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <body> (закрывающий тэг не обязателен)


<body>Контент</body>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег body</title>
</head>
<body>
<embed src="/script/clock/180/clocksite_141.swf" width="200" height="200"></embed>
</body>
</html>

А слабо сыграть на инструментике?


Тег <blink> устанавливает мигание текста



Тег <blink> был предназначен для придания тексту мигающих свойств. Тег устарел и вместо него следует использовать свойство CSS <text-decoration>

Тег <br> делает разрыв строки



Тег <br>  применяется для переноса (разрыва) строки. В HTML5 поддерживает глобальные атрибуты и атрибуты событий.



Синтаксис тега <br>


Строка<br>Строка

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head><title>Тэгbr</title>
</head>
<body>
Один
<br>
Два
<br>
Три
<br>
Четыре
</body>
</html>


Один
Два
Три
Четыре

Тег <button> устанавливает кнопку



Тег <button>  предназначен для дополнения кнопки. Кнопка с этим тегом может содержать любой элемент. Если тег предназначается для отправки URL, то его нужно поместить во внутрь тега <form>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <button> (закрывающий тэг обязателен)


<button>Элемент</button>

Тег работает в браузерах





Атрибуты тега <button>

Атрибут accesskey

Атрибут accesskey определяет расположение объекта на странице

Синтаксис атрибута align


<button accesskey="Кнопка"></button>
Применяемые значения

Значение в цыфрах от 0 до 9
Значение в буквах EN

Атрибут autofocus

Атрибут autofocus определяет активность фокуса. Кнопка находится в активном положении (как будто на неё навели мышку). Достаточно нажать Enter для активации кнопки

Синтаксис атрибута autofocus


<button autofocus></button>

Атрибут disabled

Атрибут disabled определяет активность кнопки,делая её неактивной

Синтаксис атрибута disabled


<button disabled="disabled"></button>

Атрибут form

Атрибут form связывает кнопку с формой по установленному идентификатору

Синтаксис атрибута form


<button form="id"</button>

Атрибут formaction

Атрибут formaction указывает путь к программе которая обрабатывает данные переданные формой

Синтаксис атрибута formaction


<button formaction="URL"></button>

Атрибут formenctype

Атрибут formenctype указывает какой тип кодирования использовать при загрузке указанных данных

Синтаксис атрибута formenctype


<button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"></button>
Применяемые значения

application/x-www-form-urlencoded - Пробелы заменяются знаком +, символы вроде русских букв кодируются их шестнадцатеричными значениями

multipart/form-data - Данные не кодируются, значение применяется для отправки файлов

text/plain - Пробелы заменяются знаком +, символы и буквы не кодируются

Атрибут formmethod

Атрибут formmethod определяет ширину объекта в поле страницы, применяется со значением высоты (для адекватного отображения объекта)

Синтаксис атрибута formmethod


<button formmethod="get | post"></button>
Применяемые значения

get - Метод предназначен для передачи данных формы в адресной строке в виде пар (имя=значение), которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &)

post - Метод предназначен для передачи данных формы, объём пересылаемых данных ограничен лишь настройками сервера

Атрибут formnovalidate

Атрибут formnovalidate отменяет встроенную проверку данных введенных пользователем в форме на корректность. Это могут быть E-майл или другой URL адрес

Синтаксис атрибута formnovalidate


<button formnovalidate></button>

Атрибут formtarget

Атрибут formtarget определяет в каком окне открывать установленный сценарий кода

Синтаксис атрибута formtarget


<button formtarget="Название окна | _blank | _self | _parent | _top"></button>
Применяемые значения

_blank - Открывает связанный документ в новом окне

_self - Открывает связанный документ в родительском окне

_parent - Открывает связанный документ в родительском фрейме

_top - Открывает связанный документ в полном окне

Фрейм - Открывает документ с именем фрейма

Атрибут name

Атрибут name определяет имя присвоенное кнопке

Синтаксис атрибута name


<button name="Название кнопки"></button>

Атрибут type

Атрибут type определяет тип кнопки

Синтаксис атрибута type


<button type="button | reset | submit"></button>
Применяемые значения

button - Обычная кнопка

reset - Кнопка для очистки введённых данных

submit - Кнопка для отправки данных

Атрибут value

Атрибут value определяет значение кнопки,для отправки в форме

Синтаксис атрибута value


<button value="Значение"></button>

Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег button</title>
<style>
button {
background:grey;
border:2px solid black;
font-size:bold;
color:white;
}
button:hover {
background:grey;
border:2px solid red;
font-size:bold;
color:white;
}
button:active {
background:grey;
border:2px solid green;
font-size:bold;
color:white;
}
</style>
</head>
<body>
<button type="button" >Это наша кнопка</button>
</body>
</html>

Пример в действии (без CSS)



Тег <canvas> устанавливает графику



Тег <canvas> служит для добавления на страницу графики. Работает с JavaScript. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <canvas> (закрывающий тэг обязателен!)


<canvas id="идентификатор"></canvas>

Тег работает в браузерах





Атрибуты тега <canvas>

Атрибут width

Устанавливает ширину используемого поля для графики

Атрибут height

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


Пример применения тега

<!DOCTYPE html>
<html>
<head>
<title>Тэг canvas</title>
<style type="text/css">
#pole {
height:200px;
width:99%;
}
</style>
</head>
<body>
<canvas id="pole" ></canvas>
<script>
var canvas = document.getElementsByTagName
('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName
('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
ctx.save();
grad = ctx.createRadialGradient
(0,0,0,0,0,600);
grad.addColorStop(0, '#FF0000');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#FFF');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
ctx.fillStyle = grad;
 ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
</body>
</html>

Пример в действии



Тег <caption> добавляет заголовок в таблицу



Тег <caption> служит для добавления заголовка в таблицу и устанавливается сразу после тега <table>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <caption> (закрывающий тэг обязателен!)


<table>
<caption>Заголовок</caption>
<tr>
<td></td>
</tr>
</table>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг caption</title>
</head>
<body>
<table border="1">
<caption>Месяцы лета</caption>
<tr>
<td>Июнь</td>
</tr>
<tr>
<td>Июль</td>
</tr>
<tr>
<td>Август</td>
</tr>
</table>
</body>
</html>

Пример в действии


Месяцы лета
Июнь
Июль
Август

Тег <center> центрует элементы



Тег <center> предназначен для отображения элементов по центру страницы. В HTML5 не применяется, вместо него используется значение text-align:center из CSS



Синтаксис тега <center> (закрывающий тэг обязателен)


<center>Элемент</center>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг center</title>
</head>
<body>
<center>
<img src="http://free20860soft.narod.ru/images/image_html/center.png">
</center>
</body>
</html>

Пример в действии


Смеющийся смайлик

Тег <cite> форматирует текст



Тег <cite> служит для форматирования текста. Текст помещённый в тег, выделяется курсивом. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <cite> (закрывающий тэг обязателен)


<cite>Текст</cite>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг cite</title>
</head>
<body>
Это текст.<cite> И это тоже текст.</cite>
</body>
</html>

Пример в действии

 по ссылке

Тег <code> устанавливает стиль програмного текста



Тег <code> служит для вставки програмного текста. Текст, помещённый в тег воспроизводится браузером как моноширный, уменьшенного размера. Возможно дополнительное применение стилей CSS для отображения подходящего к общему стилю страницы. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <code> (закрывающий тэг обязателен!)


<code>Текст</code>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг code</title>
<style>
code.code {
background:none repeat scroll 0 0 #1f2328;
border-left:5px solid #217da0;
display:block;
padding:5px 5px;
color:#fff;
}
</style>
</head>
<body>
<code class="code"></code>
</body>
</html>


Пример в действии


<!DOCTYPE html>
<html>
<head>
<title>Тэг code</title>
<style>
code.code {
background:none repeat scroll 0 0 #1f2328;
border-left:5px solid #217da0;
display:block;
padding:5px 5px;
color:#fff;
}
</style>
</head>
<body>
<code class="code"></code>
</body>
</html>

Тег <col> группирует колонки в таблице



Тег <col> служит для группирования колонок в таблице. Прописывается после тега <table> или <colgroup> если столбцов несколько. Тег поддерживает глобальные атрибуты,а так же атрибуты событий в HTML5



Синтаксис тега <col> (закрывающий тэг обязателен)


<table>
<colspan/>
<tr>
<td>Элемент</td>
</tr>
</table>

Тег работает в браузерах





Атрибут тега <col>

Атрибут span

Атрибут span определяет количество колонок в таблице

Пример применения тега


<!DOCTYPEhtml>
<html>
<head>
<title>Тэгcode</title>
</head>
<body>
<table border="1">
<caption>Выпитое за праздники</caption>
<col span="2"/>
<tr>
<th>23 февраля</th>
<th>8 марта</th>
</tr>
<tr>
<td>Водки 500 гр</td>
<td>Водки всего 100 гр</td>
</tr>
<tr>
<td>Пива 2,5 л</td>
<td>Пива 1,5 л</td>
</td>
</tr>
<tr>
<td>Джин 4,5 л</td>
<td>Джин 6 л</td>
</tr>
<table>
</body>
</html>

Пример в действии


Выпитое за праздники
23 февраля 8 марта
Водки 500 гр Водки всего 100 гр
Пива 2,5 л Пива 1,5 л
Джина 4,5 л Джина 6 л

Тег <colgroup> форматирует колонки в таблице



Тег <colgroup> служит для форматирования колонок в таблице. Прописывается после тега <table> и содержит внутри себя тег <col>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <colgroup> (закрывающий тэг не обязателен)


<table>
<colgroup ...>
<col span >
<col ...>
</colgroup>
...
</table>

Тег работает в браузерах





Атрибут тега <colgroup>

Атрибут span

Атрибут span определяет количество групп колонок в таблице

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг colgroup</title>
</head>
<style>
#col1{background:red;}
#col2{background:green;}
#col3{background:blue;}
#col4{background:yellow;}
</style>
<body>
<table border="1">
<colgroup>
<col id="col1">
<col id="col2">
<col id="col3">
<col id="col4">
</colgroup>
<colgroup>
<tr><td>Пиво</td><td>Водка</td><td>Хлеб</td><td>Селёдка</td></tr>
<tr><td>Пиво</td><td>Водка</td><td>Хлеб</td><td>Селёдка</td></tr>
<table>
</body>
</html>

Пример в действии


ПивоВодкаХлебСелёдка
ПивоВодкаХлебСелёдка

Тег <command> исполняет комманду



Тег <command> будет работать только внутри тега <menu> и исполняет команду наподобие кнопки. На момент создания не работал ни в одном из распространённых браузеров. Тег <command> поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <command> (закрывающий тэг не обязателен)


<menu><command>элемент<command></menu>

Тег не работает ни в одном браузере

Пример применения


<!DOCTYPE html>
<html>
<head>
<title>Тег command</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')">Всем здорова!</command>
</menu>
</body>
</html>

Атрибуты тега <command>

Атрибут checked

Атрибут checked исполняет команду, сработает если type установлен как radio или checkbox

Синтаксис атрибута checked


<command checked="checked">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут checked</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" type="checkbox" checked="checked">Всем здорова!</command>
</menu>
</body>
</html>
Атрибут disabled

Атрибут disabled определяет доступность команды

Синтаксис атрибута disabled


<command disabled="disabled">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут disabled</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" disabled="disabled">Здорова всем!</command>
</menu>
</body>
</html>
Атрибут icon

Атрибут icon ссылка на картинку, будет исполнятся как команда

Синтаксис атрибута icon


<command icon="value">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут icon</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" icon="/html/img/html-5.png">Здорова всем!</command>
</menu>
</body>
</html>
Атрибут label

Атрибут label определяет название исполняемой команды

Синтаксис атрибута label


<command label="value">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут label</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" label="Alert">Всем здорова!</command>
</menu>
</body>
</html>
Атрибут radiogroup

Атрибут radiogroup определяет имена групп переключателей, доступна если type установлен как radio

Синтаксис атрибута radiogroup


<command radiogroup="value">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут radiogroup</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" type="radio" radiogroup="one">Здорова всем!</command><br>
<command onclick="alert('Здорова')">Всем здорова!</command><br>
<command onclick="alert('Здорова')" type="radio" radiogroup="one">А тебе привет!</command>
</menu>
</body>
</html>
Атрибут type

Атрибут type определяет какой тип команды исполнять: checkbox, command, radio

Синтаксис атрибута type


<command type="value">
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут type</title>
</head>
<body>
<menu>
<command onclick="alert('Привет мир')" type="checkbox">Нажми меня!</command>
</menu>
</body>
</html>

Тег <comment> добавлял комментарий



Тег <comment> устаревший и не поддерживается браузерами. По названию понятно, что тег был предназначен для выделения комментария. Прописывался внутри тега <body>. Не поддерживается в HTML5


Тег <datalist> создаёт предположительные варианты ответа



Тег <datalist> создаёт предположительные варианты ответов на указанный вопрос, варианты ответа будут видны при совпадении с набираемым текстом в текстовом поле. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <datalist> (закрывающий тэг обязателен!)


<input list="<идентификатор>">
<datalist id="<идентификатор>">
<option value="Предпологаемый вариант текста1">
<option value="Предпологаемый вариант текста2">
</datalist>

Тег работает в браузерах


В IE тег <datalist> не работает


Атрибут тега <datalist>

Атрибут list

Значение должно совпадать со значением атрибута list в теге <input>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг datalist</title>
</head>
<body>
<p>Каким алкольным напитком любите душу расслабить?</p>
<input list="buhlo">
<datalist id="buhlo">
<option value="Водкой">
<option value="Пивом">
<option value="Вином">
<option value="Коньяком">
<option value="Самогоном">
<option value="Брагой">
<option value="Не пью">
</datalist>
</body>
</html>

Пример в действии

 по ссылке

Тег <dd> создаёт определение термину



Тег <dd> создаёт определение для термина <dt> находящегося внутри контейнера <dl>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <dd> (закрывающий тэг обязателен!)


<dl>
<dt>Термин</dt>
<dd>Определение термина</dd>
</dl>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг dd</title>
</head>
<body>
<dl>
<dt>dl</dt>
<dd>Создаёт контейнер</dd>
<dt>dt</dt>
<dd>Добавляет термин которому предназначается определение</dd>
<dt>dd</dt>
<dd>Добавляет определение указанному термину</dd>
</dl>
</body>
</html>

Пример в действии

 по ссылке

Тег <del> указывает на изменение материала



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



Синтаксис тега <del> (закрывающий тэг обязателен)


<del>Изменённый текст</del>

Тег работает в браузерах





Атрибуты тега <del>

Атрибут cite

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

Атрибут datetime

Предназначен для указания времени изменения материала

Применяемые значения

Указываем полностью

2012-02-10T09:30:00+03:00

Указываем только год

2012

Указываем год и месяц

2012-02

Указываем год,месяц и число

2012-02-10

Для указания времени разделяем дату и время латинской T

2012-02-10T09:30:00

Для добавления временного пояса

2012-02-10T09:30:00+03:00

Пример применения


<!DOCTYPE html>
<html>
<head>
<title>Тэг del</title>
</head>
<body>
<del datetime="2012-02-10T09:30:00+03:00">
Этот текст теперь больше не нужен
</del>
<ins>
Вместо него теперь этот
</ins>
</body>
</html>

Пример в действии


Этот текст теперь больше не нужен Вместо него теперь этот

Тег <details> скрывает вложенную информацию



Тег <details> скрывает вложенную информацию, возможно использование с тегом <summary>. Элементом вложения может быть дополнительное описание, к сожалению на момент написания статьи работал только в браузере Google Chrome. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <details> (закрывающий тэг обязателен!)


<details open="open">Вложенный текст</details>

К сожалению на момент написания статьи работал только в браузере Google Chrome





Атрибут тега <details>

Атрибут open

Атрибут open открывает вложенную информацию

Синтаксис атрибута open


<details open="open">

Пример применения атрибута


<!DOCTYPE html>
<html>
<head>
<title>Атрибут open</title>
</head>
<body>
<details open="open">
<summary>Нажми сюда и ты узнаешь</summary>
<p>Лучший город на земле - Строитель Белгородской области.
<br>Курий Евгений - Россия г. Строитель</p>
</details>
</body>
</html>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег details</title>
</head>
<body>
<details>
<summary>Природа Мать, кажись не злой, я ведь человек простой</summary>
<p>Курий Евгений - Россия г. Строитель</p>
</details>
</body>
</html>

Пример в действии


Природа Мать, кажись не злой, я ведь человек простой

Курий Евгений - Россия г. Строитель


Тег <dfn> указывает на новое слово



Тег <dfn> предназначен для нового слова, терминология которого подлежит описанию. Слово внутри тега выделяется курсивным начертанием. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <dfn> (закрывающий тэг обязателен)


<dfn>Новое слово</dfn>

Тег работает в браузерах





Пример применения


<!DOCTYPE html>
<html>
<head>
<title>Тэг dfn</title>
</head>
<body>
<dfn>
Всемирная паутина (англ. World Wide Web)
</dfn>
— распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Для обозначения Всемирной паутины также используют слово веб и аббревиатуру WWW.
</body>
</html>

Пример в действии

 по ссылке

Тег <dir> выделяет директории



Тег <dir> устаревший в HTML5 не применяется. Использовался для выделения директорий. Вместо него нужно использовать тег <ul>


Тег работает в браузерах


Тег <div> разделяет элементы



Тег <div> разделяет элементы друг от друга, а так же используется для формирования отдельных блочных участков с применением стилей CSS. Чаще всего тег применяется с указанием классов (class="") и идентификаторов (id=""). В HTML5 атрибут align не применяется, вместо него используется значение свойства CSS text-align:center. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <div> (закрывающий тэг обязателен)


<div>Элемент</div>

Тег работает в браузерах





Атрибут тега <div>

Атрибут title

Атрибут title добавляет пояснение элементу находящемуся в теге

Синтаксис атрибута title


<div title="Пояснение">Элемент</div>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег div</title>
<style>
div {
width:99%;
height:50px;
background:black;
border:5px double red;
font-weight:bold;
color:white;
text-decoration:blink;
text-align:center;
}
div#treesekund {
transition-property:width;
transition-duration:3s;
-moz-transition-property:width;
-moz-transition-duration:3s;
-webkit-transition-property:width;
-webkit-transition-duration:3s;
-o-transition-property:width;
-o-transition-duration:3s;
}
div#onesekund {
transition-property:width;
transition-duration:1s;
-moz-transition-property:width;
-moz-transition-duration:1s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-o-transition-property:width;
-o-transition-duration:1s;
}
div:hover {
width:150px;
}
</style>
</head>
<body>
<div id="treesekund">Действие = 3 секунды</div>
<div id="onesekund">Действие = 1 секунда</div></body>
</html>

Пример в действии

 по ссылке

Тег <dl> создаёт контейнер для термина и его определения



Тег <dl> создаёт контейнер для термина <dt> и его определения <dd>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <dl> (закрывающий тэг обязателен!)


<dl>
<dt>Термин</dt>
<dd>Определение термина</dd>
</dl>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг dl</title>
</head>
<body>
<dl>
<dt>dl</dt>
<dd>Создаёт контейнер</dd>
<dt>dt</dt>
<dd>Добавляет термин которому предназначается определение</dd>
<dt>dd</dt>
<dd>Добавляет определение указанному термину</dd>
</dl>
</body>
</html>

Пример в действии

 по ссылке

Тег <dt> устанавливает термин



Тег <dt> является термином к которому прилагается описание находящееся в теге <dd> термин и его определения находятся в теге <dl>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <dt> (закрывающий тэг обязателен!)


<dl>
<dt>Термин</dt>
<dd>Определение термина</dd>
</dl>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг dt</title>
</head>
<body>
<dl>
<dt>dl</dt>
<dd>Создаёт контейнер</dd>
<dt>dt</dt>
<dd>Добавляет термин которому предназначается определение</dd>
<dt>dd</dt>
<dd>Добавляет определение указанному термину</dd>
</dl>
</body>
</html>

Пример в действии

 по ссылке

Тег <em> создаёт акцент тексту



Тег <em> выделяет текст помещённый внутри тега курсивным начертанием, при этом для робота поисковика он имеет вышестояшее значение в тексте. Если Вы решили предать акцент (выделить из остального по значимости) какому либо отдельному слову или нескольким словам, поместите его внутри тега <em>, текст буден выделен браузером сопоставимо воздействию значения font-style: italic; из CSS, но для робота значения стилей не имеют выделяющей значимости  в отличии от значения тега в который помещён объект. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <em> (закрывающий тэг обязателен!)


<em>Курсивное начертание</em>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег em</title>
</head>
<body>
<em>Так вот этот выделенный текст </em>виден по отношению к этому тексту
</body>
</html>

Пример в действии

 по ссылке

Тег <embed> загружает объект



Тег <embed>  предназначен для загрузки разнообразных объектов типа .swf. Это может быть и видео и аудио и т.д. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <embed> (закрывающий тэг не обязателен)


<embed src="URL"></embed>

Тег работает в браузерах





Атрибуты тега <embed>

Атрибут align

Атрибут align определяет расположение объекта на странице

Синтаксис атрибута align


<embed align="absmiddle | baseline | bottom | left | middle | right | texttop | top"></embed>
Применяемые значения

absmiddle - середина объекта распологается по середине строки

baseline - объект распологается по базовой линии строки

bottom - расположение нижней границы объекта по окружающему тексту

left - расположение объекта по левому краю окна, имеющийся текст обтекает его справа

middle - расположение середины объекта по базовой линии строки

right - расположение объекта по правому краю окна, имеющийся текст обтекает его слева

texttop - Верхняя граница объекта располагается по самому верхнему текстовому элементу в строке

top - Верхняя граница объекта располагается в верхней части строки

Атрибут height

Атрибут height определяет высоту объекта в поле страницы,применяется со значением ширины (для адекватного отображения объекта)

Синтаксис атрибута height


<embed height="Высота объекта"></embed>

Атрибут hidden

Атрибут hidden определяет будет объект виден или будет невидим

Синтаксис атрибута hidden


<embed hidden="true | false"></embed>
Применяемые значения

true - объект будет виден

false - объекта не будет видно (значение по умолчанию,если не указано ни одно)

Атрибут hspace

Атрибут hspace создаёт дополнительную, невидимую окантовку (отступ) элементу по горизонтали. Применяется положительное значение в пикселях (px) и применяется совместно с атрибутом vspace

Синтаксис атрибута hspace


<embed hspace="Значение в px"</embed>

Атрибут src

Атрибут src указывает путь к воспроизводимому файлу (напрмер .swf)

Синтаксис атрибута src


<embed src="URL"></embed>

Атрибут type

Атрибут type указывает какой тип MIME использовать при загрузке

Синтаксис атрибута type


<embed type="MIME"></embed>

Атрибут vspace

Атрибут vspace определяет ширину объекта в поле страницы,применяется со значением высоты (для адекватного отображения объекта)

Синтаксис атрибута vspace


<embed vspace="Ширина объекта"></embed>

Атрибут width

Атрибут width определяет ширину объекта в поле страницы,применяется со значением высоты (для адекватного отображения объекта)

Синтаксис атрибута width


<embed width="Ширина объекта"></embed>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег embed</title>
</head>
<body>
<embed src="http://free20860soft.narod.ru/images/image_html/kisa354.swf" align="absmiddle" width="200" height="200">
</body>
</html>

Пример в действии



Тег <fieldset> группирует элементы в форме



Тег <fieldset> предназначен для групирования элементов в форме. Форма обрамляется рамкой, вид рамки в разных браузерах разный и система ПК тоже корректирует вид рамки. Тег <legend> определяет заголовок для элементов в теге <fieldset>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <fieldset> (закрывающий тэг обязателен!)


<form><fieldset>Элемент</fieldset></form>

Тег работает в браузерах





Атрибуты тега <fieldset>

Атрибут disabled

Атрибут disabled отключает поля для заполнения

Синтаксис атрибута disabled


<fieldset disabled="disabled"></fieldset>

Атрибут form

Атрибут form указывает на пренадлежность полю (или нескольким полям, с дополнительным идентификатором в стилях)

Синтаксис атрибута form


<fieldset form="value"></fieldset>

Атрибут name

Атрибут name добавляет имя создаваемому полю (полям)

Синтаксис атрибута name


<fieldset name="value"></fieldset>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг fieldset</title>
</head>
<body>
<form>
<fieldset>
<legend>Форма входа</legend>
E-mail <input type="text" size="35">
<br>
Пароль <input type="text" size="35">
</fieldset>
</form>
</body>
</html>

Пример в действии


Форма входа E-mail
Пароль

Тег <figcaption> добавляет описание тегу <figure>



Тег <figcaption> добавляет описание элементу находящемуся в теге <figure>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <figcaption> (закрывающий тэг обязателен!)


<figure>
<figcaption>Описание</figcaption>
</figure>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег figcaption</title>
</head>
<body>
<figure>
<figcaption>
<h4>Значок HTML5</h4>
</figcaption>
<img src="http://free20860soft.narod.ru/images/image_html/html-5.png" width="50" height="50">
</figure>
</body>
</html>

Пример в действии


Значок HTML5


Тег <figure> группирует дополнительные элементы



Тег <figure> группирует внутри себя дополнительные элементы, при этом содержание тега <figure> должно иметь отношение к основному содержанию страницы. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <figure> (закрывающий тэг обязателен!)


<figure>Элемент</figure>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег figure</title>
</head>
<body>
<figure>
<figcaption>
<h4>Значок HTML5</h4>
</figcaption>
<img src="/images/image_html/html-5.png" width="50" height="50">
</figure>
</body>
</html>

Пример в действии


Значок HTML5


Тег <font> форматирует шрифт



Тег <font> устанавливал тип, размер и цвет шрифта. В настоящее время актуально применение форматирования шрифта применяя свойства шрифтов CSS.



Синтаксис тега <font> (закрывающий тэг обязателен)


<font>Текст</font>

Тег работает в браузерах





Тег <form> устанавливает форму ввода



Тег <form>  предназначен для создания формы ввода. Может включать в себя другие теги. На сайте uCoz форма ввода устанавливается применением условного оператора $LOGIN_FORM$. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <form> (закрывающий тег обязателен!)


<form action="URL">Элемент</form>

Тег работает в браузерах





Атрибуты тега <form>

Атрибут accept-charset

Атрибут accept-charset определяет набор символов для обработки сервером

Синтаксис атрибута accept-charset


<form accept-charset="value"></form>

Атрибут action

Атрибут action определяет адрес отправки заполненной формы (для HTML5 необязательный атрибут)

Синтаксис атрибута action


<form action="URL"></form>

Атрибут autocomplete

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

Синтаксис атрибута autocomplete


<form autocomplete="value"></form>

Атрибут enctype

Атрибут enctype указывает вариант кодировки для отправки (можно не указывать,определяется сервером значением по умолчанию)

Синтаксис атрибута enctype


<form enctype="Кодировка"></form>
Применяемые значения

application/x-www-form-urlencoded - вводимые символы будут кодироватся (значение по умолчанию)

multipart/form-data - вводимые символы не кодируются

text/plain - кодируются только пробелы символом "+"

Атрибут method

Атрибут method указывает метод отправки данных

Синтаксис атрибута method


<form method="get | post">Элемент</form>
Применяемые значения

get - добавляет данные формы к добавленному URL (URL?name=value&name=value) ограниченная по отправляемому количеству данных

post - отсылает данные формы как HTTP (отправляет большое количество данных)

Атрибут name

Атрибут name определяет имя формы отправляемых данных

Синтаксис атрибута name


<form name="value"></form>

Атрибут novalidate

Атрибут novalidate отключает проверку данных вводимых в отправляемую форму

Синтаксис атрибута novalidate


<form novalidate="novalidate"></form>

Атрибут target

Атрибут target отключает проверку данных вводимых в отправляемую форму

Синтаксис атрибута target


<form target="value"></form>
Применяемые значения

_blank - отправляемая форма откроется в новом окне

_self - отправляемая форма откроется в нажатом фрейме

_parent - отправляемая форма откроется в родительском фрейме

_top - отправляемая форма откроется в полном окне

id или имя - отправляемая форма откроется во фрейме который вы сами определите

Пример применения тега


<!DOCTYPE html>
 <html>
<head>
 <title>Тег form</title>
</head>
<body>
<form action="$LOGIN_FORM$">
E-mail   <input type="text" name="email" value="email@example.com" >
<br>
Пароль <input type="text" name="password" value="" >
<br>
<input type="submit" value="Отправить" >
</form>
</body>
</html>

Пример в действии


E-mail
Пароль

Тег <footer> нижняя часть сайта



Тег <footer> нижняя часть сайта, аналогичен нижней части сайта на uCoz. Содержит авторскую и контактную информацию, нижняя часть на сайте uCoz аналогична разделу <head> и может содержать скрипты и стили. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <footer> (закрывающий тэг обязателен!)


<footer>Элемент</footer>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег footer</title>
</head>
<body>
<footer>
<center><a href="http://www.ucoz.ru/">
<img style="margin:0;padding:0;border:0;width:81px;height:31px;" src="http://s59.ucoz.net/img/cp//30.gif" alt="Создать сайт бесплатно" title="Создать сайт бесплатно" >
</a></center>
</footer>
</body>
</html>

Пример в действии


Яндекс.Метрика Правильный CSS!

Тег <frame> определяет окно фрейма



Тег <frame> устаревший тег и уже не поддерживается некоторыми браузерами, применялся для определения указанного окна фрейма, в HTML5 не работает


Тег <frameset> определяет окна фреймов



Тег <frameset> устаревший тег и уже не поддерживается некоторыми браузерами, применялся для определения нескольких окон фреймов (многооконных), в HTML5 не работает


Тег <h1> Основной заголовок страницы



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



Синтаксис тега <h1> (закрывающий тэг обязателен)


<h1>Заголовок</h1>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег h1</title>
</head>
<body>
<header>
<h1>Тэг h1 в HTML5</h1>
</header>
<h2>Название раздела с материалом</h2>
</body>
</html>

Пример в действии

 по ссылке

Тег <h2> заголовок раздела категории и материала



Тег <h2> является вторым по значению заголовком на странице, их может быть не более 3 на страницу, а лучше 2. Отражает название раздела, категории и материала страницы. Можно присвоить не только категориям и разделам, но вставлять всё равно не более 3 штук, включая верхнюю и нижнюю часть сайта. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <h2> (закрывающий тэг обязателен)


<h2>Заголовок</h2>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег h2</title>
</head>
<body>
<header>
<h1>Тэг h2 в HTML5</h1>
</header>
<h2>Название раздела с материалом</h2>
<h2>Название категории с материалом</h2>
<h2>Название материала</h2>
</body>
</html>

Пример в действии

 по ссылке

Тег <h3> заголовок, отражающий суть материала



Тег <h3> является третьим по значению заголовком на странице, их может быть не более 6 на страницу, а лучше не более 4. Отражает основные части материала, на сайте uCoz может ипользоватся в названии блока модуля (если у каждого модуля свой блок). Главное не забывать о количестве и неоправданном переборе. Если человек будет использовать речевой браузер (для слабовидящих), он должен понимать ориентир по странице, не кидайте его куда попало, такой браузер точно придерживается последовательности распределения заголовков. Если Вам требуется внести визуальный порядок - используйте форматирование стилями CSS. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <h3> (закрывающий тэг обязателен)


<h3>Заголовок</h3>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег h3</title>
</head>
<body>
<header>
<h1>Тэг h3 в HTML5</h1>
</header>
<h2>Название материала</h2>
<h3>Краткое описание сути материала</h3>
<h3>Краткое описание основных частей материала</h3>
</body>
</html>

Пример в действии

 по ссылке

Теги <h4> <h5> <h6> заголовки второстепенных частей



Теги <h4> <h5> <h6> заголовки второстепенных частей материала, имеют относительную значимость, но значимость перед простым текстом остаётся. Устанавливайте разборчиво, не злоупотребляя количеством и не вкладывайте в них текст материала, такие заголовки предназначены для условных значений. По возможности воздержитесь от сумбурного рассредоточения, это может повлиять на суть основных заголовков. Теги поддерживают глобальные атрибуты, а так же атрибуты событий в HTML5



Теги работают в браузерах


Пример в действии

 по ссылке

Тег <head> контейнер для документов



Тег <head> служит контейнером для основных документов страницы. В зону действия тега помещаются элементы, наследуемые всей страницей. Обычно это название документа (<title>), базовые и импортируемые стили и скрипты. Тег <head> поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Тег <header> документирует контент материала



Тег <header> документирует контент материала который находится в теле страницы (внутри тега <body>). Используется как навигатор для одного или группы содержательных элементов, являясь аналогом заголовка верхнего уровня имеющего отношение к установленному контенту. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <header> (закрывающий тэг обязателен)


<header>Контент</header>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>uCoz и HTML5</title>
</head>
<body>
<header>
<h1>uCoz и HTML5</a></h1>
</header>
<article>
<p>В настоящее время ни один стандартный шаблон не оснащён постоением структуры,отвечающей требованиям HTML5,надеемся в ближайшем будущем ощутить возможность использовать сайты системы по новой структурной технологии.</p>
</article>
</body>
</html>

Пример в действии


uCoz и HTML5


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


Тег <hgroup> группирует заголовки



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



Синтаксис тега <hgroup> (закрывающий тэг обязателен)


<hgroup>Заголовки</hgroup>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег hgroup</title>
</head>
<body>
<hgroup>
<h1>Слово - Футурология</a></h1>
<h2>Наивность людских надежд</a></h2>
<h3>Жадность и справедливость</a></h3>
<h3>Совесть как мусор</a></h3>
<h3>Очевидный результат</a></h3>
</hgroup>
</body>
</html>

Пример в действии

 по ссылке

Тег <hr> разграничивающая полоска



Тег <hr> это полоска раграничивающая переход между элементами контента. Можно использовать её как переход от заголовка основной темы материала к его описанию, а от описания к примерам применения. Не желательно использовать на бум, особенно при разделении текста без перехода темы, разделение должно сопровождатся заголовком, меняющим направление контента. В HTML5 не имеет личных атрибутов, которые применялись ранее. Ддля форматирования внешнего вида используйте свойства CSS. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <hr> (закрывающего тега нет)


<hr>

Атрибуты тега


alignВыравнивание линии справа (right) или слева (left), по умолчанию по центру (center).
sizeУстанавливает толщину линии в пикселах.
widthУстанавливает ширину линии в процентах или пикселах.
color Устанавливает цвет линии.
noshade Сплошная окраска, без трёхмерных эффектов.

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег hr</title>
</head>
<body>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>

Пример в действии

 по ссылке

Тег <html> разметка гипертекста



Тег <html> служит для разметки гипертекста и устанавливается сразу после тега <!DOCTYPE>. Тег является контейнером страницы, корневым элементом, и хотя без него страница будет работать, лучше разумеется его применять. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <html> (закрывающий тэг не обязателен!)


<html>Документ</html>



Атрибуты тега <html>

Атрибут manifest

Указывает URL кэш манифеста для использования автономных приложений при загрузке страницы

Атрибут xmlns

Указывает пространство имен для тегов XHTML документов

Пример применения тега


Тег работает в браузерах


<!DOCTYPE html>
<html>
<head>
<title>Тэг html</title>
</head>
<body>
<p>Тег html - самый лучший тег в мире...</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <i> устанавливает курсивное начертание тексту



Тег <i> служит для форматирования текста находящегося внутри него, текст получает курсивное (наклонное) начертание. Для дополнительного форматирования используются свойства CSS. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <i> (закрывающий тэг не обязателен!)


<i>Документ</i>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг i</title>
</head>
<body>
<p>Это обычный текст. <i>А этот - внутри тега i</i></p>
</body>
</html>

Пример в действии

 по ссылке

Тег <iframe> загружает плавающий фрейм



Тег <iframe>  предназначен для загрузки плавающих фреймов (элементов других страниц). В HTML5 поубавилось атрибутов применяемых к тегу. Фреймы затрудняют индексацию роботами, поэтому нельзя использовать весь материал страницы с использованием тега <iframe>. Тег используется как дополнение к материалу, т.е должен иметь вспомогательное значение. Если Вы создали материал, и весь материал импортируется через фрейм, то он может быть не проиндексирован поисковым роботом. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <iframe> (закрывающий тэг обязателен)


<iframe src="URL"></iframe>

Тег работает в браузерах





Атрибуты тега <iframe> в HTML5

При отсутствии атрибутов загружает весь объект,без ограничений

Атрибут height

Атрибут height определяет высоту фрейма в поле страницы, применяется со значением ширины (для адекватного отображения объекта)

Синтаксис атрибута height


<iframe height="Высота фрейма"></iframe>

Атрибут sandbox

Атрибут sandbox указывает на ограничения во фрейме

Применяемые значения

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

allow-top-navigation - загружает фрейм в родительском документе

allow-forms - загружает фрейм разрешая отправлять формы отправки внутри него

allow-scripts - загружает фрейм, разрешая использование внутри него скриптов, кроме всплывающих окон

Синтаксис атрибута sandbox


<iframe sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>

Атрибут src

Атрибут src указывает путь к воспроизводимому файлу

Синтаксис атрибута src


<iframe src="URL"></iframe>

Атрибут seamless

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

Атрибут srcdoc

указывает тип HTML документа, показанного в iframe

Атрибут width

Атрибут width определяет ширину фрейма в поле страницы, применяется со значением высоты (для адекватного отображения объекта)

Синтаксис атрибута width


<iframe width="Ширина фрейма"></iframe>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег iframe</title>
</head>
<body>
<h1>Использование фрейма</h1>
<iframe src="http://free20860soft.narod.ru/images/image_html/iframe.html" height="100" width="99%"></iframe>
</body>
</html>

Пример в действии

 по ссылке

Тег <img> устанавливает изображение



Тег <img>  предназначен для установки изображения на страницу. В HTML5 личных атрибутов поубавилось. Не забывайте об обязательных атрибутах: src и alt. Первый выполняет загрузку адреса изображения, а второй сопровождает описанием изображения. Описание важно для робота, там где материал содержит много изображений, или на изображения ссылается суть материала, отсутствие описание может повлечь не верную интерпретацию материала. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <img> (закрывающий тэг отсутствует)


<img src="URL" alt="" >

Тег работает в браузерах





Атрибуты тега <img>

Атрибут alt

Атрибут alt определяет описание изображению - это обязательный атрибут

Синтаксис атрибута align


<img alt="Описание">

Атрибут height

Атрибут height определяет высоту изображения, применяется со значением ширины (для адекватного отображения изображения)

Синтаксис атрибута height


<img img="Высота изображения">

Атрибут ismap

Атрибут ismap определяет изображение карту на стороне сервера, применяется к карте изображения для которой установлено имя координат выделенных областей

Синтаксис атрибута ismap


<img ismap="#Имя">

Атрибут usemap

Атрибут usemap определяет имя заданных областей на стороне клиента

Синтаксис атрибута usemap


<img usemap="имя">

Атрибут src

Атрибут src указывает путь к изображению

Синтаксис атрибута src


<img src="URL">

Атрибут title

Атрибут title определяет заголовок для изображения

Синтаксис атрибута title


<img title="Заголовок">

Атрибут width

Атрибут width определяет ширину изображения,применяется со значением высоты (для адекватного отображения объекта)

Синтаксис атрибута width


<img width="Ширина изображения">

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг img</title>
</head>
<body>
<div align="center">
<figure>
<img src ="/images/image_html/map-area.png" width="214"
height="328" alt="1234" usemap ="#1234">
<map name="1234">
<area shape="rect" coords="0,0,100,100" href="/images/image_html/map-area-gus.html" alt="1">
<area shape="rect" coords="0,114,100,214" href="/html/demo/map-area-lebed.html" alt="2">
<area shape="rect" coords="0,228,100,328" href="/images/image_html/map-area-induk.html" alt="3">
<area shape="rect" coords="114,0,214,100" href="/images/image_html/map-area-green.html" alt="4">
</map>
</figure>
</div>
</body>
</html>

Пример в действии

 по ссылке

Тег <input> устанавливает поле ввода



Тег <input> предназначен для установки полей ввода. Сами поля могут иметь различную конфигурацию, в зависимости от используемых атрибутов. Для пользователей системы uCoz созданы условные операторы отправляющие информацию на сервер системы. Имеется в виду то, что отправить данные можно на сервер, но не имеется в виду ФТП сервер сайта uCoz. Вы можете только изменить интерфейс поля ввода для отправки. Сами серверы имеют названия, например (http://s36.ucoz.net/). Всё зависит от того к какому именно серверу прикреплён сайт. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <input> (закрывающий тэг обязателен)


<form action="...">
<input type="...">
</form>

Тег работает в браузерах





Атрибуты тега <input>

Атрибут alt

Атрибут alt определяет текстовое описание изображению, применимо к type="image"

Атрибут accept

Атрибут accept определяет MIME типы для отправки, применимо к type="file"

Атрибут autocomplete

Атрибут autocomplete определяет наличие автозаполнения в заполняемой форме

Атрибут autofocus

Атрибут autofocus определяет получение фокуса ввода в заплняемой форме, не применяется при установке type="hidden"

Атрибут checked

Атрибут checked отмечает поле ввода после отправки, применимо к type="checkbox" и type="radio

Атрибут disabled

Атрибут disabled определяет недоступность поля ввода после загрузки страницы, не применяется при установке type="hidden"

Атрибут form

Атрибут form определяет количество полей ввода для формы отпраки

Атрибут formaction

Переопределяет атрибут формы action, URL должен быть активным, и определяет, куда отправлять данные при отправке формы, применимо к type="submit" и type="image"

Атрибут formenctype

Переопределяет атрибут формы enctype, указывая на тип используемой кодировки реред отправкой, применимо к type="submit" и type="image"

Атрибут formmethod

Переопределяет атрибут формы method, определяет метод HTTP для отправки данных на URL действия

Применяемые значения

get - добавляет данные формы к URL

post - отправляет данные формы как HTTP post

Атрибут formnovalidate

Переопределяет атрибут формы novalidate, исключает проверку поля ввода перед отправкой

Атрибут formtarget

Переопределяет атрибут формы target, определяет тип окна отправляемой формы

Применяемые значения

_blank - откроется в новом окне

_self - откроется в том фрейме, в котором был нажат

_parent - откроется в родительском фрейме

_top - откроется в полном окне

big>id фрейма - откроется в идентифицированном фрейме

Атрибут height

Атрибут height определяет высоту поля ввода, применяются значения в px (пикселях) и % (процентах)

Атрибут list

Атрибут list переопределяет список идентифицированных данных

Атрибут max

Атрибут max определяет максимальное количество вводимых значений, используется с атрибутом min

Применяемые значения

Число - максимальное числовое значение

Дата - максимально допустимая дата

Атрибут min

Атрибут min определяет минимальное количество вводимых значений, используется с атрибутом max

Применяемые значения

Число - минимальное числовое значение

Дата - минимально допустимая дата

Атрибут maxlength

Атрибут maxlength определяет максимальное количество вводимых символов, применяются числовые значения

Атрибут multiple

Атрибут multiple определяет возможность ввода более одного значения

Атрибут name

Атрибут name определяет имя идентификатора поля ввода

Атрибут pattern

Атрибут pattern определяет шаблон или числовой формат, шаблоном может быть установленный, индивидуальный формат

Атрибут readonly

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

Атрибут required

Атрибут required определяет обязательное заполнение форсы перед отправкой

Атрибут size

Атрибут size определяет количество визуально видимых значений при вводе в форму

Атрибут src

Атрибут src определяет URL изображения, применимо к type="image"

Атрибут step

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

Атрибут type

Атрибут type определяет тип поля для ввода

Применяемые значения

button - интерактивные кнопки, вид может быть осуществлён посредством применения скриптов

checkbox - вид формы флажок

color - цвет формы ввода

date - указывает дату в виде года, месяца и числа, без временного пояса

datetime - указывает поле полной даты, года, месяца, дня, часа, минуты, секунды и доли секунды

datetime-local - указывает поле локальной даты, года, месяца, дня, часа, минуты, секунды и доли секунды для местного времени

month - указывает поле даты с указанием месяца

week - указывает поле даты с указанием недели

time - указывает поле времени с указанием часа, минуты, секунды и доли секунды, без временного пояса

email - указывает поле для ввода Е-майл адреса

file - указывает поле для кнопки выбора файла для загрузки

hidden - скрывает поле для ввода

image - в виде кнопки используется изображение

number - указывает поле с применением счётчика

password - указывает поле с точками вместо вводимых значений,используется для ввода конфиденцыальных данных

radio - кнопка переключатель

range - кнопка в виде ползунка с указывающим значением

reset - кнопка сброса ранее вводимых значений в поля ввода

search - указывает поле ввода для поиска

submit - кнопка отправки введённых данных в поля формы

tel - указывает поле ввода для телефонного номера

text - поле ввода по умолчанию,длинна поля составляет 20 знаков

url - поле ввода URL адреса

Атрибут value

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

Атрибут width

Атрибут width определяет ширину ввода заполняемого поля,применяются числовые и процентные значения

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег input</title>
</head>
<body>
<form action="http://s36.ucoz.net/ ">
Ваше имя - <input type="text" name="name" value="Евгений" ><br>
Ваша фамилия - <input type="text" name="fname" value="Курий" ><br>
Ваш ник - <input type="text" name="nname" value="evkuriy"><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>

Пример в действии

 по ссылке

Тег <ins> изменённая версия материала



Тег <ins>  предназначен для установки обновлённой версии материала. Используется вместе с тегом <del>, указывающим на неактуальный элемент. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <ins> (закрывающий тэг обязателен)


<ins>Изменённый вариант</ins>

Тег работает в браузерах





Атрибуты тега <ins>

Атрибут cite

Атрибут cite определяет URL адрес, на основании которого произошли изменения

Атрибут datetime

Атрибут datetime определяет формат даты изменения.

Применяемые значения:

Указываем полностью

2012-02-10T09:30:00+03:00

Указываем только год

2012

Указываем год и месяц

2012-02

Указываем год,месяц и число

2012-02-10

Для указания времени разделяем дату и время латинской T

2012-02-10T09:30:00

Для добавления временного пояса

2012-02-10T09:30:00+03:00

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг ins</title>
</head>
<body>
<del datetime="2012-02-10T09:30:00+03:00">
Этот текст теперь больше не нужен
</del>
<ins datetime="2012-06-11T20:05:00+03:00">
Вместо него теперь этот
</ins>
</body>
</html>

Пример в действии

 по ссылке

Тег <kbd> определяет текст с клавиатуры



Тег <kbd> определяет текст введённый с клавиатуры. Используется для назначения горячих клавиш ввода. Текст выделяется моноширным шрифтом, для форматирования шрифта нужно использовать стили CSS. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <kbd> (закрывающий тэг обязателен)


<kbd>Текст</kbd>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег kbd</title>
</head>
<body>
<p>Это обычный текст. <kbd>А этот внутри тега.</kbd></p>
</body>
</html>

Пример в действии

 по ссылке

Тег <keygen> устанавливает шифрование данных



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



Синтаксис тега <keygen> (закрывающий тэг не обязателен)


<form><keygen></keygen></form>

Тег работает в браузерах





Атрибуты тега <keygen>

Атрибут autofocus

Поле ввода получает фокус при загрузке страницы

Атрибут challenge

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

Атрибут disabled

Форма ввода находится в неактивном состоянии

Атрибут form

Определяет идентификатор форм подготовленных к отправке

Атрибут keytype

Устанавливает алгоритм шифрования ключа,возможны различные варианты шифрования данных

Атрибут name

Имя идентификатор формы ввода

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег keygen</title>
</head>
<body>
<form action="http://s36.ucoz.net/ " method="get">
Псевдоним - <input type="text" name="уname"><br>
Шифрование - <keygen name="security">
<input type="submit" value="Отправить">
</form>
</body>
</html>

Пример в действии

 по ссылке

Тег <label> метка интерфейса



Тег <label> служит для объединения элемента интерфейса с формой, устанавливая текстовое описание метке и с возможностью указать горячие клавиши для активации метки. При этом активация метки происходит при нажатии горячих клавиш и при нажатии на описание метки. Тип метки зависит от атрибута указанного в теге <input>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <label> (закрывающий тэг обязателен)


<input> id="идентификатор" <label> for="id" </label>

Тег работает в браузерах





Атрибуты тега <label>

Атрибут for

Указывает идентификатор элемента формы с которой связана этикетка.

Атрибут form

Указывает идентификатор одной или нескольких форм к кторой принадлежит тег <label>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг label</title>
</head>
<body>
<h3>Кто Вы?</h3>
<form>
<label for="man">Полицейский</label>
<input type="checkbox" name="vvod" id="man">
<br>
<label for="girls">Военнослужащий</label>
<input type="checkbox" name="vvod" id="girls">
<br>
<label for="svoi">Иное</label>
<input type="checkbox" name="vvod" id="svoi">
</form>
</body>
</html>

Пример в действии

 по ссылке

Тег <legend> заголовок



Тег <legend> служит для добавления заголовка внутри тегов <fieldset>,<figure> и <details>. В HTML5 личных атрибутов не имеет. Применяется в виде заголовка установленного внутри перечисленных тегов. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг legend</title>
</head>
<body>
<form  method="get" action="/search/">
<fieldset title="Устаревшие атрибуты тега legend">
<legend>Найти замену</legend>
<input value="text-align"/>
<input type="submit" value="Найти в CSS"/>
</fieldset>
</form>
</body>
</html>

Пример в действии

 по ссылке

Тег <li> элемент списка



Тег <li> служит для определения элемента списка внутри тегов <ul> и <ol> (маркированный и нумерованный список), а так же в теге <menu>. В HTML5 личных атрибутов поубавилось, так вместо применения атрибута type, указывающего тип списка, используется свойство list-style-type из CSS. Единственный личный атрибут value используется только внутри тега <ol>. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5


Тег работает в браузерах





Атрибуты тега <li>

Атрибут value

Устанавливает изначальное число нумерованного списка, применимо к тегу <ol>.

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг li</title>
</head>
<body>
<ol>
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ol>
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ul>
<menu>
<li><input type="radio">Один</li>
<li><input type="radio">Два</li>
<li><input type="radio">Три</li>
</menu>
</body>
</html>

Пример в действии

 по ссылке

Тег <link> загружает внешние документы



Тег <link> служит для загрузки внешних документов, например таблицы стилей. Отличие от свойства @import, заключается в более расширенных возможностях, с указанием атрибутов список которых имеет отличие от версии HTML4. Тег прописывается сразу после тега <title>, можно указать несколько возможных вариантов. Чем выше раполагаемый вариант, тем выше его приоритет. Ниже предоставлено описание атрибутов имеющее отношение к 5 версии HTML. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <link>

Атрибут href

Указывает URL адрес загружаемого документа.

Атрибут hreflang

Указывает код используемого языка ISO 639-1

Атрибут media

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

Применяемые устройства атрибута media

all -  все устройства

aural - речевые синтезаторы

braille - устройства для слепых на основе системы Брайля

handheld -  устройства где экраны имеют ограничения

projection - проекторы

print - страница предварительной распечатки принтером

screen - экран компьютера

tty - устройства использующие сетку фиксированного шага

tv - устройства телевизионного типа

Применяемые значения атрибута media

width -  указывает ширину страницы,могут быть использованы префиксы "min-" и "max-",например media="screen and (min-width:600px)"

height - указывает высоту страницы,могут быть использованы префиксы "min-" и "max-",например media="screen and (max-height:600px)"

device-width - указывает ширину окна девайса,могут быть использованы префиксы "min-" и "max-", например media="screen and (device-min-width:600px)"

device-height -  указывает высоту окна девайса,могут быть использованы префиксы "min-" и "max-",например media="screen and (device-min-height:600px)"

orientation - указывает ориентацию,могут быть использованы значения "portrait" или "landscape",например media="all and (orientation:portrait)"

aspect-ratio - указывает соотношение ширины и высоты отображения страницы,могут быть использованы префиксы "min-" и "max-",например media="screen and (aspect-ratio:16/10)"

device-aspect-ratio - указывает соотношение ширины и высоты отображения окна девайса,могут быть использованы префиксы "min-" и "max-",например media="screen and (aspect-ratio:16/10)"

color - указывает количество бит на цвет отображения,могут быть использованы префиксы "min-" и "max-",например media="screen and (color:7)"

color-index - указывает количество цветов для обработки целевого отображения,могут быть использованы префиксы "min-" и "max-",например media="screen and (max-color-index:256)"

monochrome - указывает количество бит на пиксель в монохромном буфере кадра,могут быть использованы префиксы "min-" и "max-",например media="screen and (min-monochrome:2)"

resolution - указывает плотность пикселей (точек на дюйм и точек на сантиметр),могут быть использованы префиксы "min-" и "max-",например media="print and (min-resolution:300dpi)"

scan - указывает метод сканирования дисплея телевизора,возможные значения "progressive" и "interlace",например media="tv and (scan:progressive)"

grid -  указывает,если выходное устройство сетка или битовая карта,то возможные значения "1" для сетки, и "0" для остальных случаев

Атрибут rel

Указывает связь импортируемого документа с существующим.

Значения применяемые к атрибуту rel

alternate -  ссылка на альтернативный источник документа

author - ссылка на авторскую страницу документа

help - ссылка на страницу пояснения

icon -  ссылка на иконку ( favicon )

licence - ссылка на страницу лицензирования документа

next - ссылка на следующую страницу

pingback - ссылка на сервер Pingback

prefetch - указывает на кэширование конечного документа

prev - ссылка на предыдущую страницу

search - ссылка на страницу поиска

sidebar - ссылка на дополнительный элемент,который отразится в боковой панели браузера

stylesheet - ссылка на документ импортируемых стилей

tag - теги документа

Атрибут sizes

Указывает на размер значка (favicon),указанного документа,используется только если импортируемый документ является значком и атрибут rel установлен в положение "icon".

Значения применяемые к атрибуту sizes

ЧислоpxXЧислоpx -  размеры высоты и ширины для значка ( favicon )

any - указывает на масштабируемый значок ( favicon )

Атрибут type

Указывает на тип импортируемого документа.

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг link</title>
<link type="text/css" rel="StyleSheet" href="http://free20860soft.narod.ru/_st/my.css">
</head>
<body>
<p>Импортируем на страницу загруженную на FTP сервер, базовые стили сайта</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <map> устанавливает изображение карту



Тег <map>  предназначен для установки изображения карты на страницу. Под картой подразумевается изображение с интерактивными областями и отмеченными на ней координатами для ссылок на интерактивные области. Сами выделенные области с координатами устанавливаются в теге <area>, их может быть неограниченное количество. Само изображение определяется в теге <img>, оба тега <area> и <img> находятся внутри тега <map>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <map>

Атрибут name

Это обязательный атрибут, он указывает имя для карты-изображения и ассоциируется с атрибутом usemap тега <img>, создавая связь между изображением и картой

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг map</title>
</head>
<body>
<div align="center">
<figure>
<img src ="http://free20860soft.narod.ru/images/image_html/map-area.png" width="214"
height="328" alt="1234" usemap ="#1234">
<map name="1234">
<area shape="rect" coords="0,0,100,100" http://free20860soft.narod.ru/images/image_html/map-area-gus.html" alt="1">
<area shape="rect" coords="0,114,100,214" href="http://free20860soft.narod.ru/images/image_html/map-area-lebed.html" alt="2">
<area shape="rect" coords="0,228,100,328" http://free20860soft.narod.ru/images/image_html/map-area-induk.html" alt="3">
<area shape="rect" coords="114,0,214,100" http://free20860soft.narod.ru/images/image_html/map-area-green.html" alt="4">
</map>
</figure>
</div>
</body>
</html>

Пример в действии

 по ссылке

Тег <marquee> создает бегущую строку на странице.

На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

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

Работает практически во всех браузерах

IE Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+


Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Синтаксис

(закрывающий тэг обязателен)

<marquee>...</marquee>

Атрибуты

behavior
Задает тип движения содержимого контейнера <marquee>.
bgcolor
Цвет фона.
direction
Указывает направление движения содержимого контейнера <marquee>.
height
Высота области прокрутки.
hspace
Горизонтальные поля вокруг контента.
loop
Задает, сколько раз будет прокручиваться содержимое.
scrollamount
Скорость движения контента.
scrolldelay
Величина задержки в миллисекундах между движениями.
truespeed
Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace
Вертикальные поля вокруг содержимого.
width
Ширина области прокрутки.

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег MARQUEE</title>
</head>
<body>
<marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
Привет, друзья!!!
</marquee>
</body>
</html>

Пример в действии

 по ссылке

Тег <mark> выделяет текст



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



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг mark</title>
<style>
mark {
padding:5px;
border:2px solid green;
background-color:red;
font-size:bold;
color:white;
}
</style>
</head>
<body>
<p>Вот обычный и <mark>выделенный</mark> текст</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <menu> добавляет список меню



Тег <menu>  предназначен для добавления списка меню. Список меню формируется с применением тега <li>. На момент создания статьи не поддерживался браузерами. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис

HTML 
<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>
HTML5 
<menu>
...
</menu>

Закрывающий тег

Обязателен.

Валидация

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

Атрибуты тега menu

Атрибут label

Устанавливает вид этикетки списка.

Атрибут type

Определяет тип меню.

Применяемые значения

list -  элементы для активации,флажки чекбоксы и др

context - устанавливает контекстное меню,требуемое активации перед работой с ним

toolbar - устанавливает активное меню

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг menu</title>
</head>
<body>
<p><strong>Сколько стаканов водки выпьете?</strong></p>
<menu>
<li><input type="radio">Один</li>
<li><input type="radio">Дыва</li>
<li><input type="radio">Три</li>
<li><input type="radio">Шиширэ</li>
</menu>
</body>
</html>

Пример в действии

 по ссылке

Тег <meta> устанавливает метатеги



Тег <meta>  предназначен для добавления метатегов на страницу. Возможно использование нескольких вариантов одновременно. Они должны размещаться в пределах тега <head>. Метатеги определяются поисковым роботом по ключевым словам content, name или http-equiv. На сайте uCoz не стоит захламлять страницы модулей этим тегом, лучше от этого не будет, достаточно одного базового, например: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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



Тег работает в браузерах






Атрибуты тега meta

Атрибут charset

Устанавливает кодировку документа, к кодировке могут относится символы

Атрибут content

Устанавливает значение параметра, заданного с помощью атрибутов name или http-equiv

Атрибут http-equiv

Содержит заголовок HTTP для сведения в содержании атрибута content

Применяемые значения

cache-control -  устанавливает управление механизмом кэширования для использования в документе

content-language - устанавливает язык документу страницы

content-type - устанавливает набор символов для содержимого документа,нужно применять кодировку символов

date -  устанавливает дату создания страницы

expires - устанавливает дату до которой страница будет актуальна

last-modified - устанавливает дату последнего изменения

location - устанавливает адрес URL на который перенаправляет ( кидает на другую страницу )

refresh - устанавливает интервал времени для самообновления страницы

set-cookie - устанавливает время действия куков

window-target - устанавливает идентификатор загружаемого фрейма

Атрибут name

Предоставляет имя для информации в атрибуте content

Применяемые значения

abstract - определяет вторичное описание

author - определяет автора страницы

classification - классифицырует страницу по категории

copyright - устанавливает данные копирайта

description - ключевое описание страницы (для модулей uCoz не применяется,только для страницы с индивидуальным дизайном)

distribution - устанавливает страницу в интернете или в интрасети

doc-class - определяет завершенный статус документа

doc-rights - определяет статус авторских прав документе

doc-type - определяет тип документа

DownloadOptions - определяет какие кнопки отображаются на диалоговом окне загрузки файла

expires - определяет срок истечения действия страницы

generator - определяет имя программы которая генерирует документ

googlebot - информирует робота Google о правилах индексации страницы (не думайте что на сайте uCoz этот атрибут сыграет роль)

keywords - ключевые слова страницы (не имеет актуальности применения, выделяйте тегами ключевые слова)

name - определяет имя документа

owner - указывает на владельца страницы

progid - определяет идентификатор программы, используемой для создания страницы

rating - определяет рейтинг страницы

refresh - определяет время показа страницы перед загрузкой другого адреса

reply-to - определяет адрес электронной почты контакта для страницы

resource-type - определяет тип ресурса на котором находится страница

revisit-after - определяет, как часто поисковые роботы должны пересматривать материалы сайта (не стоит применять если не понимаете смысл)

robots - определяет механизм индексации страницы для роботов, двигатель индексации поиска и правила перехода на ссылки, при этом атрибут content должен содержать список разделенных запятыми значения:
ALL - роботы должны следовать ссылкам, индексировать и архивировать страницу
FOLLOW - роботы должны следовать ссылкам с этой страницы
INDEX - роботы должны включать в себя и индексировать эту страницу
NOARCHIVE - не допускает архивирование страницы поисковыми системами
NOINDEX - роботы должны следовать ссылкам, но не индексировать страницу
NOFOLLOW - страницы могут быть проиндексированы, но ссылки не должны следовать
NONE - поисковые роботы могут игнорировать страницу
(Для uCoz, о правилах индексирования сайта, или отдельных модулей или страниц, указывайте в файле robot.txt)

Template - атрибут content должен указать местоположение шаблона, используемого для редактирования документа

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тэг meta</title>
</head>
<body>
<p>Лучше один раз спросить и десять раз сделать, чем десять раз переделать, а для чего не спросить.</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <meter> определяет измерения



Тег <meter> определяет измерения с указанием соотношения минимальных значений к максимальным. Не используется в качестве индикаторов изменения значений для которых применяется тег <progress>. На момент создания статьи поддерживался не всеми браузерами. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах






Атрибуты тега <meter>

Атрибут form

Производит измерение принадлежащее форме, но расположенное вне формы, определяет одну или несколько форм к которым принадлежит измеритель. Значением атрибута form должно быть id (идентификатором) формы, к которой он принадлежит. Для ссылки на более чем одну форму, используется список, разделенный пробелами

Атрибут high

Указывает в какой момент значение измерения является высоким значением в измерении

Атрибут low

Указывает в какой момент значение измерения является низким значением в измерении

Атрибут optimum

Указывает на оптимальное значение в измерении

Атрибут max

Указывает на максимальное значение в измерении, по умолчанию 1.0

Атрибут min

Указывает на минимальное значение в измерении, по умолчанию 0

Атрибут value

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

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг meter</title>
</head>
<body>
<meter value="1" min="0" max="10">10%</meter>
<br>
<meter value="5" min="0" max="10">50%</meter>
<br>
<meter value="10" min="0" max="10">100%</meter>
</body>
</html>

Пример в действии

 по ссылке

Тег <nav> предназначен для навигации



Тег <nav> предназначен для добавления навигации на страницу. Может использоватся как навигация на предыдущую и следующую страницу. В таком случае нужно использовать атрибут rel тега <a>. Положение элементов навигации регулируется свойствами CSS. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах






Атрибуты тега <nav>

Атрибут form

Производит измерение принадлежащее форме, но расположенное вне формы, определяет одну или несколько форм к которым принадлежит измеритель. Значением атрибута form должно быть id (идентификатором) формы, к которой он принадлежит. Для ссылки на более, чем одну форму, используется список разделенный пробелами

Атрибут high

Указывает в какой момент значение измерения является высоким значением в измерении

Атрибут low

Указывает в какой момент значение измерения является низким значением в измерении

Атрибут optimum

Указывает на оптимальное значение в измерении

Атрибут max

Указывает на максимальное значение в измерении, по умолчанию 1.0

Атрибут min

Указывает на минимальное значение в измерении, по умолчанию 0

Атрибут value

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

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг nav</title>
<style>
nav {
position:relative;
width:100%;
height:auto;
}
a#prev {
width:30%;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid green;
background-color:blue;
font-weight:bold;
color:white;
text-align:center;
float:left;
}
a#next {
width:30%;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid green;
background-color:blue;
font-weight:bold;
color:white;
text-align:center;
float:right;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<nav>
<a href="#" rel="prev" id="prev">Назад</a>
<a href="#" rel="next" id="next">Вперед</a>
</nav>
</body>
</html>

Пример в действии

 по ссылке

Тег <nobr> уведомляет браузер отображать текст без переносов

Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега <nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит.

Синтаксис

<nobr>Текст</nobr>

Тег работает в браузерах




Аналог CSS

white-space

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Атрибуты

Нет.

Тег <noembed>

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

Плагином называется подключаемый к браузеру программный модуль, расширяющий возможности браузера. Например, к плагинам можно отнести поддержку Flash, QuickTime VR, VRML и т.д.

Синтаксис

<noembed>Текст</noembed>

Закрывающий тег обязателен.

Атрибутов нет

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Тег <noframes> информирует браузеры, не поддерживающие фреймы



Тег <noframes> предназначен для информирования браузеров не поддерживающих фреймы. В HTML5 не применяется

Тег <noscript> устанавливает комментарий не работающим скриптам



Тег <noscript> предназначен для добавления альтернативного комментария отключенным пользователем, или не работающим в браузере скриптам. Комментарий отобразится только, если скрипт не будет работать по тем или иным причинам. Если скрипт работает, комментарий не будет выдаваться. Тег работает в HTML5



Тег работает в браузерах




Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг noscript</title>
</head>
<body>
<script type="text/javascript">
document.write("При поддержке скриптов будет эта надпись")
</script>
<noscript>Ваш браузер не поддерживает скрипты</noscript>
</body>
</html>

Пример в действии

 по ссылке

Тег <object> загружает объекты



Тег <object> загружает и воспроизводит объекты различного типа. К таким объектам относятся изображения, аудио, видео, Java-аплеты, ActiveX, PDF и Flash. Обычно для их воспроизведения требуется присутствие подключаемых модулей или внешних программ и плагинов. Можно использовать тег <embed>, он тоже подходит для загрузки объектов. В HTML5 личных атрибутов поубавилось, но актуальность применения безусловно осталась. Тег поддерживает глобальные артибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <object>

Атрибут data

Определяет адрес загружаемого объекта, если объект находится на стороннем ресурсе, то адрес должен быть полным, если на этом же, то достаточно оносительного, например (/images/image_html/kisa354.swf)

Атрибут height

Определяет высоту загружаемого объекта

Атрибут type

Определяет MIME тип загружаемого объекта

Атрибут usemap

Ассоциируется с атрибутом name тега <map>, и создает связь между изображением и картой

Атрибут width

Определяет ширину загружаемого объекта

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег object</title>
</head>
<body>
<object data="/images/image_html/kisa354.swf" height="550" width="550">
</object>
</body>
</html>

Пример в действии

 по ссылке

Тег <ol> добавляет нумерацию в список меню



Тег <ol>  предназначен для добавления нумерации в список меню. В HTML5 используются новые атрибуты, они описаны ниже. Нумерация может исполнятся в сторону возврастания и в сторону убывания. Форматирование нумерации производится свойствами CSS. Свойствами CSS возможно изменить порядок выделения последовательной нумерации, имеется в виду применение свойств псевдокласса :nth-child. Список меню формируется с применением тега <li>. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5


Тег работает в браузерах





Атрибуты тега <ol>

Атрибут reversed

Устанавливает порядок нумерации от большего значения к меньшему, если отсутствует нумерация происходит в порядке возрастания от меньшего к большему (на момент выхода статьи поддерживался не всеми браузерами)

Атрибут start

Устанавливает начало нумерации, если отсутствует нумерация начинается с 1 (единицы)

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг ol</title>
<style>
ol#one {
color:red;
}
ol#two :nth-child(even) {
color:green;
}
</style>
</head>
<body>
<div align="center">
<ol>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ol>
<ol reversed="reversed" start="10">
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ol>
<ol id="one" start="10">
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ol>
<ol id="two">
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ol>
</div>
</body>
</html>

Пример в действии

 по ссылке

Тег <optgroup> создаёт сгруппированный список



Тег <optgroup>  предназначен для группирования связанных элементов в список. Заголовок для списка выделяется жирным начертанием, а элементы связанные с заголовком выстраиваются в списке с отступом от левой части. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <optgroup> (закрывающий тэг обязателен)


<select>
<optgroup label="Заголовок">
<option>Элементы списка</option>
</optgroup>
</select>

Тег работает в браузерах




Атрибуты тега <optgroup>

Атрибут label

Устанавливает заголовок для связанных с ним элементов списка

Атрибут disabled

Отключает группу элементов списка

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг optgroup</title>
</head>
<body>
<select>
<optgroup label="HTML5">
<option value="tag">Теги</option>
<option value="atribut">Атрибуты</option>
<option value="article">Статьи</option>
</select>
</body>
</html>

Пример в действии

 по ссылке

Тег <option> определяет пункты списка



Тег <option>  предназначен для определения пунктов списка находящихся внутри тега <select>. Ширина списка устанавливается исходя из длинны пункта находящегося внутри тега, если не применяется заголовок для группы списков. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <option> (закрывающий тэг не обязателен)


<select>
<option>Пункт списка</option>
<option>Пункт списка</option>
</select>

Тег работает в браузерах





Атрибуты тега <option>

Атрибут label

Устанавливает название в виде текста для используемого пункта

Атрибут disabled

Отключает пункт в списке

Атрибут selected

Устанавливает пункт первым в списке

Атрибут value

Устанавливает значение в кнопке для отправки

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг option</title>
</head>
<body>
<select>
<option value="tag">Теги</option>
<option value="atribut">Атрибуты</option>
<option value="article">Статьи</option>
</select>
</body>
</html>

Пример в действии

 по ссылке

Тег <output> определяет область расчётов



Тег <output>  предназначен для определения области расчётов, преимущественно расчёты производятся с помощью скриптов. На момент создания статьи поддерживался только браузером Opera. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <output> (закрывающий тэг обязателен)


<output>Элемент расчёта</output>

Тег работает в браузерах




Атрибуты тега <output>

Атрибут for

Устанавливает один или несколько расчётных элементов к которым относится выходное поле, в качестве значения используется идентификатор

Атрибут form

Устанавливает один или несколько форм к которым принадлежит тег <output>, в качестве значения используется идентификатор

Атрибут name

Устанавливает имя объекта для отправки в форме

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг output</title>
</head>
<body>
<input name="num" type="number"> +
<input name="nume" type="number"> =
<output name="result" onforminput="value=num.valueAsNumber + nume.valueAsNumber">
</output>
<br>
<input type="submit" value="Результат">
</body>
</html>

Пример в действии

 по ссылке

Тег <p> определяет параграф текста



Тег <p>  предназначен для определения параграфа. Создаёт отступы вокруг себя, в HTML5 атрибутов не имеет, для дополнительного форматирования используйте свойства CSS. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <p> (закрывающий тэг обязателен)


<p>Параграф</p>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг p</title>
<style>
font-face {
font-family:MarckScript-Regular;
src: local("MarckScript-Regular"),
url(/images/image_html/MarckScript-Regular.ttf);
}
p {
font-size:18px;
}
p#one {
color:red;
}
p#two {
font-family:MarckScript-Regular;
color:green;
}
p#tree:hover {
font-size:20px;
color:blue;
}
</style>
</head>
<body>
<p>Просто текст</p>
<p id="one">Красный текст</p>
<p id="two">Зелёный текст и изменённый шрифт</p>
<p id="tree">При наведении изменяем цвет и размер шрифта</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <param> определяет параметры передачи аплетов и объектов



Тег <param>  предназначен для определения передаваемых значений Java аплетов и объектов находящихся в теге <object>. Предназначен изменять характеристики аплета без его дополнительной компиляции. Возможна установка нескольких тегов <param>, при указанных параметрах в атрибутах. В HTML5 атрибутов стало меньше, ниже представлены относящиеся к этому типу построения документа. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <output> (закрывающий тэг отсутствует)


<output>Элемент расчёта</output>

Тег работает в браузерах





Атрибуты тега <param>

Атрибут name

Устанавливает имя используемого параметра

Атрибут value

Устанавливает значение используемого параметра

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг param</title>
</head>
<body>
<object width="180" height="180" id="mju">
<param name="allowScriptAccess" value="sameDomain" />
<param name="swLiveConnect" value="true" />
<param name="movie" value="http://free20860soft.narod.ru/player/mju.swf" />
<param name="flashvars" value="http://free20860soft.narod.ru/player/playlist_mp3.mpl&auto_run=0&repeat=1&shuffle=0&anti_
cache=1&tt=00590F&tbd=549E00&tbm=BD2C00&tbl=006DCC&lvd=00B9BF&lvl=D40015&ptb=F09000&ptp=DB0700&pnp=046B00&mdp=0061F2&vcp=D63900&nm=0F9400&nt=A30021&tm=ED2F00&tl=06B500" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><embed src="http://free20860soft.narod.ru
/player/mju.swf" flashvars="playlist=
http://free20860soft.narod.ru/
player/playlist_mp3.mpl&auto_run=0&repeat=1&shuffle=0&anti_cache=1&tt=00590F&tbd=549E00&tbm=BD2C00&tbl=006DCC&lvd=00B9BF&lvl=D40015&ptb=F09000&ptp=DB0700&pnp=046B00&mdp=0061F2&vcp=D63900&nm=0F9400&nt=A30021&tm=ED2F00&tl=06B500" loop="false" menu="false" quality="high"
wmode="transparent" bgcolor="#000000" width="180" height="180" name="mju" allowScriptAccess="sameDomain" swLiveConnect="true" type="application/x-shockwave-flash" pluginspage=
"http://www.macromedia.com/go/getflashplayer" /></object>
</body>
</html>

Пример в действии

 по ссылке

Тег <plaintext>

IE Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<plaintext>Текст</plaintext>

Закрывающий тег yе обязателен.

Атрибуты

Нет.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег PLAINTEXT</title> </head> <body> <p>Пример программы</p> <plaintext> <h1>Демонстрация метода Подборского</h1> while (<>) { $org=$_; s/\\["']//g; s/\/\/[^:].*//; s/\/\*.*\*\///g; if ($comment == 1) { if (s/.*\*\///) { $comment = 0; } else { next; } } if (s/\/\*.*//) { $comment = 1; } if (/^\s*#/) { next; } }</plaintext>
</body>
</html>
Результат данного примера показан ниже.
tag_plaintext

Рис. 1. Вид текста, оформленного с помощью тега <plaintext>

Все браузеры игнорируют закрывающий тег и отображают его в виде текста. Это можно заметить на рис. 1, где показан результат выполнения кода в браузере. Тег <plaintext> действует до конца кода веб-страницы, включая закрывающие теги </body> и</html>.

Тег <pre>

определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Синтаксис

<pre>Текст</pre>

Закрывающий тег обязателен.

Атрибуты

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

Тег работает в браузерах


Пример кода

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег PRE</title>
 </head>
 <body>
  <pre>
	 -                -----  
	 -----           |-----
	||----|          ----||  
	||-----         -----||  
	||-----|       |-----||
	|| -----       ------||
	||- ----|     |------||
	||---||--     -------||
	||--|| --|   |-------||
	|| -|| |--   --- - --||
	|| -||  --|-|--| - ---|
	|---||  |-----| |-----|
	|---||   |----  |-----| 
	|----|    ---   |-----|
	|-----          ------| 
 </pre>
</body>
</html>

Пример в действии

 по ссылке

Тег <progress> устанавливает индикатор прогресса



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



Синтаксис тега <progress> (закрывающий тэг обязателен)


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

Тег работает в браузерах






Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег progress</title>
</head>
<body>
<progress value="50" max="100"><span id="value">50</span>%
</progress>
</body>
</html>

Пример в действии

 по ссылке

Тег <q> короткая цитата



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



Синтаксис тега <q> (закрывающий тэг обязателен)


<q cite="URL">Текст</q>

Тег работает в браузерах



Атрибуты тега <q>

Атрибут cite

Этот атрибут определяет источник цитаты, укажите источник через URL адрес.

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег q</title>
</head>
<body>
<h3>Цитаты Омара Хайама</h3>
<p>О людях:
<q cite="http://www.evkuriy.narod.ru/Mu.html">
Чем ниже человек душой, тем выше задирает нос. Он носом тянется туда, куда душою не дорос.
</q> Омар Хайям</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <rp> анотация



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



Синтаксис тега <rp> (закрывающий тэг обязателен)


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

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг rp</title>
</head>
<body>
<ruby>
水文 <rp>(</rp><rt>Гидрология</rt><rp>)</rp>
</ruby>
</body>
</html>

Пример в действии

 по ссылке

Тег <rt> добавляет анотацию



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



Синтаксис тега <rt> (закрывающий тэг обязателен)


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

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг rt</title>
<style>
.time {
font-size: 20px;
}
.time ruby {
background: green; color: #ffffff; padding: 20px;
}
.time rt {
background: red; color: #ffffff;
}
</style>
</head>
<body>
<p class="time"><ruby><rt>00:00</rt>Время</ruby></p>
</body>
</html>

Пример в действии

 по ссылке

Тег <ruby> аннотация символов



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



Синтаксис тега <ruby> (закрывающий тэг обязателен)


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


Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг ruby</title>
</head>
<body>
<ruby>
►<rt>Треугольник в право</rt>
<br />
◄<rt>Треугольник в лево</rt>
</ruby>
</body>
</html>

Пример в действии

 по ссылке

Тег <s> определяет неверный текст



Тег <s> предназначен для определения неверного текста. Текст может потерять актуальность или релевантность, тогда его нужно поместить внутри этого тега. Текст помещённый внутри тега, отображается как подчёркнутый. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <s> (закрывающий тэг обязателен)


<s>
Неверный текст
</s>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг s</title>
</head>
<body>
<h3>Берём на рыбалку</h3>
<p><s>Водку</s></p>
<p><s>Закусь</s></p>
<p>Удочки</p>
<p>Наживку</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <samp> определяет програмный текст



Тег <samp> предназначен для определения програмного текста. Применяется при выводе текста сопровождающего действие програмного кода или скрипта, используется как дополнительное описание к основному програмному коду. Текст помещённый внутри тега, отображается как моноширный. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <samp> (закрывающий тэг обязателен)


<samp>
Програмный текст
</samp>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг samp</title>
</head>
<body>
<code><samp>Информация о коде</samp>
</code>
</body>
</html>

Пример в действии

 по ссылке

Тег <script> устанавливает скрипт



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


Пример.
<!--
Код скрипта
//-->

Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <script> (закрывающий тег обязателен!)


<script>Элемент кода</script>

Тег работает в браузерах



Атрибуты тега <script>

Атрибут async

Атрибут async определяет, будет ли сценарий скрипта выполнятся асинхронно

Атрибут charset

Атрибут charset определяет кодировку символов

Атрибут defer

Атрибут defer указывает, что скрипт не будет генерировать содержание документа

Атрибут src

Атрибут src указывает URL адрес скрипта

Атрибут type

Атрибут type указывает MIME тип документа

Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег script</title>
</head>
<body>
<script type="text/javascript">
<!--
Now = new Date();
document.write("Вы попали на эту страницу в: " + Now.getHours() + ":" + Now.getMinutes() + ":" + Now.getSeconds());
//-->
</script>
</body>
</html>

Пример в действии

 по ссылке

Тег <section> устанавливает секцию



Тег <section>  предназначен для установки секции на страницу. Секция может включать в себя любые типы документов. Секции могут быть вложены друг в друга, сопоставимо разделам документа. Так же секции могут иметь раздельный вариант установки, если тема меняется не наследуясь, а переходя на другую. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <section> (закрывающий тег обязателен!)


<section>Элемент </section>

Тег работает в браузерах



Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег section</title>
</head>
<body>
<section>
<h3>Месяцы осени</h3>
<p>Сентябрь<br>Октябрь<br>Ноябрь</p>
</section>
</body>
</html>

Пример в действии

 по ссылке

Тег <select> устанавливает список выбора



Тег <select>  предназначен для установки списка выбора. Пункты списка определяются тегом <option>, и могут находится в неограниченном количестве. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <select> (закрывающий тег обязателен!)


<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
 </select>

Тег работает в браузерах



Атрибуты тега <select>

Атрибут autofocus

Атрибут autofocus определяет, будет ли поле выбора получать фокус при загрузке

Атрибут disabled

Атрибут disabled откючает список выбора

Атрибут form

Атрибут form определяет одну или несколько форм, к которой принадлежит список

Атрибут multiple

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

Атрибут name

Атрибут name определяет имя списка

Атрибут size

Атрибут size определяет число видимых опций списка

Пример применения тега


<!DOCTYPE html>
 <html>
<head>
<title>Тег select</title>
</head>
<body>
<select>
<option value ="one">Я</option>
<option value ="two">Ты</option>
<option value ="tree">Она</option>
<option value ="tree">Они</option>
<option value ="tree">Мы</option>
</select>
</body>
</html>

Пример в действии

 по ссылке

Тег <small> устанавливает уменьшенный шрифт текста



Тег <small>  предназначен для установки уменьшенного шрифта текста. Шрифт уменьшается на одну единицу от существующего. Дополнительное форматирование производится свойствами CSS. Поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <small> (закрывающий тег обязателен!)


<small>Уменьшенный шрифт</small>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег small</title>
</head>
<body>
<p>Это обычный текст <small>А этот внутри тега</small></p></body>
</html>

Пример в действии

 по ссылке

Тег <span> используется для оформления



Тег <span> используется для оформления других тегов. Для оформления используются стили CSS, может работать как селектор, так и через идентификатор или класс. Применяется при недостатке вложения стилей, и при любых других обстоятельствах, когда нужно подправить стиль на месте. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг span</title>
<style>
a {
text-decoration:none;
font-size:20px;
color:red;
}
span {
width:180px;
height:180px;
display:block;
border-radius:66px;
-moz-border-radius:66px;
-webkit-border-radius:66px;
border:blue 4px solid;
font-size:18px;
color:#ffffff;
line-height:90px;
text-shadow:0 2px 0 #000000;
text-align:center;
background:green;
}
span:hover {
border:green 4px solid;
color:#ffffff;
text-shadow:0 1px 0 red;
background:blue;
 }
</style>
</head>
<body>
<a href="http://free20860soft.narod.ru/">
<span>Бесплатные программы</span><br>free20860soft.narod.ru</a>
</body>
</html>

Пример в действии

 по ссылке

Тег <strong> устанавливает акцент



Тег <strong> акцентирует текст внутри себя. Дополнительно выделяется жирным шрифтом, но форматируется свойствами CSS. Является альтернативой заголовку и применяется в объёмных списках, например меню. Разумеется, можно использовать в любой подходящей ситуации, где нужно выделить текст по значению выше остального. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг strong</title>
</head>
<body>
<p>Просто текст. <strong>А это важный текст.</strong></p>
</body>
</html>

Пример в действии

 по ссылке

Тег <style> добавляет стиль



Тег <style> предназначен для добавления стилей в документ. Указанные стили наследуются на все указанные элементы, в HTML5 добавлен атрибут scoped, устанавливающий стили наследуемым элементам. Если он указывается без этого атрибута, то должен располагатся в зоне <head>, но для сайта uCoz не обязательно, можно использовать в материале. Выполняет основную работу по корректировке указанными значениями. В основном используется для установки стилей свойствами CSS. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <style>

Атрибут type

Определяет MIME тип загружаемых стилей,обычно используется значение text/css

Атрибут media

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

Атрибут scoped

Устанавливает стили дочерним элементам в документе

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг style</title>
<style>
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<iframe width="255" height="300" src="http://web2.0calc.com/widgets/
minimal/" scrolling="no" style="border: 1px solid silver;"> </iframe>
</body>
</html>

Пример в действии

 по ссылке

Тег <sub> опускает текст



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



Синтаксис тега <sub> (закрывающий тэг обязателен)


<sub>Текст</sub>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег sub</title>
</head>
<body>
<sub>
<p>Это обычный текст. <sub>Этот внутри тега</sub> Это снова обычный текст.</p>
</sub>
</body>
</html>

Пример в действии

 по ссылке

Тег <summary> описание документа



Тег <summary> служит для описания докумета, используется в теге <details>, который скрывает вложенную информацию. Используется для информирования робота о вложенном документе. На момент создания статьи поддерживался только браузером Google Chrome. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Синтаксис тега <summary> (закрывающий тэг обязателен)


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

Тег работает в браузерах




Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег summary</title>
</head>
<body>
<details><summary>Author: Kuriy Evgeniy <sup>®</sup></summary></details></body>
</html>

Пример в действии

 по ссылке

Тег <sup> поднимает текст



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



Синтаксис тега <sup> (закрывающий тэг обязателен)


<sup>Текст</sup>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег sup</title>
</head>
<body>
<sub>
<p>Это обычный текст. <sup>Этот внутри тега.</sup> Это снова обычный текст.</p>
</sub>
</body>
</html>

Пример в действии

 по ссылке

Тег <table> добавляет таблицу



Тег <table> служит для добавления таблицы на страницу. В простой таблице находятся теги <tr> (определяет строки таблицы),<th> (определяет заголовок таблицы),<td> (определяет ячейку таблицы). Для более сложного построения используются теги <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>. В HTML5 имеет только один личный атрибут border, все остальные настройки производятся вложенными тегами и свойствами CSS. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <table>

Атрибут border

Атрибут определяет видимую границу таблицы, применимо только 2 значения "1" (границу видно) и "0" (границу не видно).

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег table</title>
</head>
<body>
<table border="1">
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <tbody> группирует содержимое таблицы



Тег <tbody> служит для группирования элементов в таблице. Группированными элементами могут другие теги, применяемые в составлении таблицы. Основными тегами, применяемыми вместе с <tbody>, являются теги <thead> (группирует содержимое) и <tfoot> (устанавливает нижний колонтитул). Тег <tfoot> устанавливается до <tbody> для первоочередного определения браузером. И должно выполнятся условие установки тегов: если присутствует один из тегов <tbody>, <thead> или <tfoot>, то они должны присутствовать все в построении таблицы. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег tbody</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
<tbody>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <td> устанавливает ячейку в таблице



Тег <td> служит для добавления ячейки в таблицу. Устанавливается после тега <tr>. В HTML5 атрибутов поубавилось,с мотрите применяемые атрибуты ниже. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <td>

Атрибут colspan

Атрибут определяет сколько столбцов будет объединено

Атрибут headers

Атрибут определяет заголовки для ячеек по идентификатору

Атрибут rowspan

Атрибут определяет сколько строк будет объединено,указывается числовым значением

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег td</title>
</head>
<body>
<table border="1">
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <tfoot> устанавливает нижний колонтитул



Тег <tfoot> служит для добавления нижнего колонтитула ячейки в таблице. Тег <tfoot> устанавливается до <tbody> для первоочередного определения браузером. В HTML5 личных атрибутов не имеет. Должно выполнятся условие установки тегов: если присутствует один из тегов <tbody>, <thead> или <tfoot>, то они должны присутствовать все в построении таблицы. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег tfoot</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
<tbody>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <th> устанавливает заголовок ячейке в таблице



Тег <th> служит для добавления заголовка ячейке в таблице. Количество заголовков должно быть равно количеству ячеек указанных в теге <td>, если они находятся на одной линии. В HTML5 атрибутов прибавилось, смотрите применяемые атрибуты ниже. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <th>

Атрибут audio

Определяет состояние звука, используемое значение muted (звука нет)

Атрибут autoplay

Воспроизведение начнётся сразу после загрузки

Атрибут controls

Делает кнопки управления видимыми

Атрибут height

Определяет высоту плеера

Атрибут loop

Повторное воспроизведение

Атрибут poster

Определяет установленное изображение заставку, картинка указывается через URL

Атрибут preload

Загружает объект воспроизведения, сработает если не указан атрибут autoplay. Применяемые значения auto (загружаются все объекты), metadata (загружаются только мета данные), none (объекты не загружаются)

Атрибут src

Отключает URL адрес для загрузки объекта

Атрибут width

Определяет ширину объекта

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег th</title>
</head>
<body>
<table border="1">
<tr>
<th>
Заголовок
</th>
<th>
Заголовок
</th>
<th>
Заголовок
</th>
</tr>
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <thead> группирует содержание заголовка



Тег <thead> служит для группирования содержания заголовков используемых в таблице. В HTML5 личных атрибутов не имеет. Тег <tfoot> устанавливается до <tbody>, для первоочередного определения браузером. И должно выполнятся условие установки тегов: если присутствует один из тегов <tbody>, <thead> или <tfoot>, то они должны присутствовать все в построении таблицы. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег thead</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Ячейка
</td>
<td>
Ячейка
</td>
</tr>
<tbody>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <time> устанавливает дату и время



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



Тег работает в браузерах





Атрибуты тега <time>

Атрибут datetime

Атрибут datetime определяет формат даты

Применяемые значения

Указываем полностью, для указания времени разделяем дату и время латинской T

2013-06-28T17:00:00+03:00

Указываем только год

2013

Указываем год и месяц

2013-06

Указываем год, месяц и число

2013-06-28

Указываем год, месяц, часы и минуты

2013-06-28T17:00

Указываем год, месяц, число, минуты и секунды

2013-06-28T17:00:00

pubdate

Атрибут определяет дату и время создания материала, указывается в теге <article>

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег time</title>
</head>
<body>
<p>Демо страничку сделал в
<time>2013-06-28T17:00:00+03:00
</time></p>
<article>
<p>Закончил делать
<time datetime="2013-06-28T17:00:00+03:00">
через пять минут
</time></p>
</article>
</body>
</html>

Пример в действии

 по ссылке

Тег <title> определяет название документа



Тег <title> служит для названия страницы. Название имеет большую значимость для робота, оно не должно быть слишком длинным, отражайте в нём краткую суть составляемого документа страницы. На сайте uCoz в теге <title> установлены условные операторы, нельзя заменять их текстовыми значениями, это может негативно сказатся на индексации страниц модулей. Тег поддерживает глобальные атрибуты в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег title</title>
</head>
<body>
<p>Тег title обязателен к установке на страницу</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <tr> определяет строку в таблице



Тег <tr> определяет строку в таблице, внутри тега располагаются теги <th> (заголовок) и <td> (контент). В HTML5 личных атрибутов не имеет. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег tr</title>
</head>
<body>
<table border="1">
<tr>
<th>
Заголовок
</th>
</tr>
<tr>
<td>
Контент
</td>
</tr>
</table>
</body>
</html>

Пример в действии

 по ссылке

Тег <ul> устанавливает ненумерованный список



Тег <ul> устанавливает ненумерованный список. Применяя свойства CSS3, можно установить маркеры списку и дополнить иными визуальными эффектами. В примере показаны сразу 2 применяемых эффекта, без скриптов и картинок, на чистых свойствах CSS3. В HTML5 личных атрибутов не имеет. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег ul + эффекты CSS3</title>
<style>
ul {
padding:0;
margin:0;
}
li {
position:relative;
z-index:1;
overflow:hidden;
list-style:none;
padding:0;
margin:0 0 0.25em;
}
li a:link,
li a:visited {
display:block;
border:0;
padding-left:28px;
color:#02B6F1;
}
li a:hover,
li a:focus,
li a:active {
color:blue;
background:transparent;
}
li:before,
li:after,
li a:before,
li a:after {
content:"";
position:absolute;
top:50%;
left:0;
}
li a:before,
li a:after {
margin:-8px 0 0;
background:#02B6F1;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
background:blue;
}
.home a:before {
left:1px;
border-style:solid;
border-color:transparent;
border-width:8px 7px;
border-bottom-color:#02B6F1;
margin-top:-16px;
background:transparent;
}
.home a:after {
left:3px;
width:2px;
height:4px;
border-style:solid;
border-color:#02B6F1 #02B6F1 transparent;
border-width:3px 4px 0;
margin-top:0;
background:transparent;
}
.home a:hover:before,
.home a:focus:before,
.home a:active:before {
border-bottom-color:blue;
background:transparent;
}
.home a:hover:after,
.home a:focus:after,
.home a:active:after {
border-color:blue blue transparent;
}
.video a:before {
left:2px;
width:14px;
height:12px;
margin-top:-6px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}
.video a:after {
left:14px;
border-style:solid;
border-width:5px 6px 5px 0;
border-color:transparent;
border-right-color:#02B6F1;
margin-top:-5px;
background:transparent;
}
.video a:hover:after,
.video a:focus:after,
.video a:active:after {
border-right-color:blue;
}
#nav li a {
    position: relative;
    transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -o-transition: left .3s linear;
}
#nav li a:hover {
    left: 10px;
}
</style>
</head>
<body>
<ul id="nav">
<li class="home"><a href="#" title="Home">Home</a></li>
<li class="video"><a href="#" title="Video">Video</a></li>
<ul>
</body>
</html>

Пример в действии

 по ссылке

Тег <var> выделяет переменную



Тег <var> выделяет переменную, применяемую для компьютерных программ. Текст помещённый внутри тега, выделяется курсивным начертанием. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег var</title>
</head>
<body>
<p>
Обычный текст. <var>Текст внутри тега.</var>
</p>
</body>
</html>

Пример в действии

 по ссылке

Тег <video> загружает видео



Тег <video>  предназначен для загрузки видео объектов. Предварительно видео объект подвергается перекодированию. Страница, на которой используется видео, должна поддерживать видео кодеки. Тег поддерживает глобальные атрибуты, а так же атрибуты событий в HTML5



Тег работает в браузерах





Атрибуты тега <video>

Атрибут audio

Атрибут audio определяет положение звука видео, допустимое значение muted (без звука)

Атрибут autoplay

Атрибут autoplay определяет автоматическое воспроизведение, сразу после загрузки страницы, используемое значение autoplay (включить автоматическое воспроизведение)

Атрибут controls

Атрибут controls определяет элементы управления для видео, используемое значение controls (элементы управления присутствуют)

Атрибут height

Атрибут height определяет высоту видеоплеера, применяются значения px (пикселей)

Атрибут src

Атрибут src указывает путь к воспроизводимому файлу

Атрибут loop

Атрибут loop определяет повторное воспроизведение видео после окончания, применяемое значение loop

Атрибут poster

Атрибут poster определяет изображение заставку для видео,применяемое значение url (адрес заставки изображения)

Атрибут preload

Атрибут preload определяет загрузку видео, если не указан атрибут autoplay. Применяемые значения: auto (загружается всё видео на странице), metadata (загружаются только мета данные видео), none (видео не загружается)

Атрибут width

Атрибут width определяет ширину видеоплеера, применяются значения px (пикселей)

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег video</title>
</head>
<body>
<video width="240" height="140" controls="controls">
<source src="http://free20860soft.narod.ru/images/image_html/video.ogv" >
</video>
</body>
</html>

Пример в действии

 по ссылке

Тег <wbr> определяет перенос



Тег <wbr> предназначен для установки места переноса слова, если нужно, чтобы слово переносилось именно в определённом месте, а не в том, которое определит браузер (равноценно тирэ при преносе слова, которое неудобно упёрлось в конец листа). Тег поддерживает глобальные атрибуты и атрибуты событий в HTML5

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг wbr</title>
</head>
<body>
<p>
Тяжело в уче<wbr>нье - легко в бою. Так гова<wbr>ривал великий полко<wbr>водец Суворов А.В.
</p>
</body>
</html>

Пример в действии

 по ссылке
Поделись ссылкой на эту страницу с друзьями:
343434
Ты не поверишь!
Слушаем радио online!
  • Плей-лист станций
Плеер mp3!
  • Плей-лист mp3 плеера
Поиск
Друзья сайта
  • Программы, драйвера...
  • Программы по оптимизации и для ускорения работы

Наш баннер для обмена
Яндекс.Метрика Правильный CSS!
Desing by Курий Е.В. | | Copyright evkuriy © 2025