Css все теги и атрибуты. Атрибуты HTML-тегов. Какими бывают теги
Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение” lang=”en”
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
Абзац
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибутыКаждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
Ссылка будет открываться по нажатию сочетания клавиш с единицей
- class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
- С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
- При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту 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 - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
- translate разрешает (yes) или запрещает (no) перевод содержимого тега.
- align
задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left
), по правому краю (right
), по центру (center)
или по ширине (justify)
. Для изображений (тег
) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутовВ качестве примера рассмотрим строку HTML-кода:
Этот текст можно редактировать
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
- открывающий тег контейнера, хранящего абзац.
- закрывающий тег.Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение” contenteditable=”true”
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | |||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | |||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | |||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | |||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | |||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | |||||||||||||||||||||||||||||||||||||||
Статья | |||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | |||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | |||||||||||||||||||||||||||||||||||||||
Полужирный текст. | |||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | |||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | |||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | |||||||||||||||||||||||||||||||||||||||
Цитата. | |||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | |||||||||||||||||||||||||||||||||||||||
Перенос строки. | |||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | |||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | |||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | |||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | |||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | |||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | |||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | |||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | |||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов | |||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | |||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | |||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | |||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | |||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | |||||||||||||||||||||||||||||||||||||||
Определяет список определений | |||||||||||||||||||||||||||||||||||||||
Название термина в списке определений | |||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | |||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | |||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | |||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | |||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | |||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | |||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | |||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | ||||||||||||||||||||||||||||||||||||||
Указывает область head документа. | |||||||||||||||||||||||||||||||||||||||
Блок заголовка | |||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | |||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | |||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | |||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | |||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | |||||||||||||||||||||||||||||||||||||||
Поле для ввода | |||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | |||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | |||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | |||||||||||||||||||||||||||||||||||||||
Заголовок элементов | |||||||||||||||||||||||||||||||||||||||
Элемент списка | |||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | |||||||||||||||||||||||||||||||||||||||
Основной контент | |||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | |||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | |||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | |||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | |||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | |||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | |||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | |||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | |||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | |||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список | |||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | |||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | |||||||||||||||||||||||||||||||||||||||
Результат вычислений | |||||||||||||||||||||||||||||||||||||||
|
Абзац. | ||||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | |||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | |||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | |||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | |||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | |||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | |||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | |||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | |||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | |||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | |||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | |||||||||||||||||||||||||||||||||||||||
Раздел | |||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | |||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | |||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | |||||||||||||||||||||||||||||||||||||||
Строчный элемент. | |||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | |||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | |||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | |||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | |||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | |||||||||||||||||||||||||||||||||||||||
|