HTML5 элементтері және атрибуттары
бұл мақала келесі тақырыптар бойынша байланысты: (wait this wont take long, take long please wait, long please wait this, loading, арасындағы айырмашылық неде, дегеніміз не html, php cheat sheet)Өзіңіздің HTML5 веб-беттеріңізді тікелей жасауға кіріспес бұрын, веб-бетті құрайтын негізгі құрылыс блоктарын, кірпіштерді қарастырайық.
HTML5 құжаты кез келген HTML құжаты сияқты элементтерден, ал элементтер тегтерден тұрады. Әдетте, элементтердің бұрыштық жақшаға салынған ашу және жабу тегі болады. Мысалы:
<div>Текст элемента div</div>
div Бұл бастапқы
және аяқталу тегі бар элементті анықтайды. Бұл тегтердің арасында div элементінің мазмұны орналасқан. Бұл жағдайда мазмұн ретінде қарапайым мәтін «div text» пайдаланылады.
Элементтер сонымен қатар функциясы жолды бұзу болып табылатын элемент сияқты бір тегтен тұруы мүмкін.
<div>Текст <br /> элемента div</div>
Мұндай элементтерді бос элементтер деп те атайды. Мен қиғаш сызықты қолдансам да, оның болуы спецификацияға сәйкес міндетті емес және қиғаш сызықсыз тегті қолдануға тең: < br >
Ашу тегіндегі әрбір элемент болуы мүмкін . Мысалы:
<div style="color:red;">Кнопка</div><font></font>
<input type="button" value="Нажать"><font></font>Мұнда анықталған екі элемент бар: div және енгізу. Элементте стиль div атрибуты бар . Теңдік белгісінен кейін атрибуттың мәні тырнақшаға жазылады: . Бұл жағдайда «түс: қызыл;» мәні мәтін түсі қызыл болатынын көрсетеді. style=»color:red;»
Екінші элемент — бір тегтен тұратын енгізу элементі, екі атрибутқа ие: type(элемент түрін көрсетеді — түйме) және value(түйменің мәтінін анықтайды)
Стиль сияқты барлық элементтер үшін жаһандық немесе ортақ атрибуттар бар және түрі сияқты белгілі бір элементтерге қолданылатын арнайы төлсипаттар бар.
Тұрақты атрибуттардан басқа логикалық немесе логикалық атрибуттар да бар. Мұндай атрибуттардың мәні болмауы мүмкін. Мысалы, түйме үшін төлсипатты орнатуға болады disabled:
<input type="button" value="Нажать" disabled>disabled төлсипаты элементтің өшірілгенін көрсетеді.
Глобалдықдық атрибуттар:
HTML5-те кез келген HTML5 элементіне қолданылатын Глобалдықдық атрибуттар жинағы бар
| accesskey | элементке жылдам қол жеткізу кілтін анықтайды |
| class | элементке қолданылатын CSS классын көрсетеді |
| contenteditable | элементтің мазмұнын өңдеуге болатынын анықтайды |
| contextmenu | элементті тінтуірдің оң жақ түймешігімен басқан кезде көрсетілетін элемент үшін мәтінмәндік мәзірді анықтайды. |
| dir | элементтегі мәтіннің бағытын белгілейді |
| draggable | элементті сүйреп апаруға болатынын анықтайды |
| dropzone | элементке тасымалданған кезде тасымалданатын деректерді көшіруге болатынын анықтайды |
| hidden | элементті жасырады |
| id | элементтің бірегей идентификаторы. Веб-беттегі элементтерде қайталанатын идентификаторлар болмауы керек |
| lang | элементтің тілін анықтайды |
| spellcheck | берілген элемент үшін емлені тексеру қолданылмайтынын көрсетеді |
| style | элементтің стилін орнатады |
| tabindex | TAB пернесін пайдаланып элементтерді ауыстырып қосу ретін анықтайды |
| title | элемент үшін қосымша сипаттаманы орнатады |
| translate | элементтің мазмұнын аудару керектігін анықтайды |
Бірақ, әдетте, осы тізімнен үшеуі жиі қолданылады: class, id және style.
Теңшелетін төлсипаттар
Белгілеу тілінің алдыңғы нұсқасынан айырмашылығы, пайдаланушы атрибуттары (custom attributes) HTML5-ке қосылды.
Енді веб-парақты әзірлеуші немесе жасаушы кез келген атрибутты өзі анықтай алады, оған data- префиксімен префикс қоя алады. Мысалы:
<input type="button" value="Нажать" data-color="red" >Data-color атрибуты осы жерде анықталған және «red» мәніне ие. Бұл элемент үшін мұндай атрибут болмаса да, жалпы html-де де жоқ. Біз оны өзіміз анықтап, кез келген мәнге қоямыз.
Жалғыз немесе қос тырнақша
Төлсипат мәндерін анықтау кезінде html-де жалғыз және қос тырнақшалар қолданылатын жағдайларды кездестіру сирек емес. Мысалы:
<input type='button' value='Нажать'>Бұл жағдайда жалғыз және қос тырнақшаға рұқсат етіледі, бірақ қос тырнақшалар жиі пайдаланылады. Дегенмен, кейде атрибут мәнінің өзінде қос тырнақша болуы мүмкін, бұл жағдайда бүкіл мәнді жалғыз тырнақшаға қойған дұрыс:
<input type="button" value='Кнопка "Привет мир"'>