Widziałem tę stronę i tę stronę , ale to dużo do strawienia. Jakie są główne rzeczy w HTML5, które sprawiają, że jest on inny / lepszy niż zwykły stary (X) HTML / CSS?
23
HTML5 jest ogromny , ale także niesamowity .
Moim zdaniem chodzi przede wszystkim o interoperacyjność . Specyfikacja idzie i określa parzyste przypadki, aby spróbować upewnić się, że wszystkie przeglądarki czytają znaczniki w ten sam sposób .
Po drugie, HTML5 ma wideo i audio, które robią dokładnie to, co mówi nazwa. Jeśli chcesz dołączyć wideo lub audio, HTML5 powinien zmniejszyć twoje potrzeby związane z wtyczkami.
Po trzecie, HTML5 zawiera wiele ułatwień dostępu i pomocy semantycznej. Na przykład elementy takie jak <section>i <article>pomagają maszynom dowiedzieć się, jaka powinna być zawartość. Nowe typy danych wejściowych <input type=email>mogą być również przydatne z tych samych powodów, chociaż nowe typy danych wejściowych zawierają niestandardowe interfejsy użytkownika, dzięki czemu są przydatne nawet dla „zwykłych” ludzkich czytelników.
Pamiętaj, że nowe funkcje Formularzy to znacznie więcej niż nowe typy danych wejściowych. Obejmuje także obsługę tekstu zastępczego i kilku innych atrybutów.
Zawiera HTML5 <canvas>, który umożliwia rysowanie kształtów 2D (a przy pomocy WebGL, 3D) kształtów takich jak wykresy, a nawet renderowanie gier.
Stare zachowanie jest teraz znormalizowane, na przykład starożytne Internet Explorera contentEditable.
DOCTYPE jest w końcu przyzwoity! Teraz możesz to zapamiętać!<!DOCTYPE html>
Określanie kodowania jest również łatwiejsze dzięki <meta charset=utf-8>.
Jeśli chcesz wysłać dane do klienta i powiązać je z elementami, możesz teraz zrobić to z niestandardowymi atrybutami. Na przykład <div data-status=open>Open</div>jest teraz w końcu dozwolone. Pamiętaj, że nazwy atrybutów niestandardowych muszą być poprzedzone znakiem data-.
Możesz teraz dołączać SVG i MathML do dokumentów HTML. Wcześniej można było to zrobić tylko z dokumentami XHTML.
Spośród wielu nowych funkcji i pól definiowanych przez HTML5, jedną z najbardziej imponujących jest classList, która pozwala łatwiej manipulować atrybutem klasy. Zamiast konieczności getAttribute / setAttribute i używania skomplikowanych hacków, aby dowiedzieć się, które klasy ma element i usunąć określoną klasę z tego elementu, classList sprawia, że trudne sytuacje są bardzo proste.
Istnieje również wiele powiązanych specyfikacji, takich jak Web Workers, Web Sockets i IndexedDB, które tak naprawdę nie są częścią HTML5, ale wszyscy mówią o nich tak, jakby były. Są bardzo przydatne do korzystania z komputerów wielordzeniowych, komunikacji z serwerami i lokalnego przechowywania danych.
Podobnie jak w CSS3, zawiera obsługę animacji , przejść , zaokrąglonych ramek i elastycznego modelu pudełka .
Nowością w CSS3 są również nowe selektory, które ułatwiają dopasowanie określonych elementów na stronie (takich jak tylko nieparzyste lub parzyste wiersze w tabeli).
Krycie, nowe jednostki, markiza i rubin są również częścią CSS3.
Myślę, że właściwie obejmuje wszystkie ważne części.
Aby śledzić obsługę funkcji i specyfikacji, możesz sprawdzić Kiedy mogę korzystać . Zawiera funkcje HTML5 i CSS3 oraz rzeczy takie jak SVG, PNG, CSS2.1 i CSS2. Śledzi także ich status zatwierdzenia (zalecenie, proponowane zalecenie, zalecenie dla kandydatów, projekt roboczy, standard IETF). FindMeByIP utrzymuje matryce obsługiwanych funkcji CSS3 tylko przez przeglądarkę.
Niektóre zmiany i uproszczenie składni miały miejsce w nakrętkach i śrubach:
<!DOCTYPE html>languageatrybut<html>znacznika:<html lang="en">(może nadal zawierać
xmlnsixml:langjeśli chcesz zachować zgodność z XML)<meta>tag dlacharset:<meta charset="utf-8" />scriptnie akceptuje jużtypeatrybutów, wymagacharsetdla zdalnych skryptów:<script src="/media/js/jquery.js" charset="utf-8"></script>(skrypty wbudowane wcale nie wymagają żadnych dodatkowych atrybutów)HTML5 pozwala znacznikom być znacznie bardziej semantycznym i ogólnie znacznie łatwiejszym do odczytu / zapisu oraz mieć mniejsze rozmiary plików. Zamiast tego po
<div id="nav">prostu masz<nav>. Nie wydaje się dużo, ale sumuje się.Wiele elementów z XHTML1 i HTML4 zostało uznanych za przestarzałe. Następujące elementy nie są obsługiwane w HTML5:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,<frameset>,<noframes>,<s>,<strike>,<tt>,<u>i<xmp>.Kilka nowych elementów w HTML5 ma tylko dodawać więcej znaczników semantycznych i nie zrobi nic poza dostarczeniem bardziej sensownej alternatywy dla
<div>. Te nowe elementy obejmują:<article>,<section>,<aside>,<hgroup>,<header>,<footer>,<nav>,<time>,<mark>,<figure>, i<figcaption>.Formularze HTML5 zostały znacznie ulepszone.
Nowe typy danych wejściowych
Nowe atrybuty:
Nowe elementy
<keygen>,<datalist>,<output>,<meter>I<progress>Moglibyśmy wchodzić w formularze przez cały dzień, ale oto niektóre zasoby, aby lepiej wyjaśnić wszystkie te nowe rzeczy.
CSS3 przynosi wspaniałe z Media Queries . Zapytania o media są takie sobie świetne. Niedostępne w IE8 i niższych, ale będzie obsługiwane przez IE9.
CSS3 ma liczniki inkrementacyjne . Możesz ich użyć do automatycznego numerowania elementów bez listy uporządkowanej za pomocą
:beforepseudo-selektora icontentstylu, gdy lista uporządkowana lub numeracja byłaby semantycznie niepoprawna. (Na przykład numerowanie kroków wypełniania pól formularza).Jeśli jesteś fanem resetów CSS, istnieje reset CSS HTML5 dostępny w HTML5 Doctor. Dodałem trzy dodatki do tego resetu dla moich osobistych stron:
text-rendering: optimizeLegibility;dodano do stylów w definicji dla<body>labelzawarte w definicji zinputiselectponieważ potrzebujevertical-align: middle;insi:focusod Erica Meyera CSS Reset dodano ponownieKonkurencyjny reset o nazwie reset5 jest dostępny, ale nie oceniłem go jeszcze osobiście. Opiera się na obu Erica Meyera i HTML5 Doctor.
HTML5 Bezpieczeństwo Cheatsheet śledzi błędy w HTML5 funkcji, jak realizowane w różnych przeglądarkach, a także błędy w istniejących funkcji, które są dobre, aby śledzić, jak również.
Jednak użycie elementów HTML5 nie powoduje automatycznie semantycznego kodu. WHATWG napisało artykuł o nazwie <section> nie jest tylko „semantycznym <div>” wyjaśniającym, że nie jest to po prostu element kontenerowy.
Podobnie jak wszystko inne na tym świecie, istnieje platforma dla aplikacji internetowych HTML5 o nazwie SproutCore , zbudowana przez byłego inżyniera Apple'a, Charlesa Jolleya.
Oprócz html5rocks.com możesz być na bieżąco z html5doctor.com i html5gallery.com .
źródło
Istnieją podstawowe elementy układu, takie jak promień obramowania, cienie (ramka / tekst), obsługa rgba i tak dalej; Z tego najbardziej znany jest CSS3. Bardziej interesujące są tag canvas, tag wideo, pamięć lokalna, websockets i tak dalej, które stworzą znacznie bogatsze doświadczenia użytkownika w zwykłym HTML / JS / CSS. Funkcje te mogą być świetną alternatywą dla Flasha w Internecie, bez potrzeby instalowania dodatkowych wtyczek.
źródło
Uważam, że nowe elementy HTML są dość interesujące ... niektóre z nich obiecują semantyczne zamienniki dla ogólnych
div. Obiecujące nowe elementy toarticle,section,aside,figure,nav,header, ifooter, między innymi. Naprawdę podoba mi się pomysł, że elementy semantyczne zastępują pozbawione znaczenia pojemniki.O tak, pokrewny przedmiot: znacznie uproszczony
doctype- wreszcie coś, co mogę wpisać z pamięci!źródło
( To jest moja odpowiedź na podobne pytanie na webapps.stackexchange.com )
The Canvas i Web Worker Threads są najbardziej ekscytujących aspektów HTML5 do mnie. Napisałem kilka aplikacji internetowych, które korzystają z tych funkcji:
GioAUTHor [sic] szeroko wykorzystuje obszar roboczy, umożliwiając wykreślanie ścieżek na mapie, a następnie znajdowanie najkrótszej trasy od początku do końca (za pomocą algorytmu Dijkstry w JavaScript).
Demo wątku JavaScript w ograniczonym stopniu korzysta z obszaru roboczego, ale pokazuje użycie wątków roboczych wraz z kodem demonstracyjnym. Korzysta również z suwaka typu wejściowego HTML5 = „zakres” .
Obsługa przeglądarki HTML5 jest tak różnorodna, jak same przeglądarki. Jest dobra strona (w HTML5, natch) o gotowości HTML5, która pokazuje, kto jest gotowy na co.
źródło
W odniesieniu do CSS3 - zajrzyj na http://css3please.com/, aby zobaczyć, co możesz zrobić.
Im późniejsza przeglądarka, tym większe prawdopodobieństwo, że zobaczysz efekty.
źródło
Tagi audio i wideo pozwalają na prezentację multimediów bez potrzeby korzystania z wtyczek takich jak Flash czy Silverlight, a co najważniejsze działa w przeglądarkach iPhone i iPad. Należy rozwiązać pewne problemy dotyczące kodeków i zarządzania prawami cyfrowymi.
źródło
Jeremy Kieth właśnie wydał naprawdę dobrą książkę na temat „HTML5 dla projektantów stron internetowych”. możesz to sprawdzić.
Jest to pierwsza książka z A Book Apart. Polecam go średnio zaawansowanym i zaawansowanym projektantom. A ++
http://books.alistapart.com/
UWAGA : może być konieczne poczekanie na wydrukowanie
źródło
Nie oferuje to opinii na temat ważności, ale jest użyteczną różnicą między HTML 4 a 5.
Moje 2 ¢ w sprawie głównych ulepszeń:
<section>i nowy algorytm tworzenia nagłówków (powiedziałem, że to tylko moje 2 ¢)<input type=email>data-*atrybuty<audio>i<video>źródło
Ponieważ nikt tego jeszcze nie dodał:
HTML5 jest świetny do tego, co wszyscy wymienili na liście, ale obejmuje również standardową geolokalizację, pracowników sieciowych, gniazdo sieciowe, płótno i localStorage. Wszystkie te narzędzia są częścią specyfikacji HTML5, która wykorzystuje wiele skryptów JavaScript, aby to umożliwić.
źródło