названия тегов | краткое описание тегов |
---|---|
<a> | Предназначен для создания ссылок (гипертекста). Атрибуты: name — Присваивает имя элементу. href — Присваивает адрес ресурса, к которому ведет ссылка. для создания ссылки вызова почтовой программы href=»mailto:e-mail» title— Всплывающая подсказка Синтаксис: Читать о теге подробно в учебнике HTML |
<abbr> | Выделяет в тексте аббревиатуру. Обычно подчеркивается пунктирной линией. title— всплывающая подсказка Синтаксис: |
<acronym> | Выделяет в тексте акроним. Обычно подчеркивается пунктирной линией. Атрибуты: title— всплывающая подсказка Синтаксис: |
<address> | Указывает автора документа и его адрес. Обычно отображается курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<area> | Определяет области карты-изображения которые являются ссылками на тот или иной документ. располагается внутри тега <map> Атрибуты: alt — альтернативный текст для области изображения title — всплывающая подсказка href — указывает путь к открываемому документу shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
nohref — область без ссылки на другой документ target — указывает в каком окне следует открывать документ.
<area href=»primer.html» shape=»rect» coords=»15,15,80,80″ alt=»описание» title=»описание» target=»_blank»> не требует закрывающего тега Читать о теге подробно в учебнике HTML |
<b> | Делает текст полужирным. Аналогичен тегу <strong> |
<base> | в редакции.. |
<basefont> | в редакции.. |
<bdo> | Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа — налево. Атрибуты: dir — Направление
Синтаксис: <bdo dir=»rtl» title=»Ваше описание»>Упер казак репу</bdo> |
<bgsound> | Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки. Атрибуты: loop — Указывает на количество повторов воспроизведения файла.
Синтаксис: Не требует закрывающего тега. |
<big> | Делает текст крупным. |
<body> | «Тело» документа указывает содержание видимой части документа. Атрибуты: bgcolor — задаёт цвет фона документа. background — указывает адрес рисунка делая его фоном документа. text — цвет текста документа. link — цвет ссылок. vlink — цвет посещённых ссылок. alink bgproperties=»fixed» — делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown) Синтаксис: Читать о теге подробно в учебнике HTML |
<blockquote> | Предназначен для создания цитат. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<br> | Перенос строки. |
<button> | в редакции.. |
<caption> | в редакции.. |
<center> | Горизонтальное выравнивание всех элементов по центру документа. |
<cite> | Выделяет в тексте цитату. Обычно курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<code> | Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом. Атрибуты: title — всплывающая подсказка Синтаксис: |
<col> | в редакции.. |
<colgroup> | в редакции.. |
<dd> | Описание списка определений. title— Всплывающая подсказка Синтаксис: Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<del> | Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым. Атрибуты: title— всплывающая подсказка Синтаксис: |
<dfn> | Отмечает текст как определение. Обычно отображается курсивом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<div> | Определяет блок HTML. Преимущественно используется совместно с CSS. Атрибуты: align — Выравнивание блока относительно страницы:
unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
<div unselectable=»on» align=»center» title=»подсказка»>Текст в этом блоке нельзя выделить</div> Читать о теге подробно в учебнике HTML |
<dl> | Создаёт список определений. |
<dt> | Определение списка определений. Атрибуты: title— Всплывающая подсказка Синтаксис: <dd>Описание определения </dl> Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<em> | Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<embed> | в редакции.. |
<fieldset> | в редакции.. |
<font> | Шрифт. Атрибуты: size — размер шрифта color — цвет шрифта face — задаёт шрифт из библиотеки шрифтов Синтаксис: Читать о теге подробно в учебнике HTML |
<form> | в редакции.. |
<frame> | Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>. Атрибуты: srs — Путь к документу. Обязательный атрибут name — Присваивает имя фрейму. marginwidth — Отступ в пикселях от левого и правого края фрейма. marginheight — Отступ в пикселях от верхнего и нижнего края фрейма. scrolling — Определяет наличие полос прокрутки содержимого фрейма.
frameborder — Определяет наличие рамок у фрейма.
Синтаксис: Не требует закрывающего тега. Читать о теге подробно в учебнике HTML |
<frameset> | Определяет фреймовую структуру документа. Используется вместо тега <body>. Атрибуты: rows — Определяет количество и размеры горизонтальных фреймов в пикселях процентах или * — использовать всё свободное пространство. cols — Количество и размеры вертикальных фреймов. border — Определяет ширину рамок фреймов в пикселях. frameborder — Определяет наличие рамок у фрейма.
Синтаксис: Читать о теге подробно в учебнике HTML |
<h2> | Делает текст заголовоком. Может иметь значение от 1-6. Атрибуты: align -выравнивание заголовока по:
Синтаксис: Читать о теге подробно в учебнике HTML |
<head> | «Голова» определяет место в документе не для отображения видимой его части «тела» может располагать в себе теги предназначенные для поисковых машин, а так же название документа. |
<hr> | Рисует горизонтальную линию. Атрибуты: align -выравнивание линии по:
width — ширина линии color — присваивает цвет линии noshade — указывает на отсутствие тени линии Синтаксис: Читать о теге подробно в учебнике HTML |
<html> | Указывает программам просмотра html страниц начало и конец документа. |
<i> | Делает текст наклонным. |
<iframe> | Вводит на страницу не фреймовой структуры плавающий фрейм. Атрибуты: src — Путь к вводимому документу (обязательный атрибут) width — ширина плавающего фрейма в пикселях или процентах height — высота плавающего фрейма scrolling — показ полосы прокрутки:
<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″></iframe> Читать о теге подробно в учебнике HTML |
<img> | Выводит графическое изображение (рисунок). Атрибуты: src — адрес рисунка. (обязательный атрибут) align -выравнивание рисунка по:
title— Всплывающая подсказка border — Толщина рамки bordercolor — Цвет рамки width — Ширина рисунка height — Высота рисунка hspace — Горизонтальный отступ vspace — Вертикальный отступ ismap — Изображение является навигационной картой на сервере usemap — Изображение является навигационной картой на стороне клиента. Синтаксис: Читать о теге подробно в учебнике HTML |
<input> | в редакции.. |
<ins> | Выделяет новый текст в новой версии документа. Выделенный текст станет подчёркнутым. Противоположен по значению тегу <del>. Атрибуты: Синтаксис: |
<kbd> | От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом. Атрибуты: title— всплывающая подсказка Синтаксис: |
<label> | в редакции.. |
<legend> | в редакции.. |
<li> | Обозначает элемент списка. Используется в нумерованных и ненумерованных списках. Атрибуты: title— Всплывающая подсказка Синтаксис: Закрывающий тег необязателен. Читать о теге подробно в учебнике HTML |
<link> | Указывает на связь документа с каким либо внешним файлом. Тег <link> является ссылкой, но не для людей а для программ, и ведет к внешнему файлу например иконке или таблице стилей.. Располагается в «голове» документа между тегом <head></head> и не выводится браузерами на экран. Атрибуты:
Синтаксис: Не требует закрывающего тега. |
<map> | Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area> Атрибуты: name — указывает имя графического изображения которое является картой Синтаксис: Читать о теге подробно в учебнике HTML |
<marquee> | Бегущая строка. Атрибуты: behavior — определяет тип скроллинга, может иметь следующие значения:
loop задает количество прокруток бегущей строки. direction — направление движения текста. значения:
height — высота строки, width — ширина строки. title— Всплывающая подсказка Синтаксис: Читать о теге подробно в учебнике HTML |
<meta> | Определяет мета теги информация в которых предназначена для браузеров и поисковых систем. Мета теги не видны пользователю и располагаются в заголовке HTML документа между тегами <head> </head> Атрибуты: Синтаксис: Не требует закрывающего тега. Читать о теге подробно в учебнике HTML |
<nobr> | Запретить перенос строки. Противоположенный по значению тег <br> |
<noembed> | в редакции.. |
<noframes> | Тег <noframes> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. |
<noscript> | Тег <noscript> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках. |
<object> | в редакции.. |
<ol> | Определяет нумерованный (упорядоченный) список. Атрибуты: type-Тип маркера
start — Начальное значение для нумерованного списка Синтаксис: Читать о теге подробно в учебнике HTML |
<optgroup> | в редакции.. |
<option> | в редакции.. |
<p> | Создаёт параграф. Атрибуты: align — Выравнивание параграфа относительно страницы:
Синтаксис: Читать о теге подробно в учебнике HTML |
<param> | в редакции.. |
<pre> | Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк. |
<q> | Предназначен для создания цитат. От <blockquote> отличается тем что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<s> | Делает текст перечёркнутым. Аналогичент тегу <strike>. |
<samp> | Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображается моноширинным шрифтом. Атрибуты: Синтаксис: |
<script> | Внедряет на страницу скрипт. Атрибуты: defer — Указывает на то что перед выполнением скрипта следует полностью загрузить документ в который он внедрён. type — Определяет тип содержимого тега <script> language — Определяет язык скрипта.
Синтаксис: |
<select> | в редакции.. |
<small> | Делает текст малым. |
<span> | Определяет контейнер для внутреннего текста. Как правило используется совместно с CSS. Атрибуты: title — Всплывающая подсказка. unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
<span unselectable=»on» title=»Описание»>Первое</span> слово в параграфе имеет собственыые свойства |
<strike> | Делает текст перечёркнутым. Аналогичент тегу <s>. |
<strong> | Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным. Атрибуты: title— всплывающая подсказка Синтаксис: |
<style> | Служит для определения стилей элементов страницы. Тег <style> распологается в заголовке страницы между <head></head>. Атрибуты: media — Указывает на устройство вывода, для работы с которым предназначена таблица стилей.
Стили style type=»text/css»> a:link { color: #008000; text-decoration: none; font-size: 14px; } a:hover { text-decoration: none; color: #ff0000; font-size: 18px; } </style> открыть страницу |
<sub> | Нижний индекс. |
<sup> | Верхний индекс. |
<table> | Создаёт таблицу. Атрибуты: align — Выравнивание таблицы по:
border — Толщина бордюра в пикселях. background — Задает фоновый рисунок в таблице. bordercolor — Цвет бордюра. cellspacing — Расстояние между ячейками таблицы. cellpadding — Расстояние между содержимым ячейки и рамкой. width — Ширина таблицы в процентах или пикселях. height — Высота таблицы в процентах или пикселях. cols — Определяет число колонок в таблице. Позволяет браузерам показывать содержимое таблицы ещё до окончания её полной загрузки. frame — Определяет в каких местах таблицы следует показывать бордюр.
table cols=»2″ border=»5″ frame=»vsides» align=»center» cellpadding=»5″ cellspacing=»2″ bgcolor=»#ffa0cf»> строка1 ячейка1 строка1 ячейка2 строка2 ячейка1 строка2 ячейка2 </table> Читать о теге подробно в учебнике HTML |
<tbody> | в редакции.. |
<td> | Создаёт отдельную ячейку в таблице. Атрибуты: width — Ширина ячейки в процентах или пикселях height — Высота ячейки в процентах или пикселях align — Выравнивает текст в ячейке:
rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке. bordercolor — Цвет бордюра. title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке. Синтаксис: Читать о теге подробно в учебнике HTML |
<textarea> | в редакции.. |
<tfoot> | в редакции.. |
<th> | Создаёт ячейку в таблице которая определяется как заголовок. Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным. Атрибуты: align — Выравнивает текст в ячейке:
rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке. bordercolor — Цвет бордюра. title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке. Синтаксис: |
<thead> | в редакции.. |
<title> | Заголовок и название документа. |
<tr> | Создаёт строку в таблице. Атрибуты: align — Выравнивает текст в ячейках строки:
bgcolor — Цвет фона ячеек строки Синтаксис: Читать о теге подробно в учебнике HTML |
<tt> | Делает текст моноширинным. |
<u> | Делает текст подчёркнутым. |
<ul> | Определяет ненумерованныый (неупорядоченный)список. Атрибуты: type-Тип маркера
Синтаксис: Читать о теге подробно в учебнике HTML |
<var> | Выделяет в тексте переменные. Обычно отображается курсивом. Атрибуты: title— Всплывающая подсказка Синтаксис: |
<wbr> | Разрешает перенос строки. Используется внутри тега <nobr> Синтаксис: Не требует закрывающего тега. |
<xmp> | Отображает текст в том виде в котором он и был набран. Пробелы, переносы строк не удаляются, кроме того спецсимволы выводятся как обычный текст. Синтаксис: |
атрибуты | Принадлежность | Описание |
---|---|---|
accept | <input> | Указывает типы файлов, которые принимает сервер (только для type=»file») |
accept-charset | <form> | Указывает кодировки символов, которые будут использоваться для отправки формы |
accesskey | Глобальные атрибуты | Указывает сочетание клавиш для активации / фокусировки элемента |
action | <form> | Указывает, куда отправлять данные формы при отправке формы |
align | Не поддерживается в HTML 5. | Задает выравнивание в соответствии с окружающими элементами. Используйте CSS |
alt | <area>, <img>, <input> | Задает альтернативный текст, если исходный элемент не отображается |
async | <script> | Указывает, что сценарий выполняется асинхронно (только для внешних сценариев) |
autocomplete | <form>, <input> | Указывает, будет ли в элементе <form> или <input>, должен иметь автозаполнения enabled |
autofocus | <button>, <input>, <select>, <textarea> | Указывает, что элемент должен автоматически получать фокус при загрузке страницы |
autoplay | <audio>, <video> | Указывает, что воспроизведение аудио/видео начнется, как только оно будет готово |
bgcolor | Не поддерживается в HTML 5. | Задает цвет фона элемента. Используйте CSS |
border | Не поддерживается в HTML 5. | Задает ширину границы элемента. Используйте CSS |
charset | <meta>, <script> | Указывает кодировку символов |
checked | <input> | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio») |
cite | <blockquote>, <del>, <ins>, <q> | Задает URL, который объясняет цитату / удаленный / вставленный текст |
class | Глобальные атрибуты | Задает одно или несколько имен классов для элемента (ссылается на класс в таблице стилей) |
color | Не поддерживается в HTML 5. | Задает цвет текста элемента. Используйте CSS |
cols | <textarea> | Задает видимую ширину текстовой области |
colspan | <td>, <th> | Указывает количество столбцов, которое должна охватывать ячейка таблицы |
content | <meta> | Дает значение, связанное с http-equiv или атрибутом name |
contenteditable | Глобальные атрибуты | Указывает, является ли содержимое элемента редактируемым или нет |
contextmenu | Глобальные атрибуты | Задает контекстное меню для элемента. Контекстное меню появляется, когда пользователь щелкает правой кнопкой мыши на элементе |
controls | <audio>, <video> | Указывает, что должны отображаться элементы управления аудио/видео (например, кнопка воспроизведения / паузы и т. д) |
coords | <area> | Задает координаты области |
data | <object> | Задает URL ресурса, используемого объектом |
data-* | Глобальные атрибуты | Используется для хранения личных данных пользователя на странице или в приложении |
datetime | <del>, <ins>, <time> | Указывает дату и время |
default | <track> | Указывает, что трек должен быть включен, если предпочтения пользователя не указывают, что другой трек будет более подходящим |
defer | <script> | Указывает, что сценарий выполняется после завершения синтаксического анализа страницы (только для внешних сценариев) |
dir | Глобальные атрибуты | Задает направление текста для содержимого элемента |
dirname | <input>, <textarea> | Указывает, что направление текста будет отправлено |
disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Указывает, что указанный элементы элемент/группа должны быть отключены |
download | <a>, <area> | Указывает, что целевой объект будет загружен при нажатии пользователем гиперссылки |
draggable | Глобальные атрибуты | Указывает, является ли элемент перетаскиваемым или нет |
dropzone | Глобальные атрибуты | Указывает, копируются, перемещаются или связываются перетаскиваемые данные |
enctype | <form> | Указывает, как данные формы должны быть закодированы при отправке на сервер (только для method=»post») |
for | <label>, <output> | Определяет форму элемента(ов) метки/расчет обязан |
form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Задает имя формы элемент принадлежит |
formaction | <button>, <input> | Указывает, куда отправлять данные формы при отправке. Только для type=»submit» |
headers | <td>, <th> | Задает одну или несколько ячеек заголовков, с которыми связана ячейка |
height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Задает высоту элемента |
hidden | Глобальные атрибуты | Указывает, что элемент еще не релевантен или больше не имеет значения |
high | <meter> | Задает диапазон, который считается высоким значением |
href | <a>, <area>, <base>, <link> | Указывает URL страницы, на которую переходит ссылка |
hreflang | <a>, <area>, <link> | Указывает язык связанного документа |
http-equiv | <meta> | Предоставляет заголовок HTTP для информации / значения атрибута содержания |
id | Глобальные атрибуты | Задает уникальный идентификатор элемента |
ismap | <img> | Задает изображение в качестве серверной карты изображений |
kind | <track> | Указывает тип текстовой дорожки |
label | <track>, <option>, <optgroup> | Задает заголовок текстовой дорожки |
lang | Глобальные атрибуты | Задает язык содержимого элемента |
list | <input> | Относится к элементу <datalist>, который содержит предопределенные параметры для элемента <input> |
loop | <audio>, <video> | Указывает, что аудио / видео будет начинаться снова, каждый раз, когда он будет завершено |
low | <meter> | Определяет диапазон, который считается низким значением |
manifest | <html> | Указывает расположение манифеста кэша документа |
max | <input>, <meter>, <progress> | Задает максимальное значение |
maxlength | <input>, <textarea> | Задает максимальное количество символов, разрешенных в элементе |
media | <a>, <area>, <link>, <source>, <style> | Указывает, для какого носителя / устройства оптимизирован связанный документ |
method | <form> | Задает метод HTTP, используемый при отправке данных формы |
min | <input>, <meter> | Задает минимальное значение |
multiple | <input>, <select> | Указывает, что пользователь может ввести несколько значений |
muted | <video>, <audio> | Указывает, что аудиовыход видео должен быть отключен |
name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Задает имя элемента |
novalidate | <form> | Указывает, что форма не должна проверяться при отправке |
onabort | <audio>, <embed>, <img>, <object>, <video> | Сценарий для запуска при прерывании |
onafterprint | <body> | Сценарий, запускаемый после печати документа |
onbeforeprint | <body> | Сценарий, выполняемый перед печатью документа |
onbeforeunload | <body> | Скрипт будет выполняться, когда документ будет выгружен |
onblur | Все видимые элементы. | Сценарий для запуска, когда элемент теряет фокус |
oncanplay | <audio>, <embed>, <object>, <video> | Сценарий для запуска, когда файл готов к запуску воспроизведения (когда он достаточно буферизован, чтобы начать) |
oncanplaythrough | <audio>, <video> | Скрипт должен быть запущен, когда файл может быть воспроизведен до конца без паузы для буферизации |
onchange | Все видимые элементы. | Скрипт, запускаемый при изменении значения элемента |
onclick | Все видимые элементы. | Скрипт, запускаемый при щелчке по элементу |
oncontextmenu | Все видимые элементы. | Скрипт, запускаемый при вызове контекстного меню |
oncopy | Все видимые элементы. | Скрипт, запускаемый при копировании содержимого элемента |
oncuechange | <track> | Сценарий, который будет выполняться при изменении ключа в элементе <track> |
oncut | Все видимые элементы. | Скрипт, запускаемый при вырезании содержимого элемента |
ondblclick | Все видимые элементы. | Скрипт, запускаемый при двойном щелчке по элементу |
ondrag | Все видимые элементы. | Скрипт, запускаемый при перетаскивании элемента |
ondragend | Все видимые элементы. | Скрипт, запускаемый в конце операции перетаскивания |
ondragenter | Все видимые элементы. | Скрипт, запускаемый при перетаскивании элемента в допустимый целевой объект |
ondragleave | Все видимые элементы. | Сценарий для запуска, когда элемент оставляет допустимый целевой объект отбрасывания |
ondragover | Все видимые элементы. | Скрипт, запускаемый при перетаскивании элемента по допустимому целевому объекту |
ondragstart | Все видимые элементы. | Сценарий для запуска в начале операции перетаскивания |
ondrop | Все видимые элементы. | Скрипт, запускаемый при перетаскивании элемента |
ondurationchange | <audio>, <video> | Сценарий для запуска при изменении длины носителя |
onemptied | <audio>, <video> | Сценарий, который нужно запустить когда что-то плохое случается и архив внезапно недоступен (как непредвиденно разъединения) |
onended | <audio>, <video> | Скрипт должен быть запущен, когда в СМИ уже дойдет до конца (полезное мероприятие для сообщения «спасибо за прослушивание») |
onerror | <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> | Сценарий для запуска при возникновении ошибки |
onfocus | Все видимые элементы. | Сценарий для запуска, когда элемент получает фокус |
onhashchange | <body> | Скрипт, запускаемый при изменении привязки URL |
oninput | Все видимые элементы. | Сценарий для запуска, когда элемент получает пользовательский ввод |
oninvalid | Все видимые элементы. | Сценарий для запуска при недопустимом элементе |
onkeydown | Все видимые элементы. | Скрипт, запускаемый при нажатии пользователем клавиши |
onkeypress | Все видимые элементы. | Скрипт, запускаемый при нажатии пользователем клавиши |
onkeyup | Все видимые элементы. | Скрипт, запускаемый при нажатии пользователем клавиши |
onload | <body>, <iframe>, <img>, <input>, <link>, <script>, <style> | Скрипт, запускаемый после завершения загрузки элемента |
onloadeddata | <audio>, <video> | Сценарий для запуска при загрузке данных мультимедиа |
onloadedmetadata | <audio>, <video> | Скрипт, запускаемый при загрузке метаданных (например, измерений и длительности) |
onloadstart | <audio>, <video> | Скрипт должен быть запущен и файл начинает загружаться до загружаемого |
onmousedown | Все видимые элементы. | Скрипт, запускаемый при нажатии кнопки мыши на элементе |
onmousemove | Все видимые элементы. | Скрипт должен выполняться до тех пор, пока указатель мыши перемещается по элементу |
onmouseout | Все видимые элементы. | Скрипт, запускаемый при перемещении указателя мыши из элемента |
onmouseover | Все видимые элементы. | Скрипт, запускаемый при наведении указателя мыши на элемент |
onmouseup | Все видимые элементы. | Скрипт, запускаемый при отпускании кнопки мыши над элементом |
onmousewheel | Все видимые элементы. | Скрипт, запускаемый при прокрутке колесика мыши по элементу |
onoffline | <body> | Скрипт, запускаемый при запуске браузера в автономном режиме |
ononline | <body> | Скрипт, запускаемый при запуске браузера в оперативном режиме |
onpagehide | <body> | Скрипт, запускаемый при переходе пользователя со страницы |
onpageshow | <body> | Сценарий, выполняемый при переходе пользователя на страницу |
onpaste | Все видимые элементы. | Сценарий, выполняемый при вставке пользователем некоторого содержимого в элемент |
onpause | <audio>, <video> | Сценарий, запускаемый при приостановке носителя пользователем или программным способом |
onplay | <audio>, <video> | Скрипт должен быть запущен, когда СМИ готовы начать играть |
onplaying | <audio>, <video> | Сценарий для запуска, когда носитель фактически начал играть. |
onpopstate | <body> | Скрипт, запускаемый при изменении истории окна. |
onprogress | <audio>, <video> | Сценарий для запуска, когда браузер находится в процессе получения данных мультимедиа |
onratechange | <audio>, <video> | Сценарий для запуска при каждом изменении скорости воспроизведения (например, когда пользователь переключается в режим замедленной или быстрой перемотки вперед). |
onreset | <form> | Сценарий для запуска при нажатии кнопки сброса в форме. |
onresize | <body> | Скрипт, запускаемый при изменении размера окна браузера. |
onscroll | Все видимые элементы. | Скрипт, запускаемый при прокрутке полосы прокрутки элемента |
onsearch | <input> | Сценарий, выполняемый при записи пользователем чего-либо в поле поиска (для <input=»search»>) |
onseeked | <audio>, <video> | Сценарий, который будет выполняться, когда атрибут поиска имеет значение false, указывающее, что поиск закончился |
onseeking | <audio>, <video> | Сценарий, который будет выполняться, если атрибут поиска имеет значение true, указывающее, что поиск активен |
onselect | Все видимые элементы. | Скрипт, запускаемый при выборе элемента |
onshow | <menu> | Скрипт, запускаемый при отображении элемента <menu> в виде контекстного меню |
onstalled | <audio>, <video> | Скрипт должен быть запущен, когда браузер не может получить данные по какой-либо причине |
onstorage | <body> | Сценарий для запуска при обновлении области веб-хранилища |
onsubmit | <form> | Сценарий для запуска при отправке формы |
onsuspend | <audio>, <video> | Сценарий, который будет выполняться при извлечении данных мультимедиа останавливается перед полной загрузкой по какой-либо причине |
ontimeupdate | <audio>, <video> | Скрипт для запуска при изменении игровой позиции (например, когда пользователь быстро переходит к другой точке в СМИ) |
ontoggle | <details> | Сценарий, запускаемый при открытии или закрытии пользователем элемента <details> |
onunload | <body> | Скрипт, запускаемый при выгрузке страницы (или закрытии окна браузера) |
onvolumechange | <audio>, <video> | Сценарий, который будет выполняться каждый раз, когда видео / аудио громкость была изменена |
onwaiting | <audio>, <video> | Скрипт должен быть запущен, когда СМИ приостановлена, но возобновится (например, когда СМИ останавливается для буферизации данных) |
onwheel | Все видимые элементы. | Скрипт, запускаемый при накатывании колесика мыши вверх или вниз по элементу |
open | <details> | Указывает, что сведения должны быть видны (открыты) пользователю |
optimum | <meter> | Указывает, какое значение является оптимальным для датчика |
pattern | <input> | Задает регулярное выражение, по которому проверяется значение элемента <input> |
placeholder | <input>, <textarea> | Задает короткую подсказку, описывающую ожидаемое значение элемента |
poster | <video> | Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения |
preload | <audio>, <video> | Указывает, если автор считает, что аудио / видео должно быть загружено при загрузке страницы |
readonly | <input>, <textarea> | Указывает, что элемент доступен только для чтения |
rel | <a>, <area>, <link> | Задает связь между текущим документом и связанным документом |
required | <input>, <select>, <textarea> | Указывает, что элемент должен быть заполнен перед отправкой формы |
reversed | <ol> | Указывает, что порядок списка должен быть по убыванию (9,8,7…) |
rows | <textarea> | Указывает видимое количество строк в текстовой области |
rowspan | <td>, <th> | Задает количество строк, которое должна занимать ячейка таблицы |
sandbox | <iframe> | Включает дополнительный набор ограничений для содержимого в <iframe> |
scope | <th> | Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк |
scoped | <style> | Указывает, что стили применяются только к родительскому элементу этого элемента и дочерним элементам этого элемента |
selected | <option> | Указывает, что параметр должен быть предварительно выбран при загрузке страницы |
shape | <area> | Определяет форму области |
size | <input>, <select> | Задает ширину в символах (для <input>) или указывает количество видимых параметров (для <select>) |
sizes | <img>, <link>, <source> | Задает размер связанного ресурса |
span | <col>, <colgroup> | Задает количество столбцов для интервала |
spellcheck | Глобальные атрибуты | Указывает, следует ли проверять орфографию и грамматику элемента |
src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | Задает URL файла мультимедиа |
srcdoc | <iframe> | Задает содержимое HTML страницы для отображения в <iframe> |
srclang | <track> | Задает язык текстовых данных дорожки (требуется, если kind=»subtitles») |
srcset | <img>, <source> | Задает URL изображения для использования в различных ситуациях |
start | <ol> | Задает начальное значение упорядоченного списка |
step | <input> | Задает допустимые интервалы номеров для поля ввода |
style | Глобальные атрибуты | Задает встроенный стиль CSS для элемента |
tabindex | Глобальные атрибуты | Задает порядок табуляции элемента |
target | <a>, <area>, <base>, <form> | Указывает целевой объект для открытия связанного документа или отправки формы |
title | Глобальные атрибуты | Задает дополнительные сведения об элементе |
translate | Глобальные атрибуты | Указывает, следует ли переводить содержимое элемента |
type | <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> | Указывает тип элемента |
usemap | <img>, <object> | Задает изображение в качестве клиентской карты изображений |
value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Задает значение элемента |
width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Задает ширину элемента |
wrap | <textarea> | Указывает, как текст в текстовой области должен быть обернут при отправке в форме |
HTML-атрибуты: таблица глобальных атрибутов
HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
Атрибут | Описание, принимаемое значение |
---|---|
accesskey | Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Принимаемые значения: перечень названий клавиш. |
class | Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса. |
contenteditable | Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false. |
contextmenu | Добавляет к элементу контекстное меню, заданное тегом <menu>. Принимаемые значения: значение атрибута id элемента <menu>. |
dir | Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto. |
draggable | Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto. |
dropzone | Определяет область для приема перемещаемых элементов, сообщая браузеру пользователя, какие действия совершить при перемещении. Принимаемые значения: copy — содержимое перемещаемого элемента будет скопировано в область. move — содержимое перемещаемого элемента будет перемещено в новую область. link — при перемещении будет создана ссылка на первоначальные данные элемента. |
hidden | Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden. |
id | Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента. |
lang | Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка. |
spellcheck | Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false. |
style | Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS. |
tabindex | Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер. |
title | Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст. |
translate | Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no. |
<picture></pictire> | контейнер для одного <img> и ноль или больше <source> | inline |
<source> | местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio> | none |
<img> | html-изображения | inline |
<iframe></iframe> | создаёт встроенный фрейм | block |
<embed> | встраивает внешний интерактивный контент или плагин | inline-block |
<object></object> | контейнер для встраивания мультимедиа | inline-block |
<param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
<audio></audio> | добавляет аудио-файлы | inline-block |
<video></video> | добавляет видео-файлы | inline-block |
<track> | субтитры для элементов <audio> и <video> | none |
<map></map> | активные области на карте-изображении | inline |
<area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
<a></a> | гиперссылка | inline |
<em></em> | выделяет важные фрагменты текста курсивом | inline |
<strong></strong> | выделяет полужирным важный текст | inline |
<small></small> | отображает текст шрифтом меньшего размера | inline |
<s></s> | перечёркивает неактуальный текст | inline |
<cite></cite> | источник цитирования | inline |
<q></q> | краткая цитата | inline |
<dfn></dfn> | выделяет термин курсивом | inline |
<abbr></abbr> | аббревиатура или акроним | none |
<ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
<rb></rb> | обертка для аннотации | inline |
<rp></rp> | тег для скобок вокруг символов | none |
<rt></rt> | расшифровка символов | block |
<rtc></rtc> | обертка для дополнительной аннотации | inline |
<data></data> | связывает содержимое с машиночитаемым переводом | inline |
<time></time> | дата / время документа или статьи | inline |
<code></code> | фрагмент программного кода | inline |
<var></var> | выделяет переменные из программ | inline |
<samp></samp> | результат выполнения сценария | inline |
<kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
<sub></sub> | подстрочное написание символов | inline |
<sup></sup> | надстрочное написание символов | inline |
<i></i> | выделяет текст курсивом без акцента | inline |
<b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | inline |
<u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline |
<mark></mark> | выделяет фрагменты текста желтым фоном | inline |
<bdi></bdi> | изолирует текст, читаемый справа налево | inline |
<bdo></bdo> | задаёт направление написания текста | inline |
<span></span> | контейнер для строчных элементов | inline |
<br> | перенос текста на новую строку | none |
<wbr> | возможное место разрыва длинной строки | none |
<form></form> | html-форма | block |
<label></label> | текстовая метка для элемента <input> | inline |
<input> | многофункциональные поля формы | inline-block |
<button></button> | интерактивная кнопка | inline-block |
<select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
<datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
<optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
<option></option> | вариант (опция) в раскрывающемся списке | block |
<textarea> | многострочное поле формы | inline-block |
<output></output> | поле для вывода результата вычисления | inline |
<progress></progress> | индикатор выполнения задачи | inline-block |
<meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
<fieldset></fieldset> | группирует связанные элементы в форме | block |
<legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
HTML Атрибуты
Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href
является именем, а http://www.wm-school.ru/
значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Атрибут title
Рассмотрим следующий пример:
Пример HTML:
Попробуй сам<abbr title="Язык гипертекстовой разметки">HTML</abbr>
В этом примере используется тег <abbr>, который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки
.
Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.
Атрибут alt
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Атрибут href
Вы можете добавить сразу несколько атрибутов к элементу.
Вот пример сложения двух атрибутов к элементу <a>(который используется для создания гиперссылки на другую веб — страницу).
Пример HTML:
Попробуй сам<a href="http://www.wm-school.ru" title="Лучшие уроки HTML!">HTML Tutorials</a>
Атрибут href
определяет расположение веб — страницы, на которую ведет ссылка.
Мы также используем атрибут title
для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).
W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки. |
Одинарные или двойные кавычки?
Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
<abbr title="Hypertext 'Markup' Language">HTML</abbr>
Можно наоборот:
<abbr title='Hypertext "Markup" Language'>HTML</abbr>
Общие атрибуты
Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
Атрибут | Значение | Описание |
---|---|---|
align | right, left, center | Горизонтальное выравнивание тегов |
valign | top, middle, bottom | Вертикальное вырвнивание тегов внутри HTML-элемента. |
background | URL | Расположение фонового изображения |
id | Уникальное имя | Уникальное имя для использования с каскадными таблицами стилей. |
class | правило класса или стиль класса | Классифицирует элемент для использования с каскадными таблицами стилей. |
width | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
height | Числовое значение | Определяет высотуу таблиц, изображений или ячеек таблицы. |
title | Текст подсказки | Текст, отображаемый во всплывающей подсказке. |
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Задачи
Первое итоговое задание [1-4]
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка
Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Рис. 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающая подсказка</title>
</head>
<body>
<p> title="Хороший сайт">wm-school.ru — сайт для разработчиков.</p>
</body>
</html>
Размеры изображения
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Размеры изображения</title>
</head>
<body>
<img src="smile.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Размеры изображения</title>
</head>
<body>
<img src="smile.jpg">
</body>
</html>
Ссылка на веб-сайт
Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту «Это ссылка на сайт», вы перешли на главную страницу сайта www.wm-school.ru.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылка на веб-сайт</title>
</head>
<body>
Это ссылка на сайт
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылка на веб-сайт</title>
</head>
<body>
<a href="http://www.wm-school.ru">Это ссылка на сайт</al>
</body>
</html>
Альтернативный текст
Создайте для изображения альтернативный текст «Смайлик», который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<img src="noimage.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<img src="noimage.jpg" alt="Смайлик">
</body>
</html>
Please enable JavaScript to view the comments powered by Disqus.
Атрибуты HTML-тегов — шпаргалка
С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?
Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение” lang=”en”
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
<p align=”center”>Абзац</p>
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибуты
Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
<a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a>
- class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
- С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
- При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <menu>, а атрибуту contextmenu присваивается его идентификатор.
- dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
- draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
- dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
- hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.
- id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
- lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
- spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
- style позволяет задать оформление элемента с помощью CSS-кода.
- tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.
- title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
<a title=”Ссылка, ведущая на Яндекс” href=”http://yandex.ru”>Поиск</a>
- translate разрешает (yes) или запрещает (no) перевод содержимого тега.
- align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег <img>) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутов
В качестве примера рассмотрим строку HTML-кода:
<p contenteditable=”true”>Этот текст можно редактировать</p>
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
<p> — открывающий тег контейнера, хранящего абзац.
</p> — закрывающий тег.
Между символами > и < расположен текст Этот текст можно редактировать. Это — надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable=”true” — это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable=”true”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true, написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение” contenteditable=”true”
Полезные ссылки:
Теги и атрибуты HTML
Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах и говорить на одном языке, давайте разберемся как называются и как используются команды HTML.
В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод, о котором упоминал на странице HTML это..
. Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.
Стоит отметить, что официального перевода спецификации на сегодняшний день нет. Поэтому перевод Александра будет оптимальным решением для читателей, не дружащих с английским.
В среде HTML цепочка выполнения команд следующая:
- Источниками команд являются теги – специальные конструкции языка HTML. При помощи них программист сообщает программе, которая будет обрабатывать документ, всю необходимую информацию, требующуюся для правильного отображения документа.
- Команды выполняются программой – обозревателем. Обозреватели разных разработчиков обрабатывают документы с некоторыми отличиями, но в целом, результат примерно одинаков.
- Команды обозреватель применяет к тексту и другой информации, содержащейся в обрабатываемом документе.
Теги выглядят следующим образом:
<html> <body> <head> <b> <p> <img> <object> и другие.
Чтобы увидеть (если интересно) внутренности html-страницы, в обозревателе кликните правой клавишей мыши и нажмите на пункт Искодный код
или Код страницы
(везде по-разному).
Ниже приведён фрагмент кода главной страницы портала mail.ru с 2530 по 2547 строку:
Теги (от английского tag
) — ярлык, бирка, этикетка. Действительно, эти команды в угловых скобках можно сравнить с бирками, т.к. они закрепляются за фрагментами гипертекста и служат как бы инструкцией, поясняющей интенет-обозревателю, что с этим фрагментом необходимо сделать. Теги обозначаются латинскими символами, заключёнными в угловые скобки.
Полный перечень тегов можно найти в спецификации HTML. Их там чуть менее ста. Каждый отвечает за свои конкретные функции. Поэтому у некоторых может возникнуть резонный вопрос — неужели этого хватает для получения того многообразия оформления, которое на сегодняшний день присутствует в сети интернет?
Атрибуты тегов
Разумеется, если бы дело ограничивалось только этим набором, то в интернете в плане оформления царило бы скудное однообразие. Дело в том, что большинство тегов имеет настройки, как ваш монитор имеет настройки яркости и контраста. Использовать (регулировать) их можно при помощи атрибутов тегов, а диапазон (или значения) этих настроек указан в спецификации для каждого тега отдельно. Теперь немного о том, как это выглядит:
<тег атрибут="значение" атрибут2="значение" >
<img alt="комментарий" src="mestopolozhenie_kartinki">
alt , src , width и height - атрибуты тега IMG.
<img alt="квадрат" src="files/attachment/images/txt.png">
Теперь изменим значения ширины, чтобы получить прямоугольник:
<img alt="прямоугольник"
src="files/attachment/images/txt.png">
Каждому атрибуту (за редким исключением) необходимо присваивать значение, как в примере выше высота картинки имела значение сто. При этом следует сохранять синтаксис, то есть ставить знак равенства, кавычки и другие символы как того требует спецификация!
Сразу отмечу, что для некоторых тегов существуют обязательные атрибуты. Например, для тега <img> атрибут alt обязателен. В том случае, если изображение не удасться загрузить, необходимо будет передать пользователю информацию, которую предполагалось передать с помощью изображения. Эту информацию и указывает атрибут alt. В следующем примере я изменю путь к изображению, чтобы оно не грузилось и укажу альтернативный текст.
<img alt="тут должна быть картинка" src="some_path/txt.png">
Итак, атрибуты бывают:
- Обязательные для некоторых тегов.
- Необязательные.
Снова о тегах
Идём дальше. Надо кое-что добавить и о тегах — в языке HTML их два вида:
- Строковые (inline). Их ещё называют
инлайновые
. - Блоковые (block).
Если мы заключим гипертекст в тег <p></p>, то на странице он сформируется в отдельный блок (так как это блоковый тег) и образует абзац текста. Абзацы на этой странице сформированы как раз таким образом. Пример ниже:
<p>Все заблуждаются в меру своих возможностей.</p>
Все заблуждаются в меру своих возможностей.
Теперь представьте, что текст в абзаце (блоке) надо некоторым образом оформить, не нарушая его целостность. Для этого используют inline-теги, которые производят действие над содержимым, но блока не образуют. Сделаем текст в следующем примере большим (тег <big></big>) и маленьким (тег <small></small>).
<p>Все <big>заблуждаются</big> в меру своих <small>возможностей.</small></p>
Все заблуждаются в меру своих возможностей.
Из всех тегов исключением являются разве что теги <ins></ins> и <del></del>. Эти двое могут работать как со строковыми, так и с блочными элементами. Вот что написано о них в спецификации:
Эти два элемента необычны для HTML тем, что могут обрабатывать элементы уровня блока или инлайн-элементы (но не те и другие вместе). Они могут содержать одно или более слов в параграфе или один или более элемент уровня блока, такой как параграфы, списки или таблицы. Спецификация HTML 4.01 в переводе Пирамидина А.
По принципу работы теги тоже можно разбить на две категории. Одни производят действия над гипертекстом, другие служат для включения в гипертекст других элементов. Если брать для примера уже рассмотренные теги, то <p></p> производит действие над гипертекстом, формируя из него абзац, а тег <img> включает в гипертекст внешний объект, но на сам гипертекст повлиять не может. Теги, не влияющие непосредственно на гипертекст, называют пустыми (empty). Закрывающий тег у пустышек
указывать запрещено!
К пустышкам
относятся: <img>, <hr> (строит линию), <br> (переводит строку) и ряд других. Поэтому с закрывающими тегами возможны три варианта:
- Закрывающий тег (</тег>) обязателен.
- Закрывающий тег (</тег>) не обязателен.
- Закрывающий тег (</тег>) запрещён.
Приведу ещё примеры для наглядности. Тег <a></a> необходимо закрывать, т.к. он делает заключённый в себя гипертекст гиперссылкой. Если его не закрыть, то весь документ после открывающего тега <а> будет выполнять роль гиперссылки (пока в тексте не встретится закрывающий тег </a> или открывающий <a>).
<p>Указываем <a href="#">ссылку</a> на другой <a href="#">документ</a></p>
<p>Указываем <a href="#">ссылку на другой <a href="#">документ</a></p>
Указываем ссылку на другой документ
Указываем ссылку на другой документ
Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы: <tr> и <td>. Возьмём для примера таблицу:
<table>
<tr>
<td> содержимое первой ячейки </td>
<td> содержимое второй ячейки </td>
</tr>
</table>
<table>
<tr>
<td> содержимое первой ячейки
<td> содержимое второй ячейки
</table>
Каждый новый элемент ячейки таблицы <td> автоматически закрывает предыдущий, даже если не указывать </td>. Ряд таблицы <tr> автоматически закроет тег тела таблицы </table>. А вот закрывать тег таблицы надо обязательно, в противном случае всё содержимое страницы, следующее за таблицей, станет её частью и попадёт под влияние табличных настроек.
Запрещается закрывать теги, не производящие действий над гипертекстом — <hr>, <img>, <br> и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим — где именно что указано. Повторим. В языке HTML существует два вида тегов:
- Строковые (inline). Их ещё называют
инлайновые
. - Блоковые (block).
Конечный (/закрывающий) тег может быть:
- Закрывающий тег (</тег>) обязателен.
- Закрывающий тег (</тег>) не обязателен.
- Закрывающий тег (</тег>) запрещён.
атрибуты у тегов могут быть:
- Обязательные.
- Необязательные.
Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML.
При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов ‘<‘ и ‘>’ будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации.
Вложенность тегов
Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:
<ins>Элемент подчёркнутого текста является родительским
элементом для элемента <del>зачёркнутого текста</del> с наследованием.</ins>
Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.
Элемент подчёркнутого текста является родительским элементом для элемента зачёркнутого текста с наследованием.
Главное помнить, что обе части тега (открывающая и закрывающая) должны быть вложены в один и тот же родительский элемент, опять же по аналогии с матрёшкой.
Использование спецификации
Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.
Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) — Таблицы.
Открываем спецификацию, меню разделов:
Откроется меню элемента TABLE. Можно почитать введение и общую информацию по таблицам (лишней не будет). Далее следует непосредственно само описание тега <TABLE>.
Переходим по ссылке к подробному описанию — синтаксису и списку атрибутов.
Тут можно получить информацию по каждому атрибуту.
- Требования закрывающего тега (</тег>). В данном случае начальный и конечный теги обязательны.
- Названия атрибутов данного тега.
- Список значений каждого атрибута.
- Статус атрибута (Актуальный/Устаревший/Запрещённый).
- Тип данных (значений) атрибута.
- Список общих атрибутов, которые используются с любыми тегами.
Важное замечание. На скриншоте выше атрибут align
имеет статус Deprecated
(не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.
Уточнения по тегам:
- Название тега.
- Статус открывающего тега в документе html:
- O — optional (не обязателен)
- Статус закрывающего тега в документе html:
- O — optional (не обязателен)
- F — forbidden (запрещён)
- Предполагается ли содержимое (гипертекст):
- E — Empty (без содержимого)
- Статус тега (D, L и F):
- D — deprecated (не рекомендован).
- L — loose (допускается в переходной спецификации Transitional).
- F — Frameset (допускается в спецификации Frameset).
- Комментарий, назначение тега.
Уточнения по атрибутам:
- Название атрибута.
- Принадлежность к тегу (группе тегов).
- Варианты значений атрибута.
- Обязательный/необязательный для указанного тега (группы тегов).
- Статус атрибута (D, L и F)
- D — deprecated (не рекомендован).
- L — loose (допускается в переходной спецификации Transitional).
- F — forbiden (запрещён).
Обратите внимание, атрибут align разрешён для использования с элементами таблицы и не рекомендован во всех остальных случаях. Так что уточняйте статус атрибутов для каждого тега в отдельности.
Кроме всего прочего советую ознакомиться со следующими разделами:
Вообще информации по тегам достаточно много и на одной странице всё не уместишь. Но для того, чтобы разобраться самостаятельно при помощи спецификации и её перевода (у кого туго с английским), этого достаточно, я думаю. Для получения общего представления и более лёгкого восприятия — тоже. Далее практика и таблицы стилей.
Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.