Как се работи в HTML5 от данни атрибути и как те могат да бъдат използвани

Какво е информационна атрибути и какви са те за?

Така че, да започнем с това, какво е най-малко. Както може би знаете, в който и да е HTML тагове, можете да посочите атрибут, независимо дали това е универсален (клас, номер) или уникален за този елемент.

Първият им черта е, че атрибутът Името може да е. Единственото правило - тя трябва да започва с data- префикс и там, разбира се, не трябва да е български букви. Един маркер може да се запише всеки брой параметри. Както и стойностите можете да зададете произволни думи. Между другото, на стойност може да бъде определен на руски. например:

Както можете да видите, можете да посочите всяко име, и който и да е стойност. Но тези варианти не правят нищо с елемент, тогава защо те се нуждаят? Има поне няколко начина за използване на данни-атрибути в строителна площадка, и нека да ги гледаш.

HTML5 и CSS3 практика от нула до резултата!

Дозиране 1 - призив към елементи в CSS

Ако знаете какво атрибут селектори, вероятно вече предполагам, как може да се използва от новите функции. Посочвайки уникален етикет на данни атрибут, можете правилно да се обърнете към него със стил. Нека разгледаме един пример:

Това ни позволи да прилага по отношение на елемента, без използването на класове стил. Все пак, ако мислите, че това е така, тогава няма особено предимство това не стане, за да получите достъп до този клас трябва да се направи за една и съща дейност. По този начин, можете просто разширяват възможностите за селектори и нищо повече.

Метод Приложение 2 - съхраняване на стойности и тяхното използване

На пръв поглед данни стойностите на атрибутите не променят нищо, и като цяло не влияе на уеб страницата. Така че, защо те се нуждаят? Всъщност, използването на тях може да се открие, ако си спомняте за ATTR () функцията в CSS.

Нека да поставим проблема: искате да покажете на обяснителен текст към страницата за снимки, които са се появили или директно със снимките ви, или когато мишката върху него, без значение колко. Standard намек се осъществява с помощта на заглавието атрибут.

Но този съвет не могат да ви отговорят на много параметри. На първо място, изглежда гладка (което не винаги е необходимо). На второ място, тя ще изчезне след време. Трето, тя се появява на различни места, в зависимост от мястото на курсора е. Но най-големият проблем - не можем да стилизирам нашият ред - тя винаги ще бъде черен текст на бял фон, което не е много интересно.

Така че, в горния код, имаме поставена снимка, посочи пътя към него и освен това записва произволен набор от данни. Прилагане заключение обяснение на снимките вече могат да бъдат, както следва:

Какво направихме? Сега всички изображения ще бъдат псевдо-елемент, който ще съдържа стойността на атрибут на данни IMG, ако това е IMG таг. В този прост начин бихте могли да донесе обяснителен текст към снимките.

Аз няма да в тази статия осигурява инструкции как да се направи нещо. Мога само да кажа, че по подразбиране ще се показва след зареждането на страницата. Често е необходимо да се първоначално се скрие и да се покаже, когато задържите върху изображението. За да го изпълни, ще трябва да използвате селектор IMG: навъртам: след това.

Разбира се, само недостатък на всички тези нововъведения е, че те не винаги се поддържат правилно. Така, че ако един браузъра нови функции работят добре и потребителите могат да използват новото поле, а след това в друг уеб браузър, всичко може да бъде различен. Разбира се, отчасти виновен за самите потребители, които не актуализират софтуера, но трябва също така да следите как и за какво се поддържа. В хода премия в HTML5 просто да бъде в състояние да се запознаят с доброто обслужване, които определят подкрепата на определени свойства.

опростен синтаксис

Не мога да спомена за това как правилно да запише атрибутите и техните стойности. Факт е, че HTML 5 в този план е станал много по-лесно. Достатъчно е да се отбележи. и е възможно да се напише код дори и с малки грешки, и като резултат той все още ще бъде обработена правилно. примери:

Тя ще изглежда, какво е това? Възможно ли е да се напише добре? Оказва се, че в HTML5 е възможно. Стойността на атрибут може да бъде определен без кавички, и себе си, за да напишете имената на етикетите дори в различни регистри. Разбира се, не трябва да го правя нарочно, и в този смисъл не се вижда. Но все пак, ако сега сте случайно някъде призная такава малка грешка, няма проблем ще възникне.

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма