kENDİ! Html5. Şu anda, web arayüzleri ve uygulamaları geliştirirken zaten aktif olarak kullanılır. Hepimiz HTML5'in birçok yeni etiket, nitelik ve eleman getirdiğini biliyoruz. Bazıları sitelerimiz için gerçekten faydalıdır. Böylece, bu makalede, birkaç faydalı ve önemli hakkında kısaca söyleyeceğim. Html5 etiketleri ve nitelikleriUygulamada bilmeniz ve kullanmanız gerekir!
Yapısal İşaretleme HTML5
Zaten ele geçirilmiş DIV bloklarını değiştirmek için tasarlanmış HTML5'te birkaç yeni etiket ortaya çıktı (tüm elbette 🙂). Dışarıdan, bu yüzden konuşmak için, hiçbir şey değişmedi, ancak özünde yeni etiketler bir anlamsal (anlamsal) bir yük taşır ve her blok için yerini ve rolünü kesin olarak tanımlamaktadır:
- - "Bodrum", sitenin veya bölümün bir web sayfasını belirler, burada ek bilgilerin genellikle kedide bulunduğu;
- - Navigasyon alanını, linklerin kural listesi olarak belirler;
Form
Yeni tür giriş alanları
HTML5 yeni türleri tanıttı giriş alanları. Mobil cihazlar için uyarlanmış daha anlamsal olarak doğru kod yazmanıza izin verir. Örneğin, e-posta türünü kullanırken, girilen metnin otomatik olarak doğrulanması, e-posta adresinin kimliğinde ve benzeri bir şekilde gerçekleşir.
1 | <giriş Tipi \u003d "URL"\u003e
|
Düzenli doğrulama ifadeleri
HTML5 görünümünden önce, sitenizdeki formu kullanırken, girilen metni atlamak zorunda kaldınız. Javascript. kontrol için. Şimdi HTML5 ve Desen Özelliği ile, verileri doğrulamak için normal bir ifade şablonu tanımlayabilirsiniz.
1 |
|
HTML5 Datalist ile Otomatik Tamamlama
Datalist HTML5 öğesini kullanarak, Otomatik doldurma giriş alanları için bir veri listesi oluşturmanıza olanak sağlar. Süper faydalı!
1 |
|
Otomatik odaklama alanı alanları
Otomatik odaklama özelliği, odağı herhangi bir form öğesine (düğme dahil) ayarlamanıza izin verir.
HTML5 ile Gizli Elemanlar
HTML5'e girilen HTML5'e girilen, bu, belirli bir öğeyi gizlemenizi sağlayan, böylece Dispaly kullanarak CSS için geçerlidir: Yok
Pellentsque Alışkan Morbi Tristique Senectus et netus .... Pellentesque Habitant Morbi Tristique Senectus et netus et malesuada ... Site için bir akordeon oluşturun - HTML5'te, referanslar için yeni bir özellik belirdi. Şimdi, bağlantının indirilmesi gereken tarayıcıyı belirlemek ve bu özniteliği kullanmak için yeterince açılmamak için. Taze makaleler ve dersler ile güncel kalmak için Uzun zaman önce, XHTML / HTML4 sırasında, geliştiriciler, DOM ile ilgili keyfi verileri saklamak için kullanabilecekleri birkaç özelliğe sahipti. Kendi niteliklerinizi icat edebilirsiniz, ancak riskliydi - kodunuz geçerli olmazdı, tarayıcılar verilerinizi görmezden gelebilir ve ismin standart HTML öznitelikleriyle çakışırsa sorunlara neden olabilir. Bu nedenle, çoğu geliştirici, ek çizgileri depolamanın tek makul bir yolu olduğu için sınıf veya rel özniteliklerine bağlandı. Örneğin, Twitter'da geçici bir mesaj hattı gibi mesajları görüntülemek için bir widget oluşturduğumuzu varsayalım. İdeal olarak, JavaScript kodu yeniden yazma gereği olmadan yapılandırabilmelidir, bu nedenle sınıf özniteliğindeki kullanıcı kimliğini tanımlayacağız, örneğin:
Başlık 2.
Öznitelik indir
JavaScript kodumuz kimliği olan bir öğeyi arayacak msglist.. Komut dosyasını kullanarak, ile başlayan sınıfları arayacağız. user_Ve bizim durumumuzdaki "Bob" kullanıcı kimliği olacak ve bu kullanıcının tüm mesajlarını göstereceğiz.
Diyelim ki, maksimum mesaj sayısını ayarlamak ve altı ay boyunca mesaj atlamak istiyorum (180 gün):
Özniteliğimiz sınıf Çok hızlı bir şekilde tırmanıyor - bir hataya izin vermek daha kolaydır ve JavaScript üzerindeki dizelerin analizi daha karmaşık hale gelir.
HTML5 veri öznitelikleri
Neyse ki, HTML5'te, özel nitelikleri kullanma yeteneği tanıtıldı. Ön eki ile alt kayıttaki herhangi bir ismi kullanabilirsiniz. veri-, Örneğin:
Özel Veri Öznitelikleri:
- bu hatlar içinde bulunurlar, JSON gibi bir dize olarak temsil edilebilecek veya kodlanmış herhangi bir bilgiyi saklayabilirsiniz. JavaScript kullanarak türleri getirilmelidir
- uygun bir HTML5 elemanının veya niteliklerin olmadığı durumlarda kullanılmalıdır.
- sadece sayfaya başvurun. Mikroformatların aksine, arama motorları ve arama robotları gibi dış sistemler tarafından göz ardı edilmelidirler.
JavaScript'te işlemenin 1 numaralı Örnek: GetAttribute ve SetAttribute
Tüm tarayıcılar, GetAttribute ve SetAttribute yöntemlerini kullanarak veri özniteliklerini almanıza ve değiştirmenize izin verir:
Var msglist \u003d document.getElementbyid ("msglist"); var show \u003d msglist.getattribute ("veri listesi boyutu"); msglist.setattribute ("veri listesi boyutu", + show + 3);
Çalışır, ancak yalnızca eski tarayıcılarla uyumluluğu korumak için kullanılmalıdır.
Örnek # 2 JavaScript'te İşlem: Veri () Yöntemi JQuery Kütüphanesi
JQuery 1.4.3 veri () yönteminden başlayarak, HTML5 veri özniteliklerini işler. Ön eki açıkça belirtmeniz gerekmez veri-Yani böyle bir kod çalışacak:
Var msglist \u003d $ ("# msglist"); var show \u003d msglist.data ("Liste boyutu"); msglist.data ("Liste boyutu", gösterisi + 3);
Ancak, olabileceği gibi, jQuery'nin bu özelliklerin değerlerini süpürme türlerine dönüştürmeye çalıştığını unutmayın (Boolean değerleri, sayılar, nesneler, diziler veya null) ve DOM'yi etkiler. Aksine setattribute., Yöntem veri () Fiziksel olarak özniteliğin yerini almaz veri listesi boyutu - JQuery dışında değerini kontrol ediyorsanız - hala 5'e eşit kalacaktır.
JavaScript'te işleme sayısı: Veri setleri ile çalışmak için API: API
Ve nihayet, DomStringMap nesnesini döndüren HTML5 veri kümesiyle çalışmak için bir API'imiz var. Veri niteliklerinin nesnede önek olmadan gösterileceği hatırlanmalıdır. veri-İsimlerden kaldırıldı Hyphena belirtileridir ve isimlerin kendileri camelcase'ye dönüştürülür, örneğin:
| Öznitelik adı | Veri Seti API'sinde Adı |
| veri kullanıcısı. | kullanıcı. |
| veri maaşı. | maxage. |
| veri listesi boyutu | listeden. |
Yeni kodumuz:
Var msglist \u003d document.getElementbyid ("msglist"); var show \u003d msglist.dataset.Listsize; msglist.dataset.Listsize \u003d + Show + 3;
Bu API, tüm modern tarayıcılar tarafından desteklenmektedir, ancak IE10 ve aşağıda değil. Bu tür tarayıcılar için, bir geçici çözüm var, ancak muhtemelen eski tarayıcılar için yazarsanız jquery kullanmak daha pratiktir.
HTML - HyperText Marking Dili. Sözde etiketlere dayanmaktadır. Etiketler - Bunlar, Web sayfası öğelerinin formatını ve özelliklerini belirten bir miktar unsurlardır. Aynı sayfada, sizin için geçerli HTML etiket dizinini topladık.
Toplamda yüzlerce işaretleme unsuru var. Her birinin bir çok nitelikleri ve kendi sözdizimine sahiptir. HTML Etiket Kılavuzu, ihtiyacınız olan öğeyi hızlıca bulmanıza yardımcı olacaktır.
HTML Etiketler Listesi
Aşağıdaki tablo, Rusça'da kısa bir açıklama ile HTML5 etiketlerinin listesini göstermektedir.
| Etiket | Kısa Açıklama |
|---|---|
| Yorum Yap. | |
| Belge türünü tanımlar. | |
| Bağlantı, köprü, çapa. | |
| Metni kısaltma olarak belirler. | |
| İletişim bilgileri belgenin yazarı veya sahibi. | |
| Harita görüntüsündeki alanı belirler | |
| makale | |
| Bir kenara içerik (içerik, sayfa üzerindeki ana durum değildir) | |
| Tekrarlanabilir bir ses dosyası eklemenizi sağlar. | |
| Kalın yazı. | |
| Belgedeki göreceli referanslar için temel URL veya Hedef özelliğini belirtir. | |
| Metnin yazısının başka yönleri olabilir. | |
| Metin yazma yönünü ayarlar. Aksine Yön, fiziksel yönü gösterir | |
| Alıntı. | |
| Vücut belge alanını belirtir. | |
| Satır sonu. | |
| Tıklanabilir düğme | |
| Komut dosyalarını kullanarak grafik çizmek için kullanılır | |
| İmza tabloları. | |
| Malzemenin adına dipnot. | |
|
Metin formunda bir bilgisayar kodu eklemek için kullanılır. |
| Tablodaki sütunların özelliklerini belirtir. | |
| Biçimlendirme için bir veya daha fazla masa sütunu grubunu belirtir. | |
| Metin alanına girerken seçmek için önceden tanımlanmış seçenekleri belirlemek için kullanılır. | |
Terimin tanımını etiketten belirler
|
|
| İçinde kaldırılan metin yeni sürüm Belge. | |
| Kullanıcının görüntüleyebileceği veya gizleyebileceği ek bilgileri tanımlar. | |
| İçeriğin terim olduğunu gösterir. | |
| İletişim kutusunu veya etkileşimli öğeyi belirler | |
| Blok elemanı, düzenin ana elemanlarından biridir. | |
| Tanımların bir listesini tanımlar. | |
Tanımlar listesindeki terimin adı
|
|
| anlam olarak adanmış metin (genellikle, italik olarak seçilen metin). | |
| Harici uygulama konteyneri | |
| Formda ilgili element grubu | |
| İçin başlık |
|
| Birkaç elementin özerk grubunu belirler (örneğin, imzayla resim) | |
| altbilgi | |
| Kullanıcı girişinin şeklini tanımlar | |
- |
HTML başlıkları farklı seviyelerde: , , , |
| Kafa belgesinin alanını gösterir. | |
| Blok başlığı | |
| Yatay çizgi - Tematik ayırıcı. | |
| Kök elemanı. Tarayıcıyı bu belgenin bir HTML belgesi olduğunu bildirir. | |
| Italik'te metni seçer. | |