Veb-sahifa yoki veb-ilovada ishlatiladigan HTML5 elementi yoki atributining tavsifini tezda topmoqchimisiz? Mana, veb-dizaynerlar va veb-ishlab chiquvchilar 15 yildan ortiq vaqt davomida qo'lda saqlashga harakat qilayotgan klassik ma'lumotnoma.
Kitobning beshinchi nashri HTML5 Elementlari va atributlarining toʻliq tavsifini oʻz ichiga oladi, HTML5 nomzod tavsiyasiga, HTML5.1 ishchi loyihasi va WHATWG standartlariga muvofiq. Katalogning xususiyatlari:
– HTML5, HTML5.1 va WHATWG standartidagi elementlar va atributlarning alifbo tartibida tartiblangan ro‘yxati;
- har bir element uchun belgilash, kontent toifalari, kontent modellari va boshlang'ich/tugash yorlig'i talablari misollari;
– HTML5 va HTML4.01 spetsifikatsiyalari orasidagi farqlarning tavsifi;
- maxsus belgilar jadvallari;
– HTML5 da qo‘llaniladigan API kutubxonalarining umumiy ko‘rinishi.

Tajribali veb-sayt ishlab chiqaruvchisi bo'lasizmi yoki eng so'nggi standartlarga javob beradigan veb-sayt yaratishni xohlaysizmi, bu foydali kitobni ajralmas deb topasiz.

Sizga maqola yoki kitob yoqdimi? Do'stlaringiz bilan baham ko'ring:

Saytda taqdim etilgan barcha kitoblar faqat ma'lumot olish uchun mo'ljallangan. Siz ulardan har qanday foydalanish faqat ma'lumot olish uchun ruxsat etiladi. Agar siz ulardan kelajakda foydalanishni rejalashtirmoqchi bo'lsangiz, ularni mualliflik huquqi egalaridan sotib olishingiz kerak. Sayt ma'muriyati ulardan foydalanishingiz uchun javobgar emas.

Nashrning sarlavhasini o'qib chiqqandan so'ng: "Rus tilidagi HTML5 Cheat Sheet" - hamma allaqachon nutq haqida taxmin qilgan, lekin birinchi navbatda HTML5 haqida bir nechta paragraflar.

HTML5 yaratish bo'yicha ishlar 2004 yilda boshlangan. va shu kungacha davom eting. HTML5 HTML ning eng universal va funksional versiyasi (HyperText Markup Language) sifatida rejalashtirilgan, chunki u yoki bu tarzda Apple, Mozilla, Opera, Microsoft va Google kabi sanoat titanlari HTML5 ni yaratishda ishtirok etadilar. Shuni aniq qayd etaman Gugl xrom, yoqilgan bu daqiqa, eng ko'p HTML5 elementlarini qo'llab-quvvatlaydi

HTML5 ga oʻzgartirishlar kiritilishi mumkinligiga qaramay, HTML 5 spetsifikatsiyasi ustida ish hali ham davom etayotganligi va davom etayotganligi sababli texnologiya rivojlanishi shu qadar tez sodir boʻlmoqdaki, HTML5 tez orada qabul qilinadi va keng imkoniyatlardan foydalangan holda veb-saytlar yaratilishi kerak boʻladi. HTML5 dan!

Rus tilidagi HTML5 cheat varaqlari o'rganishga yordam beradi

Koderlar va maket dizaynerlari bugungi kunda HTML5 innovatsiyalari, teglari va standartlarini o'rganishlari kerak, chunki HTML5 ustida olib borilayotgan ishlarga qaramay, uning ba'zi imkoniyatlari veb-saytlarni yaratishda allaqachon muvaffaqiyatli qo'llanilmoqda. Tabiiyki, siz HTML5 ni teglar bilan o'rganishni boshlashingiz kerak, chunki HTML5 da yangi teglar paydo bo'ldi va ba'zi eski teglar qo'llab-quvvatlanmaydi. Bundan tashqari, HTML4 dan ko'plab teglar HTML5 ga keldi. Va nimanidir o'rganishda cheat varaqdan ko'ra yaxshiroq va qulayroq nima bo'lishi mumkin? Tanishish:

RuNet-da rus tilidagi birinchi HTML5 cheat varag'i

RuNet-da rus tilidagi birinchi HTML5 cheat varaqasi ilgari keng qo'llanilgan, ammo uslublar nomlarida yozilgan yangi HTML5 elementlarini o'z ichiga oladi. Masalan, altbilgi, sarlavha, bo'lim, maqola va boshqalar. Bundan tashqari, rus tilidagi HTML5 cheat varaqida barcha teglar mavjud eski versiya HTML5 ga ko'chirilgan HTML4. Bundan tashqari, rus tilidagi HTML5 cheat varaqida HTML5 tomonidan qo'llab-quvvatlanmaydigan teglar mavjud.

Rus tilidagi HTML5 cheat varag'i, A4 formatida tayyorlangan

