Yanıtlar:
HTML5 çok büyük , ama aynı zamanda harika .
Benim görüşüme göre, çoğunlukla birlikte çalışabilirlik ile ilgilidir . Bu özellik gider ve tüm tarayıcıların işaretlemeyi aynı şekilde okuduğundan emin olmak için en uç durumları bile belirtir .
İkincisi, HTML5, adının söylediğini aynen yapan video ve sese sahiptir. Video veya ses eklemek istiyorsanız, HTML5 eklenti ihtiyaçlarınızı azaltmalıdır.
Üçüncü olarak, HTML5 erişilebilirliği ve anlamsal yardımı içerir. Örneğin, elemanlar gibi <section>ve <article>yardımcı makineler hangi içeriğin olması gerektiğini çözüyorlar. Yeni girdi tipleri <input type=email>aynı nedenlerle de faydalı olabilir, ancak yeni girdi tipleri "ortak" insan okuyucular için bile faydalı olmasını sağlayan özel kullanıcı arayüzleri içerir.
Yeni Formlar özelliklerinin yeni giriş türlerinden çok daha fazla olduğunu unutmayın. Ayrıca, yer tutucu metni ve diğer birkaç özellik için destek içerir.
HTML5, <canvas>grafikler gibi 2D (ve WebGL ile 3D) şekiller çizmenize izin verir, hatta oyunlar oluşturur.
Internet Explorer’ın antikliği gibi eski davranışlar artık standartlaştırılmıştır contentEditable.
DOCTYPE nihayet terbiyeli! Şimdi aslında ezberleyebilirsiniz!<!DOCTYPE html>
İle kodlama belirtmek de daha kolaydır <meta charset=utf-8>.
İstemciye veri göndermek ve onu öğelerle ilişkilendirmek istiyorsanız, şimdi bunu özel niteliklerle yapabilirsiniz. Mesela <div data-status=open>Open</div>şimdi nihayet izin veriliyor. Özel öznitelik adlarına önek eklenmesi gerektiğini unutmayın data-.
Artık HTML belgelerine SVG ve MathML'yi dahil edebilirsiniz. Önceden, yalnızca XHTML belgeleriyle yapabilirdiniz.
HTML5'in tanımladığı birçok yeni işlev ve alan arasında en etkileyici olanlardan biri, sınıf niteliğini daha kolay bir şekilde değiştirmenize olanak sağlayan classList'tir. GetAttribute / setAttribute işlevini almak ve bir öğenin hangi sınıfları içerdiğini belirlemek ve bu öğeden belirli bir sınıfı kaldırmak için karmaşık kesitler kullanmak yerine classList bu zor durumları çok basit hale getirir.
Ayrıca, HTML5’in bir parçası olmayan Web İşçileri, Web Soketleri ve IndexedDB gibi birbiriyle ilişkili birden fazla özellik de var; ancak herkes sanki onlar hakkında konuşuyor. Çok çekirdekli bilgisayarlardan yararlanmak, sunucularla iletişim kurmak ve yerel olarak veri depolamak için çok kullanışlıdır.
CSS3'te ise animasyonlar , geçişler , yuvarlak kenarlar ve esnek kutu modeli için destek var .
Ayrıca CSS3'te yeni olan, sayfadaki belirli öğeleri eşleştirmeyi kolaylaştıran yeni seçicilerdir (örneğin, tablodaki tek veya çift satırlar gibi).
Opaklık, yeni birimler, kayan yazı ve yakut da CSS3'ün bir parçasıdır.
Bence hemen hemen tüm önemli kısımları kapsıyor.
Özellikleri ve teknik özellikleri takip etmek için Ne zaman kullanabileceğimi kontrol edebilirsiniz . HTML5 ve CSS3 özelliklerini ve SVG, PNG, CSS2.1 ve CSS2 gibi şeyleri içerir. Ayrıca onay statüsünü de takip eder (Tavsiye, Önerilen Tavsiye, Aday Tavsiye, Çalışma Taslağı, IETF standardı). FindMeByIP , tarayıcı tarafından yalnızca desteklenen CSS3 özelliklerinin matrisini korur.
Somun ve civatalarda bazı tercümanlık ve sözdizimi basitleştirmesi gerçekleştirildi:
<!DOCTYPE html>languageözellik<html>Etiket : <html lang="en">xmlnsve xml:langXML uyumluluğu istiyorsanız)<meta> etiket charset:<meta charset="utf-8" />script artık kabul etmiyor type öznitelik , charsetuzak komut <script src="/media/js/jquery.js" charset="utf-8"></script>dosyaları için gerekli : (satır içi komut dosyaları için hiçbir ek öznitelik gerektirmiyor)HTML5, işaretlemenizin çok daha fazlasını yapmasını sağlar semantik ve okuma / yazma ve daha küçük dosya boyutlarına sahip kolay olma özelliğini sağlar. Sahip olmak yerine, <div id="nav">sadece sahipsin <nav>. Çok görünmüyor ama ekler.
XHTML1 ve HTML4'ten birçok öğe kullanımdan kaldırılmıştır. Aşağıdaki öğeler HTML5'teki desteklenmez: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>,<s> , <strike>, <tt>, <u>ve <xmp>.
HTML5'teki birkaç yeni öğenin yalnızca daha fazla anlamsal işaretleme eklemesi amaçlanmıştır ve buna daha anlamlı bir alternatif sağlamak dışında hiçbir şey yapmaz <div>. Bu yeni unsurlar şunlardır: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>,<time> , <mark>, <figure>, ve <figcaption>.
HTML5 formları büyük ölçüde geliştirilmiştir.
Yeni Giriş Tipleri
Yeni Nitelikler:
Yeni elemanlar
Bütün gün formlara girebiliriz, ama işte bütün bu yeni şeyleri daha iyi açıklamak için bazı kaynaklar.
CSS3, Media Queries’in harikalarını getiriyor . Medya Sorguları çok çok harika. IE8 ve daha aşağıda mevcut değildir, ancak IE9 tarafından desteklenir.
CSS3 artan sayaçlara sahiptir . Bunları, tuşlarını kullanarak sipariş listesi olmadan öğeleri otomatik olarak numaralandırmak için kullanabilirsiniz.:before sözde seçiciyi ve contentbir sipariş listesi veya numaralandırmanın anlamsal olarak yanlış olacağı stili numaralandırmak için kullanabilirsiniz. (Örneğin, form doldurma adımlarının numaralandırılması.)
Eğer bir CSS Sıfırlama hayranıysanız, HTML5 Doctor'dan gelen bir HTML5 CSS Sıfırlaması var. Kişisel sayfalarım için bu sıfırlamaya üç tane ekledim:
text-rendering: optimizeLegibility; tanımındaki stillere eklendi. <body>labeltanımına dahil edilmiş inputveselect ihtiyacı berivertical-align: middle;insve :focusgelen Eric Meyer'in CSS Sıfırlama geri eklendiReset5 adlı bir rakip sıfırlama var, ancak henüz kişisel olarak değerlendirmedim. Her ikisine de dayanmaktadır Eric Meyer de HTML5 Doctor resetlerine .
HTML5 Güvenlik Pardus HTML5 çeşitli tarayıcılarda uygulandığı şekliyle özellikleri ve aynı zamanda takip etmek için iyi varolan özellikleri hatalar içerir, böcek izler.
Bununla birlikte, HTML5 öğelerini kullanmak kodunuzu otomatik olarak anlamlandırmaz. WHATWG adlı bir makale yazdı. <section> , sadece bir konteyner elemanı olmadığını açıklayan sadece "anlamsal <div>" değil.
HTML 5'te, belgelerin anahat görünümünü oluşturmak için bir algoritma vardır. Bu, örneğin AT tarafından bir kullanıcının bir belgede gezinmesine yardımcı olmak için kullanılabilir. Ve <bölüm> ve arkadaşlar bu algoritmanın önemli bir parçasıdır. Bir <bölüm> her yuvaya yerleştirdiğinizde, anahat derinliğini 1 oranında artırırsınız (bu modelin avantajlarının geleneksel <h1> - <h6> modeliyle karşılaştırılmasının ne olduğunu merak ediyorsanız, bunu yapmak isteyen bir web tabanlı besleyiciyi düşünün Sendikasyon içeriğinin belge yapısını çevreleyen siteninkiyle bütünleştirin. HTML 4’te bu, tüm içeriği ayrıştırmak ve tüm başlıkları yeniden numaralandırmak anlamına gelir.
...
Sayfalarınızdaki tüm <div> ’leri kör bir şekilde <bölümler> 'e dönüştürürseniz, sayfanızın beklediğiniz taslaklara sahip olması pek olası değildir. Ve anlamsal bir taklit olmanın yanı sıra, bu navigasyon başlıklarına güvenen insanların kafasını karıştırır.
Bu dünyadaki her şey gibi, Charles Jolley adlı eski bir Apple mühendisi tarafından inşa edilen SproutCore adlı HTML5 web uygulamaları için bir çerçeve var .
Html5rocks.com adresine ek olarak html5doctor.com ve html5gallery.com adresinden de haberdar olabilirsiniz .
Kenarlık yarıçapı, gölgeler (kutu / metin), rgba desteği vb. Gibi temel düzen şeyleri vardır; Bu, CSS3'ün en çok bilindiği şeydir. Daha ilgi çekici olan tuval etiketi, video etiketi, yerel depolama, websockets ve benzeri düz HTML / JS / CSS'de daha zengin kullanıcı deneyimleri yaratacaktır. Bu özellikler, ek eklentilere gerek olmadan web üzerinde Flash için mükemmel bir alternatif olma potansiyeline sahiptir.
Yeni HTML öğelerini oldukça ilginç buluyorum ... bazıları jenerikler için anlamsal değişimler vaat ediyor div. Umut verici yeni unsurlar şunlardır article, section, aside, figure, nav, header, vefooter diğerleri. Anlamsız kapların yerini alan anlamsal öğeler fikrini gerçekten seviyorum.
Ah evet, ilgili bir öğe: çok basitleştirilmiş doctype - nihayet bellekten yazabileceğim bir şey!
( Bu cevabım webapps.stackexchange.com üzerinde üzerinde benzer bir soruya )
Tuval ve Ağ Yapıcı Konular bana HTML5'in en heyecan verici yönleri vardır. Bu özelliklerden yararlanan bazı web uygulamaları yazdım:
GioAUTHor [sic], bir haritada yolları çizmenize ve daha sonra baştan sonuna kadar en kısa rotayı bulmanıza (Dijkstra'nın JavaScript algoritması aracılığıyla) bulmanıza izin vermek için tuvalden geniş bir şekilde faydalanır.
JavaScript Thread Demo , tuvali sınırlı kullanır ancak demo koduyla birlikte Çalışan Konularının kullanımını gösterir. Ayrıca HTML5 input type = "range" değerinden yararlanır. slider kontrolünü kullanır.
HTML5 Tarayıcı desteği, tarayıcıların kendileri kadar çeşitlidir. Bir var güzel bir site hakkında (HTML5'teki natch) HTML5 hazır ne için hazır gösterileri söyledi.
CSS3 ile ilgili olarak - http://css3please.com/ adresini ziyaret edin. ne yapabileceğinizi görmek .
Tarayıcınız ne kadar sonra, efektleri o kadar çok görebileceksiniz.
Ses ve video etiketleri Flash veya Silverlight gibi bir eklentiye ihtiyaç duymadan medya sunmaya izin verir ve en önemlisi iPhone ve iPad tarayıcılarında çalışır. Codec ve dijital haklar yönetimi konusunda dikkat edilmesi gereken bazı konular var.
Jeremy Kieth, "Web Tasarımcıları için HTML5" konulu çok güzel bir kitap yayımladı. Bunu kontrol etmek isteyebilirsiniz.
A Book Apart'ın ilk kitabı. İleri düzeydeki tasarımcılara orta düzeyde kullanılması tavsiye edilir. A ++
NOT : basılı kopya almak için beklemeniz gerekebilir
Bu önemi hakkında bir fikir sunmuyor, ancak HTML 4 ve 5 arasındaki kullanışlı bir delta.
Ana gelişmeler üzerine 2 ¢:
<section>ve yeni başlık anahat algoritması (sadece benim 2 ¢ olduğunu söyledim )<input type=email>data-* Öznitellikler<audio>ve<video>Çünkü henüz kimse bunu söylemedi:
HTML5, herkesin listelediği şeyler için mükemmeldir, ancak standart coğrafi konumu, web çalışanlarını, web soketini, tuvali ve localStorage'ı da içerir. Tüm bu araçlar, HTML5 özelliklerinin bir kısmıdır, sahnede sahne almak için çok fazla JavaScript kullanırlar.