Standard HTML5 został sfinalizowany i wydany w 2014 roku. Tak powinien wyglądać HTML, gdy wiele lat temu uruchomiono pierwszą wersję. HTML 2.0 był pierwszym prawdziwym „standardem”, opublikowanym aż w 1995 roku. Dwa lata później opublikowano HTML 3. Kolejne dwa lata później wprowadzono HTML 4.01 i od tego czasu jest on koniem roboczym Internetu.
Pierwszy „działający szkic” HTML5 został wprowadzony już w 2008 roku, z zaskakująco szeroką obsługą przeglądarek. HTML5, który znamy dzisiaj, różni się znacznie od HTML z przeszłości, a tutaj omówimy dokładnie to, co zmienił najnowszy standard wraz z jego wydaniem. Od czasu uruchomienia HTML5 został powszechnie zaakceptowany, a wszystkie jego funkcje i możliwości są obsługiwane przez wszystkie główne przeglądarki. Tu i ówdzie jest jeszcze kilka czkawek, ale ogólnie HTML5 dobrze przyswoił sobie współczesne wrażenia online.
Jako programista internetowy możesz być albo starym profesjonalistą, który opanował starsze standardy, albo nowicjuszem z ciekawością obserwującym rozwój nowych standardów z boku. Tak czy inaczej, musisz ostatecznie przejść na HTML5.
HTML Vs HTML5 Infographic
Pierwszym krokiem do przejścia na HTML5 lub naukę jest zrozumienie różnicy między starszym standardem a najnowszym. Oto kilka kluczowych różnic między HTML a HTML5:
-
HTML5 to żywy język
HTML5 to żywy język, praca w toku. To niesamowite, co potrafi HTML5, ale ważne jest również, aby wiedzieć, że HTML5 nie jest w pełni znormalizowaną wersją, taką jak HTML4, która ma ponad dziesięć lat i jest standardowym, niezmiennym.
Jeśli wchodzisz w HTML5, będziesz musiał dokonać aktualizacji. Atrybuty i elementy są dodawane i regularnie modyfikowane co roku. Zależy to również od tego, ile używasz bogatych elementów, ale jest to z pewnością jedno z zagrożeń związanych z używaniem płynnego, zmieniającego się języka, takiego jak HTML5.
-
HTML5 jest prostszy
Chociaż HTML5 wiąże się z takimi zagrożeniami jak ciągłe aktualizacje, generalnie łatwo jest nadążyć za zmianami i aktualizacjami ze względu na prostszą składnię w porównaniu do HTML4. Na przykład na początku strony masz bardzo prostą deklarację, aby ustawić ją jako stronę HTML5:
Prosta deklaracja Doctype jest jednym z uproszczeń wprowadzonych w składni HTML, która jest kompatybilna ze wszystkimi wersjami HTML4 i aż do XHTML1. Jednak HTML5 nie jest kompatybilny z SGML.
Polecane kursy
- Bezpłatne szkolenie z programowania w języku Python
- Kurs certyfikacji testowania wolnego oprogramowania
- Bezpłatne kursy programowania Java
- Ukończ kurs PERL
-
Nowy element
HTML5 zawiera wiele nowych elementów i eliminuje kilka innych (które omówimy za chwilę), ale jednym z jego kluczowych dodanych elementów jest to, co miało ogromny wpływ na użycie Adobe Flash w witrynach internetowych. Chociaż Flash jest nadal używany przez kilka stron internetowych, wiele osób przyjęło HTML5 i wiele osób uważa, że w końcu sprawi, że Flash stanie się przestarzały. Tylko czas to zadecyduje; do tego czasu element kaskadowy HTML5 okazał się dobrą alternatywą dla Flasha.
Element może służyć do rysowania grafiki o różnych kształtach i kolorach za pomocą skryptów, zwykle JavaScript. Element jest po prostu pojemnikiem na grafikę; musisz użyć skryptu, aby zdefiniować grafikę. Domyślnie płótno jest prostokątnym obszarem bez zawartości i granic. Rynek jest taki:
Ważne jest określenie atrybutu id oraz szerokości i wysokości w celu zdefiniowania rozmiaru płótna. Możesz dodać atrybut stylu, aby zdefiniować granice.
Możesz także użyć JavaScript, jak w poniższym przykładzie:
var c = document.getElementById („myCanvas”);
var ctx = c.getContext („2d”);
ctx.fillStyle = „# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
Nowe i elementy
Kolejnym dużym dodatkiem, który zawiera HTML5, są nowe elementy i elementy wskazujące na nową anatomię sieci. Dzięki tym nowym tagom nie ma już potrzeby identyfikowania dwóch elementów za pomocą tagu.
Specyfikacje definiują element nagłówka jako reprezentujący grupę pomocy „nawigacyjnych” lub „wprowadzających”. Jako taki, element może zostać użyty do zdefiniowania wprowadzenia do sekcji strony lub do całej strony. Oto fragment kodu, który używa elementu nagłówka.
Tytuł
Autor napisał w Web 2.0
Treść tekstu
Specyfikacje HTML5 odnoszą się do elementu foot jako reprezentującego „stopkę dla jego najbliższego przodka, który tworzy sekcję lub element główny sekcji” i ogólnie zawiera informacje dotyczące sekcji, takie jak nazwisko autora, dane o prawach autorskich, linki do dokumentów itd.
Logicznie stopka jest umieszczana na dole strony internetowej. Ale można go również umieścić na końcu sekcji strony. Oto przykładowe kodowanie wykorzystujące element stopki:
Tytuł treści
Autor napisał w Web 2.0
Treść tekstu.
Tagi: wiersz polecenia, kompas, CSS, Sass, terminal
10 osób lubi to
Tutaj stopka zawiera tagi postów, a post „Polubienia na Facebooku”.
-
I elementy
Teraz, jeśli przejdziesz przez powyższe przykłady, zauważysz kilka nowych elementów, takich jak. Ten element wraz z elementem umożliwia oznaczenie określonych sekcji układu i jest niezwykle korzystny dla optymalizacji pod kątem wyszukiwarek. Element article jest określony jako reprezentujący samodzielny składnik strony internetowej, który może być niezależnie używany ponownie lub dystrybuowany. Może to być gazeta, post na forum, artykuł w magazynie, wpis na blogu lub cokolwiek innego.
Element article ma na ogół swój własny nagłówek w elemencie nagłówka, a może nawet stopkę, jak widzieliśmy w powyższym przykładzie. Możesz po prostu myśleć o tym elemencie jako wpisie na blogu lub niezależnej treści; trudna część polega na zidentyfikowaniu tego, co jest niezależne. Krótko mówiąc, niezależna treść to taka, która sama w sobie ma sens.
Dobrym sposobem na sprawdzenie, czy dany fragment treści jest niezależny, jest pytanie, czy ma to sens w kanale RSS. Artykuły na blogach i strony statyczne mają sens, a niektóre witryny mają kanały komentarzy. Ale akapit w artykule nie miałby sensu oddzielony od reszty treści. Oto fragment kodu ze stopką i tagami publikowania.
Tytuł treści
Opublikowano: 2016-02-24
Treść tekstu
Creative Commons Uznanie autorstwa-Na tych samych warunkach
Element sekcji, zgodnie ze specyfikacjami W3C, reprezentujący „ogólną sekcję” aplikacji lub dokumentu. Można go pomylić z tagiem, więc usuńmy teraz zamieszanie. Tag sekcji jest używany, gdy zawarta w nim treść musi być zgrupowana oddzielnie od reszty strony za pomocą jednego motywu i gdy powinna być postrzegana jako pozycja w konspekcie strony. Element div jest jednak określony jako „ogólny kontener”, co oznacza, że nie jest on oddzielony od samej strony głównej, oprócz własnego tytułu, języka i atrybutów klasy.
-
Nowe i elementy
Nowe elementy HTML5 i elementy są częścią specyfikacji elementów interaktywnych, ale należą do najmniej rozmawianych elementów przez programistów. Biorąc pod uwagę fakt, że sieć zmieniła się w bardziej tylko połączone strony i dokumenty, elementy te są pożądanym dodatkiem dla większej interaktywności w sieci.
Elementu nie należy mylić z elementem, który jest zdefiniowany jako znacznik nawigacji HTML reprezentujący blok nawigacji strony. Zwykle zawiera łącza umożliwiające użytkownikom przechodzenie między sekcjami na stronie lub na innej stronie. Z drugiej strony znacznik menu reprezentuje polecenia menu dla uproszczenia w aplikacjach stacjonarnych i mobilnych. Oto przykład elementu w akcji:
Witaj świecie
Tymczasem element jest innym sposobem na uporządkowanie obrazów i tekstu. Jest używany wraz z elementem do oznaczania ilustracji, diagramów i zdjęć. Poniżej znajduje się krótki fragment kodu, który zawiera oba elementy w akcji.
-
Nowe i elementy
Są to dwa główne dodatki do standardu HTML5. Tag audio, podobnie jak tag wideo, umożliwia programistom osadzanie muzyki i dźwięku na ich stronie internetowej. W przeciwieństwie do poprzedniego standardu, nie jesteś ograniczony do dodawania muzyki midi, chociaż nadal istnieją pewne ograniczenia dotyczące rodzaju używanych plików. Większość przeglądarek związanych z Webkit obsługuje zwykłe pliki MP3, ale inne obsługują tylko format OGG. Dobrą wiadomością jest to, że istnieje mnóstwo konwerterów plików i można po prostu dostarczyć dwie wersje pliku audio; odpowiednia wersja zostanie wybrana automatycznie.
Możesz użyć znacznika audio jak każdego innego elementu. Oto przykładowy fragment:
Tag audio ma również szereg atrybutów dla dodatkowych elementów sterujących, w tym atrybuty zdarzeń, a zdarzenia obejmują zdarzenia okna, zdarzenia formularza, zdarzenia multimedialne i zdarzenia myszy. Element wideo ma również wiele atrybutów treści, w tym SRC, atrybuty globalne, pętle, sterowanie, wstępne ładowanie i plakat. Atrybuty SRC, pętli, autoodtwarzania i kontroli są dość oczywiste i takie same dla wszystkich elementów multimedialnych, podczas gdy globalne atrybuty są wspólne dla wszystkich elementów. Obejmują one katalog, ukryty, menu kontekstowe i wiele innych.
Istnieje kilka innych atrybutów i elementów multimedialnych, które są dostarczane z HTML5, takich jak element ścieżki zapewniający ścieżki tekstowe dla elementu wideo.
-
Nowe formy
HTML5 ma teraz formę i elementy. Jeśli nie planujesz używać wielu tabel na stronie, możesz także usunąć atrybut i spojrzeć na zmiany dokonane przed przejściem do przodu.
-
Nigdy więcej elementów
Oznacza to, że wszystkie atrybuty, które pozwalają programistom stworzyć idealnie ułożoną, przyciemnioną tabelę, takie jak obramowanie, bgcolor, wyrównywanie, wysokość, reguły i inne. Wszystkie te atrybuty są zastępowane przez CSS.
-
Nigdy więcej i
Jest to świetne dla programistów, którzy pracowali we wczesnych dniach HTML. Atrybuty zestawu ramek, ramki i noframe zostały całkowicie usunięte, podobnie jak inne elementy, takie jak mruganie, baza i wiele innych. Będziesz musiał zarządzać bez użycia tabel dla układu. Tabele są nadal częścią HTML5, ale nie są już przeznaczone dla pikseli. Specyfikacje mówią, że tabele nie powinny być używane do pomocy układu i do kontrolowania układu strony.
Wniosek
Jak widać, w HTML5 wprowadzono wiele zmian i należy go używać ostrożnie i ostrożnie. Musisz także zaktualizować swoją wiedzę na temat języka, który zmienia się w czasie i otrzymuje więcej aktualizacji. Musisz przestać używać elementów, które HTML5 usunął z siebie i użyć nowych elementów HTML5, które na pewno pozostaną, takich jak tagi nagłówka lub stopki.
To, co widzieliście powyżej, to tylko uproszczona wersja tego, ile zmian wprowadził HTML5 wraz z jego uruchomieniem. Ale bądźmy szczerzy tutaj; nie ma nic prostego lub powolnego w sposobie przyjmowania HTML5, a nowy standard dodaje wiele możliwości, które są kluczowe dla nowoczesnego użytkowania. Musisz nadążyć za nowym językiem, a także nauczyć się CSS, który odgrywa większą rolę niż wcześniej.
Zaletą tych zmian jest to, że chociaż są duże, są na lepsze i jest to zrozumiałe dla wszystkich zaangażowanych tutaj zainteresowanych stron. Przeglądarki będą miały większą moc, gdy zbliżają się do chmury, z możliwością samodzielnego radzenia sobie z większą ilością. Z takimi rzeczami jak Ajax oraz z osadzaniem wideo i audio itd., O wiele łatwiej będzie napisać kod w prosty sposób i pozwolić przeglądarce na podjęcie ciężkich zadań. Na przykład nowe elementy struktury, takie jak rysunek, stopka, podsumowanie i sekcja, odnoszą się do struktury dokumentu, a renderowanie jest pozostawione przeglądarce.
Powiązane artykuły:-
Oto kilka artykułów, które pomogą Ci uzyskać więcej szczegółów na temat HTML vs HTML5, więc po prostu przejdź przez link.
- HTML i XML
- HTML5 vs Flash Top 9 różnic (z infografiką)
- HTML vs XHTML
- HTML5 vs Flash
- Niesamowite różnice między HTML5 a JavaScript
- 10 niesamowitych przydatnych wskazówek dotyczących programowania w języku Python (sztuczki)