HTML атрибуты

Атрибуты HTML можно произносить как специальные слова, которые используются внутри открывающих тегов и отвечают за управление поведением элемента. Они являются модификатором типа элемента HTML. Этот модификатор может выполнять две работы. Он может либо изменять функциональные возможности элемента по умолчанию, либо предоставлять функциональность любому элементу, который не может нормально функционировать без них. Синтаксически атрибут добавляется в начальный тег HTML. Существуют различные типы атрибутов, которые были определены. К ним относятся обязательные атрибуты, необязательные атрибуты, стандартные атрибуты и атрибуты событий. Обязательные атрибуты - это те, которые необходимы определенному типу элемента, чтобы функция работала правильно. Необязательный атрибут может использоваться для изменения функциональности по умолчанию для типа элемента. Стандартные атрибуты поддерживаются большим количеством типов элементов, а атрибуты событий могут использоваться для вызова типов элементов, которые могут указывать сценарии, которые выполняются при определенных обстоятельствах. Атрибуты обычно отображаются в виде пар «имя-значение» и разделяются знаком «=». Они пишутся в начальном теге элемента после имени элемента.

Различные атрибуты HTML

Давайте посмотрим на различные атрибуты HTML и как они работают подробно.

Основные атрибуты

Есть четыре основных атрибута, которые в основном используются. Чтобы назвать их они следующие:

  • ID: этот атрибут HTML можно легко использовать для уникальной идентификации элемента, присутствующего на странице HTML. Идентификатор пользователя может использоваться, когда элемент несет атрибут id в качестве уникального идентификатора, который позволяет идентифицировать элемент и его содержимое, или он используется, когда на веб-странице есть два элемента с одинаковым именем. Атрибут ID может помочь легко определить разницу между элементами с одинаковыми именами.
  • Атрибут заголовка. Этот атрибут дает заданный заголовок для конкретного элемента. От того, как он будет себя вести, зависит носитель, и, как правило, он не отображается как всплывающая подсказка всякий раз, когда курсор попадает на элемент или если он должен отображать его при загрузке элемента. Он также используется для объяснения элемента при наведении на него мыши. Поведение может отличаться для разных элементов и, как правило, его значение отображается при загрузке или при наведении на него указателя мыши.
  • Атрибут класса: ассоциация этого атрибута выполняется с элементом таблицы стилей. Пользователь должен указать класс элемента. Подробнее об этом атрибуте можно узнать, когда изучается каскадная таблица стилей. Значение здесь также может быть разделенным пробелами списком имен классов. Например: class = «className1 className2 className3»
  • Атрибут стиля: этот атрибут позволяет вам задать правила каскадной таблицы стилей в любом элементе. Он может обеспечить различные эффекты каскадных таблиц стилей для элементов HTML, такие как увеличение размера шрифта. Это также может изменить семейство шрифтов и окраску.

После основных атрибутов у нас есть некоторые атрибуты интернационализации. Они как ниже:

Атрибут интернационализации

  • Dir: атрибут dir помогает вам указать браузеру направление, в котором должен следовать текст. Этот атрибут обычно может принимать два значения. Это могут быть LTR и RTL. LTR означает слева направо, и это значение по умолчанию, а RTL означает справа налево. Когда этот атрибут используется внутри тега, он определяет, как текст должен быть представлен во всем документе. Он также может использоваться для управления направлением текста только из содержимого тега.
  • Атрибут Lang: Этот атрибут помогает в демонстрации основного языка, который используется в документе. Этот атрибут можно сохранить в HTML, чтобы он был обратно совместим с более ранними версиями HTML. Его также можно заменить атрибутом XML: lang в новых документах XHTML. Значения атрибутов lang соответствуют стандарту ISO-639 и имеют двухсимвольные коды языков. Объявление языка важно для доступа к приложению и различным поисковым системам.
  • Атрибут XML-Lang: этот атрибут должен заменить атрибут lang. Значение атрибута XML-lang должно иметь код страны, как упоминалось ранее.