RuNet-da rus tilidagi birinchi HTML5 cheat varag'i A4 formatida tayyorlangan, shuning uchun uni chop etish va qo'lda saqlash sizga qulay bo'ladi. Shuni ta'kidlaymanki, HTML5 cheat varaqasi rus tilidagi barcha teglarni bir qatorda tasvirlab, tegning maqsadini imkon qadar ko'proq etkazadi. Bizning rus tilidagi HTML5 cheat varaqimiz teglar olib tashlanishi yoki HTML5 ga qo'shilishi bilan doimiy ravishda takomillashtiriladi va yangilanadi. Quyidagi havoladan “Rus tilidagi HTML5 cheat sheet”ni yuklab olishingiz mumkin. Arxivda siz 1 ta pdf topasiz Yuqori sifatli va ikkita jpg fayl turli kengaytmalarda.

“Rus tilidagi HTML5 Cheat Sheet”ni yuklab oling (Yuklab olishlar soni: 7996)

Arxivda 1024×1448 va 2480×3508 kengaytmali ikkita jpg fayl mavjud.

29.10.2014 yangilandi

Post yozilganiga va HTML 5 da cheat varaqning haqiqiy yaratilishiga ikki yildan ko'proq vaqt o'tdi. Shu vaqt ichida cheat varaq 3600 marta yuklab olindi), men juda mamnunman, o'rganganlar uchun foydali bo'ldi deb umid qilaman. layout in HTML 5. Men ko'p narsalarni o'rgandim va turli forumlar va veb-saytlardan o'rgandim va cheat varaqni yaratish orqali men o'z minnatdorchiligimni bildirishni, qarzimni qaytarishni xohladim). Nega men bugun ushbu postda yangilanish yozyapman, chunki bugun HTML5ni ishlab chiqish nihoyat yakunlandi!

HTML5ni ishlab chiqish rasman yakunlandi

HTML5 rasmiy ravishda "funktsional jihatdan tugallangan". Worldwide Web Consortium (W3C) tomonidan belgilangan global standartlarga muvofiq. Hali bajarilishi kerak bo'lgan ba'zi testlar mavjud va u hali rasmiy veb-standartga aylangani yo'q, ammo hozircha joriy versiyaga nisbatan yangi xususiyatlar bo'lmaydi, deyish mumkin.

Bu shuni anglatadiki, veb-dizaynerlar va ilovalar ishlab chiqaruvchilar endi muammosiz o'tish uchun "barqaror maqsad"ga ega yangi standart 2015 yilga kelib. HTML5 belgilash tili ishlab chiquvchilarga ilgari mustaqil ilovalar yoki qo'shimchalar talab qilingan sahifalarga funksiyalar qo'shish imkonini beradi dasturiy ta'minot Java kabi, Adobe Flash yoki Microsoft (MSFT, Fortune 500) Silverlight. U qo'llab-quvvatlaydi oqimli video va geolokatsiya xizmatlari, oflayn asboblar va sensorli boshqaruvlar, boshqa qo'ng'iroqlar va hushtaklar.

Yangi standartni ishlab chiqish uchun 10 yildan ortiq vaqt kerak bo'ldi. Bosh direktor W3C Jeff Jaffe bir necha kun oldin tayyorlangan bayonotida bugungi kunga kelib, ishlab chiquvchilar kelgusi yillar davomida HTML5-ga ishonishlari mumkinligini bilishlarini aytdi. “Bundan tashqari, ishlab chiquvchilar smartfonlar, avtomobillar, televizorlar, elektron kitoblar, raqamli belgilar va qurilmalar hali ma’lum emas”, - deya qo‘shimcha qildi u.

Oxirgi Microsoft versiyalari Internet Explorer, Gugl xrom, Mozilla Firefox va Apple Safari allaqachon HTML5 elementlarining ko'pchiligiga mos keladi. W3C allaqachon HTML 5.1 ustida ishlamoqda, uning birinchi qismlari endigina qoralama sifatida taqdim etilgan.

Konventsiya HTML kodi

Ko'pgina veb-ishlab chiquvchilar uchun HTML kod spetsifikatsiyalari yaxshi tushunilmagan.

2000-2010 yillarda ko'plab veb-ishlab chiquvchilar HTML-dan XHTML-ga o'tishdi.

XHTML dan foydalanadigan dasturchilar asta-sekin yaxshi HTML yozish spetsifikatsiyalarini ishlab chiqmoqdalar.

Va HTML5 da biz nisbatan yaxshi kod standartlarini shakllantirishimiz kerak, spetsifikatsiya ostida bir nechta ko'rsatmalar berilgan.

To'g'ri hujjat turidan foydalaning

Birinchi qatorda hujjat turi deklaratsiyasi HTML hujjati:

DOCTYPE HTML>

Agar siz kichik harflar kabi boshqa teglardan foydalanmoqchi bo'lsangiz, quyidagi koddan foydalanishingiz mumkin:

DOCTYPE HTML>

Kichik harflar element nomlari

HTML5 element nomi katta yoki kichik harflarda ishlatilishi mumkin.

• Aralash uslubdagi kassa juda yomon.
• Kichik harflarni yozish oson.

Bu paragraf.

Juda yomon:

Bu paragraf.

Bu paragraf.

Barcha HTML elementlarini o'chirib qo'ying

HTML5 da siz barcha elementlarni yopishni xohlamaysiz (masalan, element ), lekin har bir elementga yopish tegini qo'shishni tavsiya qilamiz.

