Справочник HTML тегов
Так как все модели сайтов имеют одну и ту же структуру написания веб страниц, справочник может быть полезен не только вебмастеру 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>
Пример в действии
Тег <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>
Пример в действии
Тег 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>
Пример в действии
Тег <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>
Пример в действии
Тег <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
<command disabled="disabled">
<!DOCTYPE html>
<html>
<head>
<title>Атрибут disabled</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" disabled="disabled">Здорова всем!</command>
</menu>
</body>
</html>
Атрибут 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
<command label="value">
<!DOCTYPE html>
<html>
<head>
<title>Атрибут label</title>
</head>
<body>
<menu>
<command onclick="alert('Здорова')" label="Alert">Всем здорова!</command>
</menu>
</body>
</html>
Атрибут 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 определяет какой тип команды исполнять: 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> (закрывающий тэг обязателен!)
Тег работает в браузерах
Атрибуты тега <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>
Пример в действии
Тег <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>
Пример в действии
Тег <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>
Пример в действии
Тег <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>
Пример в действии
Тег <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>
Пример в действии
Тег <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>
Пример в действии
Тег <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 |
|
HTML5 |
|
Закрывающий тег
Обязателен.
Валидация
Использование этого тега осуждается спецификацией 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>
Результат данного примера показан ниже.
Рис. 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:00pubdate
Атрибут определяет дату и время создания материала, указывается в теге <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>