В дополнение к этому, есть много общих атрибутов, которые описаны ниже.

Общий атрибут

  • Align Attribute: этот атрибут полезен, когда вы хотите, чтобы некоторые элементы вашей страницы были в вашем распоряжении. Вы можете изменить выравнивание по левому, правому краю или по центру страницы. Выравнивание по умолчанию для всех элементов установлено влево. Это можно изменить с помощью этого атрибута выравнивания.
  • Атрибут Src: если пользователю нужно вставить изображение на веб-страницу, то нам нужно использовать тег с атрибутом src. Мы можем указать адрес изображения в качестве значения атрибута внутри двойной кавычки. Вы можете использовать атрибут src, как показано ниже, чтобы включить изображение на веб-страницу.


src Attribute


  • Alt Attribute: этот атрибут используется в качестве альтернативного тега, который может использоваться для отображения чего-либо, если основной атрибут, который является тег, который не отображает исходное значение, которое ему присвоено. Это может описать изображение для разработчика, который использует его в конце кода. Если основное изображение терпит неудачу, то альтернативное изображение может использоваться для отображения.
  • Атрибут Ширина и Высота: Этот атрибут может использоваться для настройки высоты и ширины изображения.

Example:

Width and Height


<

  • Атрибут Href: Этот атрибут используется, когда пользователь хочет указать конкретную ссылку на любой адрес. Этот атрибут используется вместе с тегом. Когда ссылка помещается в атрибут href, куда она должна быть направлена, она связывается с текстом, отображаемым в теге. Когда пользователь нажимает на этот текст, он будет перенаправлен на адрес ссылки. Опция по умолчанию, чтобы открыть эту страницу в той же вкладке. Если вы используете целевой атрибут, то вы можете установить его значение _blank. Это перенаправит на другую вкладку или другое окно в зависимости от конфигурации вашего браузера.

Атрибут данных

HTML также предоставляет настраиваемые атрибуты данных, которые помогают вам добавлять информацию, связанную с вами, в теги HTML. Они не являются специфичными для HTML5 и могут использоваться для всех элементов HTML. Атрибут data - * помогает нам настраивать наши собственные атрибуты данных, он может хранить данные в частном порядке на странице или в приложении.

Для настройки данные делятся на две части:

  1. Имя атрибута. Оно должно иметь длину не менее одного символа и не должно содержать заглавных букв. Это имя также может быть префиксом с помощью «data-».
  2. Значение атрибута: значением атрибута может быть любая строка.

Синтаксис для атрибута данных таков:

  • Gitanjali

    • Свойство DOM-атрибута

    Чтобы получить объекты NamedNodeMap, следует использовать свойства атрибута в HTML DOM. Он вернет группу атрибутов узла. NamedNodeMap также представляет коллекцию объектов атрибутов, и к ней можно получить доступ по номеру индекса. Этот индекс начинается с 0.

    Синтаксис для использования этого: node.attributes

    Возвращаемое значение - это объекты NamedNodeMap, которые присутствуют в коллекции узлов. Если пользователь использует Internet Explorer 8 или любую из более ранних версий, свойство attribute вернет все возможные атрибуты для любого элемента, что может привести к большему количеству значений, чем ожидалось.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Глобальные атрибуты

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

    • Клавиша доступа : она указывает комбинацию клавиш для активации или фокусировки на любом элементе.
    • Перевести: если используется этот атрибут, он указывает, должен ли переводиться элемент элемента или нет.
    • Класс: указывает одно или несколько имен классов для элемента.
    • Заголовок: Этот атрибут определяет дополнительную информацию об элементе.
    • Contenteditable: чтобы указать, является ли контент редактируемым или нет, этот атрибут можно использовать.
    • Tabindex: определяет порядок табуляции элемента.
    • Dir: указывает направление текста для любого содержимого элемента.
    • Проверка орфографии: пользователь может явно указать, должны ли они проверять орфографию и проверенную грамматику или нет.
    • Draggable: указывает, должен ли элемент быть перетаскиваемым или нет.
    • Dropzone: указывает, будут ли перетаскиваемые данные копироваться, перемещаться или связываться при удалении.

    Атрибуты события

    HTML имеет возможность инициировать действия, когда происходят некоторые события. Атрибуты события могут быть такими, как показано ниже.

    Onload: срабатывает после завершения загрузки страницы.

    Onmessage: это можно сказать как скрипт, который запускается при запуске сообщения.

    Onstorage: это скрипт, который запускается при обновлении области веб-хранилища.

    Ошибка: этот скрипт запускается при возникновении ошибки.

    Onpagehide: этот скрипт может быть использован, когда пользователь может перейти от страницы.

    Атрибуты события формы

    Эти события запускаются действиями внутри HTML-формы.

    Onblur: он срабатывает, как только элемент теряет фокус.

    Onchange: Он срабатывает, как только значение элемента изменяется.

    Oncontextmenu: запускается при запуске контекстного меню.

    Onfocus: он срабатывает, как только элемент получает фокус.

    Oninput: скрипт должен запускаться, когда элемент получает входные данные.

    Onsearch: это срабатывает, когда пользователь пишет что-то в поле поиска.

    Oninvalid: это срабатывает, когда введенный элемент недействителен.

    Ключевые атрибуты событий

    Onkeydown: запускается при нажатии клавиши.

    onkeypress: запускается при нажатии клавиши.

    Onkeyup: запускается, когда пользователь отпускает ключ.

    Атрибуты событий мыши

    Onclick: это срабатывает, когда мышь щелкает по элементу.

    Onmousemove: запускается, когда указатель мыши движется, когда он находится над элементом.

    Onmouseip: запускается при отпускании кнопки мыши над элементом.

    Onwheel: срабатывает, когда колесо мыши катится вверх или вниз над элементом

    Перетащите атрибуты событий

    Ондраг: это срабатывает, когда элемент перетаскивается.

    Ondragleave: скрипт запускается, когда элемент покидает допустимую цель удаления.

    Ondrop: срабатывает, когда перетаскиваемый элемент сбрасывается

    Onscroll: скрипт запускается при прокрутке полосы прокрутки элемента.

    Вывод - атрибуты HTML

    HTML - самая старая технология, которая используется для создания различных веб-приложений. Со временем HTML эволюционировал постепенно и предоставляет множество возможностей для присутствующих элементов. Он предоставляет широкий спектр атрибутов, которые помогают сделать приложение более эффективным. К ним относятся основные атрибуты, основные из которых используются чаще всего. Он также предоставляет атрибуты интернационализации, которые позволяют изменять языки. Атрибут data помогает хранить данные и настраивать их так, как этого хочет пользователь. При всем этом он также имеет глобальные атрибуты, которые можно использовать с любым элементом и где угодно. Он также имеет атрибуты Event, которые срабатывают при возникновении любого типа события. В результате это делает веб-приложение или веб-страницу очень интерактивными. Таким образом, благодаря всем этим функциям HTML все еще находится в процессе разработки веб-приложений. С их помощью атрибут style, который можно использовать с CSS, делает его более красивым и привлекательным для использования. Поэтому используйте все атрибуты, которые присутствуют, и создайте отличное веб-приложение по вашему выбору.

    Рекомендуемые статьи

    Это было руководство по атрибутам HTML. Здесь мы обсудили концепции и различные атрибуты HTML. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

    1. Что такое HTML в простых терминах?
    2. Узнайте, как работает HTML
    3. Что такое XML?
    4. Лучшие стили списка HTML
    5. Сравнение HTML с XML

    Категория:

    Инструменты веб-разработки