Bu paragraf.

Bu paragraf.

Bu paragraf.

Bu paragraf.

Yopish bo'sh elementlar HTML

HTML5 da bo'sh HTML elementini o'chirish shart emas:

Biz yozishimiz mumkin:

Siz shuningdek yozishingiz mumkin:

XML, XHTML va slash (/) kerak.

Agar siz XML dasturiy ta'minot sahifasidan foydalanishni rejalashtirmoqchi bo'lsangiz, bu uslub juda yaxshi.

Kichik harfli atribut nomi

HTML5 xususiyat nomini katta va kichik harflarda ishlatish imkonini beradi.

• Foydalanish holati juda yomon odatdir.
• Ishlab chiquvchilar odatda kichik harflardan foydalanadilar (XHTML ga o'xshash).
• Kichik harflar uslubi yanada tetiklantiruvchi ko'rinadi.
• Kichik harflarni yozish oson.

Mulk qiymati

HTML5 atribut qiymatlarini keltirish mumkin emas.

• Agar xususiyat qiymati bo'sh joylarni o'z ichiga olsa, siz tirnoqlardan foydalanishingiz kerak.
• Aralash uslub tavsiya etilmaydi, bitta uslub tavsiya etiladi.
• Qo'shtirnoq yordamida mulk qiymatlarini o'qish oson.

Quyidagi misol atribut qiymatida bo'shliqlar mavjud, tirnoqlardan foydalanmang, u ishlamasligi mumkin:

Quyida ishlatiladi qo'sh tirnoq, bu to'g'ri:

xususiyatlari

Image Alt atributlari tez-tez ishlatiladi. Tasvirni ko'rsatish imkoni bo'lmasa, u tasvir ekranini almashtirishi mumkin.

= "HTML5" uslubi = "kenglik: 128px; balandlik: 128px">

Tasvir o'lchami aniqlanadi, belgilangan qiymatni yuklash vaqtida zahiraga olinishi mumkin, miltillashni kamaytiradi.

= uslubi "HTML5" = "kenglik: 128px; balandlik: 128px">

Bo'shliqlar va teng belgilar

Tenglik belgisidan oldin va keyin bo'shliqlardan foydalanishingiz mumkin.

Kodning uzun qatorlaridan saqlaning

HTML muharriridan foydalanib, chap va o'ngga aylantirish kodi noqulay.

Kodning har bir satri imkon qadar 80 belgidan kam.

Bo'sh chiziqlar va chekinish

Hech qanday sababsiz bo'sh qator qo'shmang.

Mantiqning har bir funktsional bloki uchun bo'sh qator qo'shing, bu esa uni yanada o'qilishi mumkin.

Qisqa kodlar orasidagi keraksiz bo'sh chiziqli chiziqlardan foydalanmang.

Qo'shimcha bo'sh qatorlar va chekinishlar:

Ushbu darslik

HTML

Ushbu o'quv qo'llanma nafaqat texnologiyani, balki uyquni ham o'rgatadi.
Ushbu darslik nafaqat texnologiyani, balki tushida ham,
Ushbu o'quv qo'llanma nafaqat texnologiyani, balki uyquni ham o'rgatadi.

Ushbu darslik

Ushbu qo'llanmada nafaqat texnologiyani, balki uyquni ham o'rgatadi.
Ushbu o'quv qo'llanma nafaqat texnologiyani, balki uyquni ham o'rgatadi.
Ushbu o'quv qo'llanma nafaqat texnologiyani, balki uyquni ham o'rgatadi.
Ushbu o'quv qo'llanma nafaqat texnologiyani, balki uyquni ham o'rgatadi.

Misol shakli:

Ism
Tavsif


A
Tavsif A


B
Tavsif B

Misol ro'yxati:

London

Parij

Tokio

Keling, tashlab ketaylik va?

HTML5 standartida teg qoldirilishi mumkin.

Quyidagi hujjatlar haqiqiy HTML5 hisoblanadi:

Misol:

DOCTYPE HTML>

Sahifa sarlavhasi

Bu sarlavha

Bu paragraf.

Urunib ko'r "

element hujjatning ildiz elementi, sahifani tasvirlash uchun ishlatiladigan til:

DOCTYPE HTML>

Ekranlar va qidiruv tizimlarida o'qishni osonlashtirish uchun til bayonoti.

DOM yoki XML dasturiy ta'minotining ishdan chiqishini o'tkazib yuboraylik.

Qadimgi brauzerlarda (IE9) paydo bo'ladigan xatolikni o'tkazib yuboraylik.

Buni o'tkazib yuboramizmi?

HTML5 standartida teg qoldirilishi mumkin.

Element standartga qo'shilishidan oldin brauzer birlamchi tarkibga mos keladi.

misollar

DOCTYPE HTML>

Sahifa sarlavhasi

Bu sarlavha

Bu paragraf.

Sinab ko'ring » Metadata

HTML5 sarlavhasi sahifa mavzusini tavsiflovchi elementni talab qiladi:

Ushbu qo'llanmada

Qidiruv tizimiga sahifangiz mavzusini tezda tushunish imkonini beruvchi sarlavha va til:

DOCTYPE HTML>



Ushbu qo'llanmada

Veb-dizayner - HTML5 spetsifikatsiyasi (HTML 5)

HTML5-dagi teglar - bu kompyuter dasturi (qidiruv roboti va boshqalar) sahifaning asosiy mazmunini sahifaning qolgan qismidan (formulyatsiya va navigatsiya elementlari) ajrata olishi uchun mo'ljallangan, veb-sahifa tuzilishini tavsiflovchi XML-HTML teglari. : yuqori, pastki, menyu , sahifa tomoni elementlari, takrorlanuvchi (dinamik) bloklar va boshqalar. Shuningdek, asosiy tarkib (sahifa matni) darajasida bo'linish mavjud. HTML5 tilining o'zi HTML, XML, CSS va boshqalarga qo'shimcha hisoblanadi.

Sahifaning sarlavhasi Veb-sahifaning yuqori qismi, "sarlavha" Veb-sahifaning asosiy menyusi Asosiy matn, maqola, sahifa materiali Yon panel (yon panel) Sahifaning pastki qismi, altbilgi

Veb-sayt tuzilishi

- sahifaning asosiy mazmunini ramkaga qo'ying (maqola),
- sahifa sarlavhasini ramkaga soling,
- sahifaning pastki qismini ramkaga qo'ying,
- asosiy narsani belgilang sahifa menyusi,
- sahifaning yon panelini ramkaga qo'ying (yon panel),
- sahifadagi takrorlanuvchi bloklar (masalan, sharhlar).

HTML5 veb-sahifa shablon kod elementlari.

- Windows-1251 kodlashni tayinlang.

- agar sahifa IE da ochilgan bo'lsa, brauzer har doim eng so'nggi standart displey rejimidan foydalanishi kerak.

- saytni mobil qurilmalarda ko'rsatish.

sarlavha - sayt sahifasining sarlavhasi, unda odatda sayt logotipi, sarlavha, telefon raqami, slayder va boshqalar mavjud.

nav - sayt sahifasining asosiy menyusi.

maqola - sahifaning asosiy mazmuni: maqola, blog posti, forum mavzusi va boshqalar. Matn, rasmlar, videolar, jadvallar va boshqalarni o'z ichiga olishi mumkin.

chetga - saytning yon paneli (yon paneli), odatda o'z ichiga oladi turli elementlar, masalan: toifalar, teglar, so'nggi xabarlar/sharhlar, qo'shimcha menyular, hisoblagichlar va boshqalar.

altbilgi - pastki qism - veb-sayt sahifasining pastki qismi, odatda o'z ichiga oladi turli ma'lumotlar(mualliflik huquqi), bog'lanish uchun ma'lumot(manzillar, telefon raqamlari) va boshqalar.

HTML5 sahifa tuzilishi darajasida

Keling, sahifa tuzilishini ajratish uchun mas'ul bo'lgan yangi HTML5 teglari ro'yxatini ko'rib chiqaylik:

- "sahifa sarlavhasi" deb ataladigan saytning yuqori qismidagi dizayn elementlarini ramkaga soluvchi teglar. Sarlavha teglari sifatida ham foydalanish mumkin yuqori qismi bo'lim yorlig'i.

- saytdagi asosiy menyuni hoshiyalovchi teglar.

- sahifaning asosiy mazmunini belgilovchi teglar: maqola, blog yozuvi, yangiliklar, birinchi forum yozuvi va boshqalar.

- yon panelni hoshiyalovchi teglar. Yon panel - bu "yon panel" deb ataladigan bo'lib, unda odatda sarlavhalar bloklari (toifalar), teglar bulutlari (teglar), ro'yxat mavjud. so'nggi yozuvlar va h.k. Hisoblagichlarni, vidjetlarni (masalan, VKontakte sharhlari) va ijtimoiy tugmalarni ramkalash uchun chetga teglardan ham foydalanishingiz mumkin.

- ramka teglari pastki qismi sayt, muallif (kompaniya) nomi, aloqalar (manzillar, telefon raqamlari), huquqiy ma'lumotlar (mualliflik huquqi) va boshqalarni o'z ichiga olishi mumkin bo'lgan "sahifaning pastki qismi". Altbilgi teglari bo'lim tegining pastki qismi sifatida ham ishlatilishi mumkin, ya'ni. altbilgi teglarining o'zi bo'lim teglari orasida joylashgan bo'ladi

- sahifaning yoki asosiy tarkibning takrorlanuvchi qismlarini ramkalashtirgan teglar, masalan, sahifada hikoyaning bir nechta bo'limlari bo'lsa, unda har bir bobni ushbu teglar orasiga joylashtirish mumkin. Yoki yon paneldagi havolani bossangiz (masalan, ba'zi bir toifadagi havolada), unda ushbu turkumga tegishli maqolalarga olib boradigan tavsiflar bilan havolalar mavjud bo'lgan sahifa paydo bo'ladi va tavsiflar bilan havolalar ramkaga solinishi mumkin. bo'lim teglari bilan, shuningdek, onlayn-do'kondagi tavsiflari bo'lgan mahsulotlar, postlarga sharhlar, forumlardagi mavzu bo'yicha sharhlar va boshqalar.

HTML5 matn darajasida

Keling, sahifa matnining semantik bo'linishi uchun javob beradigan yangi HTML5 teglari ro'yxatini ko'rib chiqaylik:

- bu teglar orasida joylashgan matn "tanlangan" bo'ladi. Belgilash teglarining maqsadlaridan biri matndagi so'zlarni, masalan, qidiruv satriga foydalanuvchi kiritgan so'zga mos keladigan ramka yaratishdir.

- teglar formatda sana va/yoki vaqt yaratish uchun mo'ljallangan
Shakl ISO: YYYY-MM-DDTs:dd:ss , bu format tushunarli kompyuter dasturlari. Vaqt teglari sana yoki matnni ramkalashi mumkin; agar teg matnni ramkaga qo'ysa, unga sana va/yoki ISO formatidagi vaqt atributi qo'shiladi.

- teglar yashirin yoki ko'rsatilgan ma'lumotlarni saqlash uchun mo'ljallangan (spoiler kabi ishlaydi).

- teglar sarlavhani hoshlaydi, ustiga bossangiz, tafsilotlar teglari orasida joylashgan matn paydo bo'ladi (spoiler sifatida foydalanish mumkin).

Qo'shimcha HTML5 til teglari

Tilni boyitgan yangi HTML5 teglari roʻyxati:

- teglar o'lchov natijasi o'zgarmaydigan statik o'lchov ko'rsatkichini ko'rsatish uchun mo'ljallangan. Ishlash uchun sizga minimal va maksimal qiymat kerak.

- teglar dinamik o'lchov ko'rsatkichini (masalan, fayllarni yuklab olish shkalasi) aks ettirish uchun mo'ljallangan, unda o'lchov natijasi real vaqtda o'zgaradi.

- teg JavaScript-da skriptlarni yaratishda foydalaniladigan menyu teglari orasida joylashgan bo'lishi kerak.

- buyruq tegi bu teglar orasiga joylashtiriladi.

- teglar skript ishini ko'rsatish uchun mo'ljallangan.

- teglar matn maydoniga kiritilganda ko'rsatiladigan ro'yxat yaratish uchun mo'ljallangan.

- teglar rasm teglari orasida joylashgan ob'ekt (masalan, rasm) tavsifini ramkaga soladi.

- teglar turli xil sahifa ob'ektlarini o'z tavsiflari bilan guruhlaydi, masalan, tavsifli tasvirlar, tavsifli mahsulotlar va boshqalar.

- teglar h* sarlavhalarini guruhlash uchun mo'ljallangan.

- teg umumiy/maxfiy kalit juftlarini yaratish, ma’lumotlarni shifrlash/shifrini ochish, raqamli imzo yaratish/tasdiqlash uchun ishlatiladi.

- teglar matnni va unga annotatsiyani hoshlaydi.

- teglar yoqut teglari orasida joylashgan va izohni ramkalash uchun mo'ljallangan.

- teglar ruby ​​teglarini qo'llab-quvvatlamaydigan brauzerlar uchun mo'ljallangan.

- teg brauzerga so'zni qaerga qo'yish kerakligini aytadi (" yumshoq uzatish") agar bu so'z brauzer oynasiga mos kelmasa.

Yangi texnologiyalarni tavsiflovchi HTML5 teglari

HTML5 HTML5 tilining bir qismi bo'lgan va bo'lmagan ko'plab texnologiyalar va API-lardan foydalanish qobiliyatini taqdim etadi uchinchi tomon plaginlari, ulardan ba'zilari:

- teglar audio fayllarni ishlatmasdan o'ynash uchun mo'ljallangan uchinchi tomon dasturlari(plaginlar, kengaytmalar).

- teglar uchinchi tomon dasturlari (plaginlar, kengaytmalar) dan foydalanmasdan videofayllarni o'ynash uchun mo'ljallangan.

- teg audio va video teglar ichida joylashgan audio/video fayllarga yo'lni ko'rsatish uchun mo'ljallangan.

- teglar vektor shakllarini yaratish va ularni JavaScript dasturlash tilidan foydalanib manipulyatsiya qilish mumkin bo'lgan saytda maxsus maydon yaratish uchun mo'ljallangan. Kelajakda tuval Flash texnologiyasini almashtirishi kerak (ha, nazariy jihatdan ...).

teg

Teg - bu vektor shakllarini chizish va manipulyatsiya qilish uchun mo'ljallangan maxsus element. Teg Flash texnologiyasini almashtirish uchun yaratilgan. Teg yordamida siz vektor shakllarini (tasvirlarni) chizishingiz va JavaScript-dan foydalanib, ushbu shakllarni manipulyatsiya qilishingiz va shu bilan saytda animatsiya (multfilmlar va hatto o'yinlar) yaratishingiz mumkin.

Audio video

Teg yordamida siz sahifaga audio fayllarni joylashtirishingiz va ularni tinglashingiz mumkin. Element

Teg yordamida siz sahifaga video fayllarni joylashtirishingiz va ularni ko'rishingiz mumkin. Element shuningdek, o'ynash tugmalari bilan panelni yaratadi.

JavaScript API

HTML5 spetsifikatsiyasi uning o'zaro ta'sirini tasvirlaydi JavaScript tili, DOM texnologiyasi orqali sahifa elementlari bilan. Shuningdek, HTML5-da ob'ektlarni manipulyatsiya qilishning yangi usullari mavjud, masalan, JavaScript-dan foydalanish va bu usullardan foydalanib, audio/video boshqaruv panelidagi tugmalarni dasturiy ravishda boshqarishingiz mumkin.

XML texnologiyasini qo'llab-quvvatlash

HTML5 tilidan foydalangan holda yozilgan HTML hujjatida endi SVG yoki MathML kabi turli xil XML formatlari bilan bog'liq texnologiyalarni amalga oshirish mumkin.

SVG

SVG - kengaytiriladigan vektor grafikasi vektor grafikasi) XML formatidir. HTML5 XML formatlarini qo'llab-quvvatlay boshlaganligi sababli, endi SVG yordamida yaratilgan rasmlarni HTML hujjatiga joylashtirish va ularni JavaScript orqali boshqarish mumkin.

Yashil doira naqshiga misol kodi:

Natija:

MathML

MathML - Mathematical Markup Language (matematik belgilash tili) XML formati. Yordamida ushbu formatda Siz turli xil matematik formulalarni tasvirlashingiz mumkin.

HTML5 da qaysi teglar eskirgan?

HTML5 spetsifikatsiyasidagi eski teglar:

va o'rniga joylashtirish tegidan foydalanish kerak
o'rniga abbr tegidan foydalanish kerak
o'rniga ishlatilishi kerak audio teg
o'rniga ul tegidan foydalanish kerak
..oʻrniga ishlatilishi kerak iframe tegi
uning o'rniga bir qator shakl va kiritish teglaridan foydalanishingiz kerak
va o'rniga oldindan yoki kod teglaridan foydalanish kerak


Buning o'rniga oldindan teg ishlatilishi kerak
o'rniga s tegidan foydalanish kerak

Teglarni formatlash o'rniga: , , , , , , , , va , siz CSS xususiyatlaridan foydalanishingiz kerak.

HTML5-da veb-saytlarni yaratishda eskirgan teglardan foydalanish tavsiya etilmaydi, ammo bu brauzerlar ularni endi qo'llab-quvvatlamaydi degani emas, masalan, tavsiya etilmaydigan tegning ishi. tagiga chizish

