Основные атрибуты html. Что такое HTML-тэги и атрибуты, валидатор (validator) W3C
Приветствую всех! Сегодня хотелось бы рассказать о том, какие бывают атрибуты в HTML, и какие из них чаще всего используются на практике.
Понятие атрибута
Атрибуты в HTML — это служебные конструкции внутри тегов, расширяющие их возможности. Они используются в совершенно разных задачах и их освоение и правильное использование очень важно. В общем если разбирать все атрибуты, то их можно поделить на несколько категорий:
- Атрибуты со значением
- Атрибуты без значения
- Универсальные
- Специальные
- Событийные
Все они разные, но их синтаксис везде примерно одинаковый. Итак, давайте разберём некоторые тонкости работы с атрибутами в HTML.
Создание атрибута:
Какой то текст
Первым этапом в создании атрибута со значением является указание его названия и поле знака = его значения. В случае же создания атрибута без значения мы просто указываем название атрибута, которое как правило в нем уже содержит свою основную функцию (например hidden который прячет элементы). Для одного тега можно задать несколько атрибутов, при этом разделять их между собой нужно знаком пробела.
Хорошо, с синтаксисом все, теперь переходим к подробному разбору типов атрибутов. Описывать я буду именно те, которые чаще всего используются на практике.
Атрибуты со значением
Для большинства атрибутов в HTML можно задать свое значение. В некоторых атрибутах можно задать даже несколько значений разделяя их пробелами.
Так, например, атрибут class может иметь сразу несколько значений.
Универсальные атрибуты
К универсальным атрибутам можно отнести большую часть атрибутов. Универсальные они, потому что их применение доступно для большей части тегов. Например, тот же class или id можно использовать практически для всех html тегов.
Вот ещё несколько редких универсальных атрибутов:
- contenteditable — сообщает браузеру что элемент может быть редактирован пользователем. Значения — true или false
- dir — бесполезный атрибут, который делает зеркальным текст элемента, для которого он применен (вообще бесполезный атрибут). Значения — ltr или rtl
- spellcheck — сообщает браузеру проверять ли на орфографию содержимое тега. Используется в основном для тегов input и textarea. Значения — yes или no
Специальные атрибуты
Есть теги для которых наличие специального атрибута является главным условием для его правильной работы. Так, например, тег <a > не будет выполнять свою основную задачу без атрибута href. Так же и тег картинки останется просто тегом, если в его атрибуте src не указать путь до нужной картинки.
- src ="путь до файла" — позволяет указать путь до файлов. Используется в тегах script иimg.
- href ="ссылка" — используется для указания пути ссылкам <a> и мета тегам meta.
Событийные атрибуты
Данный вид атрибутов завязан на знании JavaScript-а и работает он напрямую с ним. Для чего это нужно? Ну к примеру Вы ходите при клике на блок с текстом изменить его фоновый цвет на серый. Все, что Вам нужно это задать этому тегу атрибут onclick. Нагляднее это можно увидеть на примере:
Кроме onclick на практике часто используются следующие атрибуты событий:
- onchange — это событие запустит скрипт, если был изменён элемент. Обычно это текстовые поля, списки, или текстовые области.
- onfocus — срабатывает в момент фокусировки на каком-либо элементе. Как пример, все поля формы на моем сайте изменяют свое оформление при фокусировке на них
- onsubmit — событие сработает при отправке формы. Как правило это случается когда пользователь отправляет форму нажав на кнопку.
- onkeydown — событие срабатывает, когда была нажата клавиша на клавиатуре.
Работая с этим типом атрибутов, нужно помнить, что они хорошо подходят для быстрого тестирования ваших скриптов, а так же для указания небольших и понятных функций. Что-то более сложное рациональнее писать в отдельных блоках скриптов. Задать тоже событие onclick тегу можно и без использования специального атрибута, а в отдельном javascript файле.
На этом хотелось бы закончить наше знакомство с HTML атрибутами. Если есть какие-либо мысли по поводу их применения на практике пишите в коменты. Всем удачи и до скорого!
сайт Права на контент защищены.Существует два типа тегов HTML - контейнерные и одиночные, которые всегда заключаются в угловые скобки <...>.
Контейнерные теги состоят из пары - открывающий и закрывающий тег <...>.... Перед именем закрывающего тега необходимо ставить косую черту (слэш) "/". В закрывающем теге не нужно писать атрибуты присутствующие в открывающем теге!
Одиночные теги менее распространены и состоят лишь из открывающего тега. Пример:
.
Тег может иметь атрибуты и значения атрибутов. Пример: <тег имя_атрибута_1="значение" имя_атрибута_2="значение">...тег> . Атрибуты добавляют в тег для расширения или модификации его действий.
Теги и атрибуты
"_blank"
- откроет документ в новом окне.
"_parent"
- откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
"_top"
- отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, откроет в текущем окне.
"_self"
- откроет в текущем окне (по умолчанию для ссылок).
Метаинформация. Служит в основном для поисковых роботов. Атрибуты и значения:
Описание документа.
Ключевые слова.
Управление процессом индексации. Возможные варианты:
"index"
- возможность индексирования данного документа. Наоборот - "noindex"
"follow"
- возможность индексировать все документы, на которые есть ссылки в данном HTML-файле. Наоборот - "nofollow"
"all"
- одновременное условие 2-ух вышеперечисленных.
"none"
- одновременное условие 2-ух первоперечисленных. Наоборот.
Кодировка документа.
Указывает, что документ следует перезагружать через 30 с.
Указывает на таблицу стилей (CSS). Записывается в теге
. Есть 3 способа применения:1]
- Таблица связанных стилей. В href="..."
указывается путь к таблице.
2]
- Таблица глобальных стилей. Пишется в теге
3] пример - Таблица внутренних стилей. Прописывается в теге.
Тег: