Атрибути HTML

Атрибути HTML можна сказати як спеціальні слова, які використовуються всередині тегів, що відкриваються, і відповідальні за контроль поведінки елемента. Вони є модифікатором типу елемента HTML. Цей модифікатор може виконати дві роботи. Він може або змінювати функціональність за замовчуванням елемента, або він може надавати функціональність будь-якому елементу, який не може нормально функціонувати без них. Синтаксично атрибут додається до початкового тегу HTML. Існують різні типи атрибутів, які були визначені. Сюди входять необхідні атрибути, необов'язкові атрибути, стандартні атрибути та атрибути події. Необхідні атрибути - це ті, які потрібні певному типу елементів, щоб функція працювала правильно. Необов’язковий атрибут може використовуватися для зміни функцій за замовчуванням типу елемента. Стандартні атрибути підтримуються великою кількістю типів елементів, а атрибути подій можуть використовуватися для створення типів елементів, які можуть визначати сценарії, які виконуються в конкретних обставинах. Атрибути зазвичай фігурують як пари іменних значень і розділені знаком '=' (знак рівності). Вони записуються в стартовий тег елемента після імені елемента.

Різні атрибути HTML

Давайте подивимося на різні атрибути HTML та те, як вони детально працюють.

Основні атрибути

Існують чотири основні атрибути, які в основному використовуються. Назвати їх можна наступним чином:

  • Ідентифікатор: Цей атрибут HTML може бути легко використаний для унікального визначення елемента, присутнього на HTML-сторінці. Ідентифікатор користувача може бути використаний або тоді, коли елемент містить атрибут id як унікальний ідентифікатор, що дає можливість ідентифікувати елемент та його вміст, або він використовується, коли на веб-сторінці є два елементи, які мають однакове ім'я. Атрибут ID може допомогти легко визначити різницю між елементами, що мають однакову назву.
  • Атрибут заголовка: Цей атрибут виконує завдання надання запропонованого заголовка для певного елемента. Від оператора залежить, як він буде вести себе, і хоча він зазвичай не відображається як підказка кожного разу, коли курсор надходить над елементом або якщо він повинен відображати його, коли елемент завантажується. Він також використовується для пояснення елемента наведення миші на нього. Поведінка може відрізнятися в різних елементах і, як правило, її значення відображається при завантаженні або при наведенні вказівника миші на нього.
  • Атрибут класу: асоціація цього атрибута здійснюється з елементом таблиці стилів. Користувачеві необхідно вказати клас елемента. Більше можна дізнатися про цей атрибут, коли вивчається аркуш каскадного стилю. Значенням тут може бути також розділений пробілом список назв класів. Наприклад: class = "className1 className2 className3"
  • Атрибут стилю: Цей атрибут дозволяє вказати правила каскадного таблиці стилів у будь-якому елементі. Він може надавати різні елементи каскадного стилю для елементів HTML, наприклад, збільшення розміру шрифту. Це також може змінити сімейство шрифтів та забарвлення.

Після основних атрибутів ми маємо деякі атрибути інтернаціоналізації. Вони наведені нижче:

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

  • Дір: Атрибут dir допомагає вам вказувати веб-переглядачу, в якому напрямку має слідувати текст. Цей атрибут зазвичай може приймати два значення. Це можуть бути LTR та RTL. LTR означає зліва направо, і це значення за замовчуванням, тоді як RTL позначає справа наліво. Коли цей атрибут використовується в тезі, він визначає, як текст повинен бути представлений у всьому документі. Він також може бути використаний для керування напрямком тексту лише від вмісту тегу.
  • Атрибут Lang: Цей атрибут допомагає демонструвати основну мову, що використовується в документі. Цей атрибут можна зберігати в HTML, щоб він був сумісним з попередніми версіями HTML. Його також можна замінити атрибутом XML: lang у нових документах XHTML. Значення атрибутів lang є стандартними ISO-639 і мають двосимвольні мовні коди. Оголошення мови важливо для доступу до програми та різних пошукових систем.
  • Атрибут XML-Lang: Цей атрибут повинен бути заміною атрибута lang. Значення атрибута XML-lang повинно мати код країни, як згадувалося раніше.

Крім них, існує багато загальних ознак, які описані нижче.

Загальний атрибут

  • Вирівняти атрибут: Цей атрибут корисний, коли ви хочете, щоб у вашому розпорядженні були деякі елементи вашої сторінки. Ви можете змінити вирівнювання вліво, вправо або в центрі сторінки. Вирівнювання за замовчуванням для всіх елементів встановлено ліворуч. Це можна змінити, використовуючи цей атрибут вирівнювання.
  • Атрибут Src: Якщо користувачеві потрібно вставити зображення у веб-сторінку, тоді нам потрібно використовувати з атрибутом src. Ми можемо вказати адресу зображення як значення атрибута всередині подвійної лапки. Ви можете використовувати атрибут src, як показано нижче, для включення зображення на веб-сторінку.


src Attribute


  • Alt Attribute: Цей атрибут використовується як альтернативний тег, який можна використовувати, щоб показати щось, якщо основним атрибутом є тег, який не відображає початкове значення, яке йому присвоєно. Це може описати зображення розробнику, який використовує його в кінці кодування. Якщо основне зображення виходить з ладу, альтернативне зображення можна використовувати для відображення.
  • Ширина та висота Атрибут: Цей атрибут можна використовувати для регулювання висоти та ширини зображення.

Example:

Width and Height


<

  • Атрибут Href: Цей атрибут використовується, коли користувач хоче перейти на певне посилання на будь-яку адресу. Цей атрибут використовується разом із тегом. Коли посилання розміщується в атрибуті href, куди воно має бути спрямоване, воно пов'язується з текстом, який відображається в тезі. Коли користувач натисне на цей текст, він буде переспрямований на адресу посилання. Параметр за замовчуванням для відкриття цієї сторінки на тій же вкладці. Якщо ви використовуєте цільовий атрибут, то ви можете встановити його значення на _blank. Це перенаправить на іншу вкладку або інше вікно, залежно від конфігурації вашого браузера.

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

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

Для налаштування дані поділяються на дві частини:

  1. Назва атрибута: він повинен мати принаймні один символ і не повинен мати жодних великих літер. Цю назву можна також встановити за допомогою префікса, використовуючи "дані-".
  2. Значення атрибута: значенням атрибута може бути будь-який рядок.

Синтаксис атрибута даних такий:

  • Gitanjali

    • Властивість DOM Attribute

    Для отримання об'єктів NamedNodeMap слід використовувати властивості атрибутів у HTML DOM. Він поверне групу атрибутів вузла. NamedNodeMap також представляє колекцію об'єктів атрибутів, і до нього можна отримати номер індексу. Цей номер індексу починається з 0.

    Синтаксис для цього використовується: node.attributes

    Повернене значення - це об'єкти NamedNodeMap, які присутні в колекції вузлів. Якщо користувач використовує Internet Explorer 8 або будь-яку з попередніх версій, то властивість атрибутів поверне всі можливі атрибути для будь-якого елемента, і це може призвести до отримання більше значень, ніж очікувалося.

    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-елементом. Атрибути наведені нижче.

    • Accesskey: Вказує клавішу швидкого доступу для активації або фокусування на будь-якому елементі.
    • Перекласти: Якщо цей атрибут використовується, він визначає, чи потрібно вміст елемента переводити чи ні.
    • Клас: Він задає одне або кілька імен класу для елемента.
    • Назва: Цей атрибут задає додаткову інформацію про елемент.
    • Зміст: Для того, щоб визначити, чи вміст можна редагувати чи ні, цей атрибут можна використовувати.
    • Tabindex: Вказує порядок вкладки елемента.
    • Dir: Він визначає напрямок тексту для будь-якого вмісту елемента.
    • Перевірка орфографії: Користувач може чітко вказати, чи потрібно перевіряти правопис та граматику, перевірені чи ні.
    • Перетягування: Вказує, чи слід елемент перетягувати чи ні.
    • Dropzone: Вказує, чи перетягуються дані копіюються, переміщуються або з’єднуються при скиданні.

    Атрибути події

    HTML має можливість запускати дії, коли відбуваються деякі події. Атрибути події можуть бути наведеними нижче.

    Onload: запускається після завершення завантаження сторінки.

    Повідомлення он-лайн: це можна сказати як сценарій, який запускається при запуску повідомлення.

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

    Onerror: Цей сценарій запускається, коли виникає помилка.

    Onpagehide: Цей скрипт можна використовувати, коли користувач може перейти від сторінки.

    Формуйте атрибути події

    Ці події ініціюються діями всередині форми HTML.

    Onblur: Він спрацьовує, як тільки елемент втрачає фокус.

    Onchange: він запускається, як тільки змінюється значення елемента.

    Oncontextmenu: Це запускається, коли запускається контекстне меню.

    Onfocus: Він спрацьовує, як тільки елемент отримує фокус.

    Oninput: Сценарій повинен запускатися, коли елемент отримує вхід.

    Onsearch: це спрацьовує, коли користувач щось записує у поле пошуку.

    Недійсне: Це спрацьовує, коли введений елемент недійсний.

    Основні атрибути події

    Onkeydown: спрацьовує при натисканні клавіші.

    onkeypress: це спрацьовує при натисканні клавіші.

    Onkeyup: Це спрацьовує, коли користувач випускає ключ.

    Атрибути події миші

    Onclick: Це спрацьовує, коли миша клацає на елемент.

    Onmousemove: Це запускається, коли вказівник миші рухається, поки він знаходиться над елементом.

    Onmouseip: спрацьовує, коли кнопка миші відпускається над елементом.

    Коліс: спрацьовує, коли колесо миші перекидається вгору або вниз по елементу

    Перетягніть атрибути події

    Ondrag: Це спрацьовує, коли елемент перетягується.

    Ondragleave: Сценарій запускається, коли елемент залишає дійсну ціль краплі.

    Ондроп: Він спрацьовує при падінні перетягнутого елемента

    Onscroll: Сценарій запускається, коли елемент прокрутки елемента прокручується.

    Висновок - атрибути HTML

    HTML - найдавніша технологія, яка використовується для створення різних веб-додатків. З часом HTML розвивався поступово і надає безліч функцій для присутніх елементів. Він надає широкий спектр атрибутів, які допомагають зробити додаток більш ефективним. До них відносяться основні атрибути, основні з яких використовуються найчастіше. Він також надає атрибути інтернаціоналізації, які дозволяють змінювати мови. Атрибут даних допомагає зберігати дані та налаштовувати їх так, як бажає користувач. При всьому цьому він також має глобальні атрибути, які можна використовувати з будь-яким елементом і в будь-якому місці. Він також має атрибути подій, які спрацьовують, коли відбувається будь-яка подія. Як результат, це робить веб-додаток або веб-сторінку дуже інтерактивною. Завдяки всім цим особливостям HTML, як і раніше, залишається в грі розробки веб-додатків. З цим атрибут стилю, який можна використовувати з CSS, робить його більш красивим і привабливим у використанні. Отож, скористайтеся всіма атрибутами, які є в наявності, і дивовижне веб-додаток на ваш вибір є найпростішим способом.

    Рекомендовані статті

    Це керівництво щодо атрибутів HTML. Тут ми обговорили поняття та різні атрибути HTML. Ви також можете переглянути наступні статті, щоб дізнатися більше -

    1. Що таке HTML простими словами?
    2. Дізнайтеся, як працює HTML
    3. Що таке XML?
    4. Найкращі стилі списку HTML
    5. Порівняння HTML та XML

    Категорія:

    Інструменти веб-розробки