HTML5 da yangi global atributlar

Global atributlar har qanday HTML hujjat tegiga kiritilishi mumkin bo'lgan atributlardir. HTML5 da yangi global atributlar paydo bo'ldi, quyidagi tavsiflarda ular Yangi so'zi bilan ta'kidlangan

Keling, global HTML5 atributlarining nomlari va tavsiflarini ko'rib chiqaylik:

accesskey=" " - oldindan dasturlashtirilgan tugmani bosish orqali sahifaning istalgan elementidan (teg) foydalanish imkonini beradi tugmalar birikmasi,
class=" " - sinf nomini belgilash imkonini beradi,
contenteditable=" " - kontentni tahrirlash imkonini beradi element Yangi,
contextmenu=" " - Yangi element uchun kontekst menyusini yaratishga imkon beradi,
dir=" " - boshqarish imkonini beradi matn yo'nalishi,
draggable=" " - foydalanuvchiga yangi elementni sudrab borish imkonini beradi,
dropzone=" " - Yangi ni tortib olayotganda element bilan nima qilish kerakligini belgilash imkonini beradi,
hidden=" " - Yangi elementni yashirish imkonini beradi,
id=" " - element uchun noyob identifikatorni o'rnatish imkonini beradi,
lang=" " - element tarkibidagi til kodini belgilash imkonini beradi,
spellcheck=" " - Yangi element tarkibidagi imlo tekshirilgan yoki tekshirilmaganligini belgilash imkonini beradi,
style=" " - element uchun uslub yaratish imkonini beradi,
tabindex=" " - Tab tugmachasini bosganingizda elementlar qanday tartibda fokus olish kerakligini ko'rsatadigan qoida yaratishga imkon beradi,
title=" " - sichqonchani element ustiga olib borganingizda paydo bo'ladigan maslahat yaratish imkonini beradi.

HTML5 spetsifikatsiyasida teglar to'liq huquqli ob'ektlarga aylanganligi sababli, global atribut tushunchasi ushbu ob'ektlarga, hatto spetsifikatsiyada hali tasvirlanmagan teglarga ham xos edi.

HTML5 hujjat kodlari tuzilishidagi innovatsiyalar

HTML5-dagi kod tuzilishi ba'zi o'zgarishlarga duch keldi, ulardan ba'zilari:

1. farqli o'laroq oldingi versiyalar HTML5 tilida faqat bitta hujjat turi mavjud:
Misol uchun, siz buni ushbu sayt sahifalarining manba kodida ko'rishingiz mumkin (doktypedan oldin hech narsa bo'lmasligi kerakligini unutmang, bo'sh joy, qatorlar bo'lmasligi va hokazo).

2. Hujjat tilini ko'rsatish uchun endi meta teg o'rniga:
tegda lang="ru" atributidan foydalanishingiz kerak:

3. Hujjatni kodlashni ko'rsatish uchun endi meta teg o'rniga:

http-equiv va kontent atributlarisiz meta tegdan foydalanishingiz kerak

4. JavaScript skriptini yaratishda, endi tegda, type="text/javascript" va language="JavaScript" atributlarini amalga oshirishning hojati yo'q.

5. Amalga oshirilganda CSS uslublari, endi va teglarida type="text/css" atributini amalga oshirishning hojati yo'q.

6. Havola inline teg, shuning uchun erta HTML spetsifikatsiyalari va XHTML, ular blok teglarini ramkalash uchun tavsiya etilmagan; endi HTML5 spetsifikatsiyasida havolalar bo'yicha ushbu tavsiya o'chirildi va endi ularga bir yoki bir nechta blok elementlarini ramkalashga ruxsat berildi.

Sarlavha

Paragraf

Endi HTML5 bilan buni amalga oshirishingiz mumkin:

Sarlavha

http://html-5.ru/, http://html-5.ru/uchebnik-html5 sayti materiallari asosida

Qidiruv mexanizmi robotlari uchun buyruq teglari, sahifalarning semantik yuklanishi

• 2015-2017 yillardagi HTML W3C ga qo'shimchalar

• W3C tavsiyalari 1999 yil 24 dekabr

Ko'pincha veb-ishlab chiquvchilar ba'zi HTML kodlash standartlari mavjudligini bilishmaydi. Biroq, 2000 va 2010 yillar oralig'ida ko'plab veb-ishlab chiquvchilar HTML-dan XHTML-ga o'tishdi. Shu bilan birga, XHTML ishlab chiquvchilarni haqiqiy va "yaxshi shakllangan" kod yozishga majbur qildi. HTML5, kodni tekshirish haqida gap ketganda, biroz beparvolikka imkon beradi.

Biroq, uslubdagi izchillik boshqalarga HTML kodingizni tushunishni osonlashtiradi.

Ehtimol, bir kun o'qish dasturlari kabi dasturlar XML ma'lumotlari, siz HTML kodingizni o'qishingiz kerak bo'ladi. Shunday qilib, yaxshi shakllangan, XHTML-ga o'xshash sintaksisdan foydalanish oqilona yondashuvdir.

Har doim kodingiz toza, toza va yaxshi shakllanganligiga ishonch hosil qiling.

To'g'ri hujjat turidan foydalaning

Har doim birinchi qatorda hujjat turini e'lon qiling:

Agar siz kichik harflar teglari bilan muvofiqlikni saqlamoqchi bo'lsangiz, quyidagi hujjat turi ta'rifidan foydalanishingiz mumkin:

Element nomlarini kichik harflar bilan yozing

HTML5 element nomlarida ham katta, ham kichik harflarga ruxsat beradi. Biroq, har doim faqat kichik harflardan foydalanish yaxshidir. Bu quyidagi fikrlar bilan izohlanadi:

• Teg nomlarida katta va kichik harflarni aralashtirish yomon amaliyot hisoblanadi

Bu matnning paragrafi.

Juda yomon:

Bu matnning paragrafi.

Bu matnning paragrafi.

Barcha HTML elementlarini yoping

HTML5 da barcha elementlarni yopishingiz shart emas (masalan, element

Bu matnning paragrafi.

Bu matnning paragrafi.

Bu matnning paragrafi.

Bu matnning paragrafi.

Bo'sh HTML elementlarini yoping

HTML5 da bo'sh elementlarni yopish yoki bermaslik veb-ishlab chiquvchining xohishiga bog'liq.

Qabul qilinadi:

Shuningdek, qabul qilinadi:

Biroq, XHTML va XML da so'nggi chiziq (/) TALAB.

Agar sizning veb-sahifangizga XML ilovalari tomonidan kirish kutilsa, u holda bo'sh HTML elementlari Yakunlovchi chiziqdan foydalanish yaxshidir!

Atribut nomlari uchun kichik harflardan foydalaning

HTML5 da atribut nomlarini yozishda siz katta va kichik harflarni aralashtirishingiz mumkin.

• Atribut nomlarida katta va kichik harflarni aralashtirish yomon amaliyot hisoblanadi
• Ishlab chiquvchilar odatda kichik harflardan foydalanadilar (XHTML kabi)
• Kichik harflar bilan yozish yanada toza ko'rinadi
• Kichik harflarni yozish osonroq

Atribut qiymatlarini tirnoq ichiga kiriting

HTML5 atribut qiymatlarini tirnoqsiz yozishga imkon beradi. Biroq, biz har doim atribut qiymatlarini qo'shtirnoq ichiga kiritishni tavsiya qilamiz, chunki

• Katta va kichik harflarni ma'noda aralashtirish yomon amaliyot hisoblanadi
• Ko'rsatilgan qiymatlarni o'qish osonroq
• Qiymatlarda bo'sh joylar mavjud bo'lsa, iqtibos keltirishingiz kerak

Juda yomon:

Bu ishlamaydi, chunki qiymatda bo'sh joylar mavjud

Tasvir atributlari

Rasmlarni belgilashda har doim "alt" atributidan foydalaning. Ushbu atribut rasm biron sababga ko'ra ko'rsatilmaganda muhim ahamiyatga ega.

Bundan tashqari, har doim tasvirning kengligi va balandligini aniqlang. Bu sahifa tartibining buzilishini kamaytiradi, chunki sahifa yuklanayotganda brauzer tasvir uchun joy ajratadi.

Bo'shliqlar va tenglar

HTML5 teng belgisi atrofida bo'sh joylarga ruxsat beradi. Biroq, bo'sh joy bo'lmasa, kodni o'qish osonroq bo'ladi va u ob'ektlarni yaxshiroq guruhlaydi.

Kodning uzun qatorlaridan saqlaning

Da HTML yordamida muharriri, agar siz oynani chapga yoki o'ngga aylantirishingiz kerak bo'lsa, HTML kodini o'qish noqulay.

Kod qatorini 80 belgidan oshmasligi kerak.

Bo'sh chiziqlar va chekinish

Hech qanday sababsiz bo'sh qatorlarni qo'shmaslik kerak.

Eng yaxshi o'qilishi uchun bo'sh satrlar faqat katta, mantiqiy izchil kod bloklarini ajratish uchun qo'shilishi kerak.

Bundan tashqari, yaxshiroq o'qilishi uchun, chekinish uchun ikkita bo'sh joy qo'shing. Buning uchun yorliqlardan foydalanmang.

Keraksiz bo'sh joy va chekinishdan saqlaning. Har bir elementni cheklashning hojati yo'q.

Shart emas:

Mashhur shaharlar Tokio

Tokio Yaponiyaning poytaxti, Katta Tokio hududining markazi va dunyodagi eng gavjum metropolitandir. Bu Yaponiya hukumati va imperator saroyining qarorgohi va Yaponiya imperator oilasining uyidir.

Mashhur shaharlar Tokio

Tokio Yaponiyaning poytaxti, Katta Tokio hududining markazi va dunyodagi eng gavjum metropolitandir. Bu Yaponiya hukumati va imperator saroyining qarorgohi va Yaponiya imperator oilasining uyidir.

Ism tavsifi

A	A tavsifi
B	B tavsifi

London

Parij

Tokio

O'tkazib yuborish yoki qilmaslik va?

HTML5 standartiga ko'ra, teg va teg ishlatilmasligi mumkin.

Quyidagi kod HTML5 standartiga muvofiq haqiqiy hisoblanadi:

Sahifa sarlavhasi Bu matn sarlavhasi

Bu matnning paragrafi.

Element hujjatning ildizidir. Bu sahifa tilini aniqlash uchun tavsiya etilgan joy:

Sahifa tili deklaratsiyasi ham ixtisoslashgan ilovalar (masalan, ekranni o'qish dasturlari) va qidiruv tizimlari uchun muhimdir.

Bundan tashqari, agar siz teg yoki teg yozmasangiz, u ilovaning DOM va XML strukturasini buzishi mumkin. Tegni o'tkazib yuborish ham eski brauzerlarda (IE9) xatolarga olib kelishi mumkin.

Tegni o'tkazib yuborishim kerakmi?

HTML5 standartiga ko'ra, teg ishlatilmasligi mumkin.

Odatiy bo'lib, brauzerlar o'zlari yaratgan element ichidagi ochilish tegidan oldin barcha elementlarni qo'shadilar.

Tegni qoldirib, HTML strukturasining murakkabligini kamaytirishingiz mumkin:

Sahifa sarlavhasi Matn sarlavhasi

Bu matnli paragraf.

Metadata

Element HTML5 da talab qilinadi. Sahifaning sarlavhasi quyidagi ma'no bilan to'ldirilishi kerak:

Sahifaning to'g'ri talqin qilinishi va to'g'ri indekslanishini ta'minlash qidiruv tizimlari, sahifa tilining ta'rifi va belgilarni kodlash imkon qadar tezroq e'lon qilinishi kerak:

HTML5 sintaksisi va kodlash standartlari

Ko'rish oynasini o'rnatish (ko'rish oynasi)

"Viewport" - bu veb-sahifaning foydalanuvchiga ko'rinadigan maydoni. Bu maydon qurilmadan qurilmaga va har bir qurilmaga farq qiladi mobil telefonlar kompyuter ekranidagidan kichikroq bo'ladi.

HTML5 veb-dizaynerlarga ko'rish oynasini boshqarish imkonini beruvchi usulni taqdim etdi.

Siz har doim barcha veb-sahifalarda quyidagi shaklda ko'rish oynasi boshqaruvidan foydalanishingiz kerak:

Ushbu ko'rish oynasi boshqaruvi brauzerga sahifaning o'lchamini va masshtabini boshqarish bo'yicha ko'rsatmalar beradi.

Keng=device-width qismi sahifa kengligini joriy qurilmaning ekran kengligiga mos keladigan qilib o‘rnatadi (bu siz foydalanayotgan qurilmaga qarab o‘zgaradi).

Boshlang'ich o'lchov = 1,0 qism to'plamlari Birinchi daraja sahifa birinchi marta brauzer tomonidan yuklanganda ortadi.

Quyida siz smartfon ekranidagi veb-sahifaning misolini ko'rish maydoni meta-tegi o'rnatilgan va o'rnatmagan holda ko'rishingiz mumkin:

Ko'rish maydoni meta tegi bo'lgan sahifa

HTML sharhlari

Qisqa sharh bir qatorga yozilishi kerak: