HTML5

HTML5 ; ( hipertekstowy język znaczników )
deweloper
	W3C HTMLWG, WHATWG
	https://www.w3.org/TR/html5/
Informacje ogólne
rozszerzenie pliku	HTML: .html, .htm; XHTML: .xhtml, .xht, .xml
typu mim	HTML: text/html; XHTML: application/xhtml+xml, application/xml
Pierwsze wydanie	28 października 2014
typ formatu	język znaczników
rozszerzony z	SGML
Normy	http://www.w3.org/TR/html5/
otwarty format	?

HTML 5 ( HyperText Markup Language , wersja 5) jest piątą większą wersją podstawowego języka sieci WWW , HTML . HTML5 określa dwa warianty składni HTML: „klasyczny” HTML ( text/html), znany jako HTML5 , oraz wariant XHTML znany jako składnia XHTML 5 , który powinien być obsługiwany ze składnią XML ( application/xhtml+xml). ^{[ 1 ]}^[ ²^] Po raz pierwszy HTML i XHTML zostały opracowane równolegle. Ostateczna wersja piątej rewizji normy została opublikowana w październiku 2014 r. ^{[ 3} ]

Ponieważ nie jest rozpoznawany w starszych wersjach przeglądarek ze względu na nowe tagi, zaleca się zwykłemu użytkownikowi zaktualizowanie przeglądarki do najnowszej wersji, aby w pełni wykorzystać potencjał, jaki zapewnia HTML 5.

Rozwój tego języka znaczników jest regulowany przez Konsorcjum W3C .

Nowe przedmioty

HTML5 ustanawia szereg nowych elementów i atrybutów, które odzwierciedlają typowe zastosowanie nowoczesnych stron internetowych. Niektóre z nich są technicznie podobne do tagów <div>i <span>, ale mają znaczenie semantyczne, takie jak <nav>(blok nawigacji strony internetowej) i <footer>.

Różnice między HTML5 a HTML4/XHTML

Etykieta	atrybuty tagów	Uwagi
<!-- -->	standardowe lub żadne	Uwagi
<!DOCTYPE>	HTML	styl
<a>	href \| cel \| przekaźnik \| hreflang \| średnia \| rodzaj	Dodany atrybut: media Zmieniony atrybut: cel
<skrót>	tytuł
~~<akronim>~~		Usunięto tag
<adres>	standardowe lub żadne
~~<aplety>~~		Usunięto tag
<obszar>	standardowe lub żadne
<artykuł>	atrybuty globalne	nowy tag
<na bok>	atrybuty globalne	nowy tag
<dźwięk>	autobufor \| autoodtwarzanie \| kontrole \| pętla \| src	nowy tag
<b>	atrybuty globalne	zmieniona etykieta
<baza>	standardowe lub żadne
~~<basefont>~~		Usunięto tag
<bdo>	standardowe lub żadne
~~<duży>~~		Usunięto tag
<cytat blokowy>	standardowe lub żadne
<ciało>	standardowe lub żadne
<br>	standardowe lub żadne
<przycisk>	standardowe lub żadne
<płótno>	wysokość \| szerokość	nowy tag
<podpis>	standardowe lub żadne
~~<środek>~~		Usunięto tag
<cytuj>	atrybuty globalne	zmieniona etykieta
<kod>	standardowe lub żadne
<kol>	standardowe lub żadne
<grupa kol>	standardowe lub żadne
<lista danych>	atrybuty globalne	nowy tag
<dd>	standardowe lub żadne
<del>	standardowe lub żadne
<szczegóły>	otwarty	nowy tag
<dialog>	atrybuty globalne	nowy tag
~~<katalog>~~		Usunięto tag
<div>	standardowe lub żadne	Podział
<dfn>	standardowe lub żadne
<dl>	standardowe lub żadne
<dt>	standardowe lub żadne
<em>	standardowe lub żadne
<embed>	wysokość \| źródło \| wpisz \| szerokość	nowy tag
<zestaw pól>	standardowe lub żadne
<figura>	atrybuty globalne	nowy tag
~~<font>~~		Usunięto tag
<stopka>	atrybuty globalne	nowy tag
<formularz>	standardowe lub żadne
~~<ramka>~~		Usunięto tag
~~<zestaw ramek>~~		Usunięto tag
<h1>... <h6>	standardowe lub żadne
<głowa>	standardowe lub żadne
<nagłówek>	atrybuty globalne	nowy tag
~~<hgroup>~~		hgroup został dodany do specyfikacji HTML5, ale jest teraz przestarzały. ^{[ 4 ]} Użyj <header>
<godz>	Nic	zmieniona etykieta
<html>	standardowe lub żadne
<i>	Nic	zmieniona etykieta
<iframe>	standardowe lub żadne
<img>	standardowe lub żadne
<wejście>	zaakceptuj \| alt \| autouzupełnianie \| autofokus \| sprawdzone \| niepełnosprawny \| formularz \| formacja \| typform \| forma \| zmodernizowany \| formularz docelowy \| wysokość \| lista \| maks. \| maksymalna długość \| minuta \| wiele \| nazwa \| wzory \| symbol zastępczy \| tylko do odczytu \| wymagane \| rozmiar \| źródło \| kroki \| wpisz \| wartość \| szerokość	Zmieniona etykieta: Dodano 13 elementów do typu
<ins>	standardowe lub żadne
~~<isindeks>~~		Usunięto tag
<kbd>	standardowe lub żadne
<etykieta>	standardowe lub żadne
<legenda>	standardowe lub żadne
<li>	standardowe lub żadne
<link>	standardowe lub żadne
<oznaczenie>	atrybuty globalne	nowy tag
<mapa>	standardowe lub żadne
<menu>	standardowe lub żadne
<cel>	standardowe lub żadne
<metr>	wysoki \| niski \| maks. \| minuta \| najlepsze \| wartość	nowy tag
<nawigacja>	atrybuty globalne	nowy tag
~~<noframes>~~		Usunięto tag
<noscript>	standardowe lub żadne
<obiekt>	standardowe lub żadne
<ol>	standardowe lub żadne
<grupa opcji>	standardowe lub żadne
<opcja>	standardowe lub żadne
<wyjście>	Formularz	nowy tag
<p>	standardowe lub żadne
<param>	standardowe lub żadne
<pre>	standardowe lub żadne
<postęp>	maks. \| wartość	nowy tag
<q>
<rubin>	cytat	nowy tag
<rp>	atrybuty globalne	nowy tag
<rt>	atrybuty globalne	nowy tag
~~<s>~~		Usunięto tag
<samp>	standardowe lub żadne
<skrypt>	standardowe lub żadne
<sekcja>	cytat	nowy tag
<wybierz>	standardowe lub żadne
<mały>	atrybuty globalne	Zmieniono etykietę
<źródło>	średnia \| źródło \| rodzaj	nowy tag
<span>	standardowe lub żadne
~~<uderzenie>~~		Usunięto tag
<strong>	standardowe lub żadne
<styl>	standardowe lub żadne
<sub>	standardowe lub żadne
<w górę>	standardowe lub żadne
<tabela>	standardowe lub żadne
<tbody>	standardowe lub żadne
<td>	standardowe lub żadne
<obszar tekstowy>	standardowe lub żadne
<stopa>	standardowe lub żadne
<ty>	standardowe lub żadne
<głowa>	standardowe lub żadne
<czas>	data i godzina \| opublikować	nowy tag
<tytuł>	standardowe lub żadne
<tr>	standardowe lub żadne
~~<tt>~~		Usunięto tag
<i>	Definiuje tekst, który powinien mieć inny styl niż zwykły tekst ^{[ 5} ]
<ul>	standardowe lub żadne
<zmienna>	standardowe lub żadne
<wideo>	źródło \| plakat \| autobufor \| autoodtwarzanie \| pętla \| kontrole \| szerokość \| wzrost	nowy tag
~~<xmp>~~		Usunięto tag

Uwagi: Na żółto te tagi wprowadzone w nowej wersji (na czerwono te, które zostały usunięte ze specyfikacji HTML5), na niebiesko tagi, które zostały zmienione w całości lub częściowo, a na szaro tagi usunięte z tej wersji. Chociaż w praktyce przeglądarki nie biorą tego pod uwagę, aby uniknąć utraty udziału w rynku.

Co nowego

Zawiera etykiety (płótno 2D i 3D, audio, wideo) z kodekami do wyświetlania treści multimedialnych. Obecnie toczy się walka pomiędzy narzucaniem darmowych kodeków ( WebM + VP8 ) lub prywatnych ( H.264/MPEG-4 AVC ).
Etykiety do obsługi dużych zbiorów danych: Datagrid, Details, Menu i Command. Pozwalają na generowanie dynamicznych tabel, które mogą filtrować, porządkować i ukrywać treści na kliencie.
Ulepszenia w formularzach. Nowe typy danych (e-mail, numer, adres URL, data i godzina...) i udogodnienia do walidacji treści bez Javascript.
Przeglądarki: MathML (wzory matematyczne) i SVG (grafika wektorowa). Ogólnie rzecz biorąc, pozostaje otwarta, aby móc interpretować inne języki XML.
Przeciągnij i upuść. Nowa funkcja do przeciągania obiektów, takich jak obrazy.

Sieć semantyczna

Dodaj tagi do obsługi sieci semantycznej (Web 3.0): nagłówek, stopka, artykuł, nav, godzina (data treści), link rel='' (powiązany typ treści).
Te tagi pozwalają opisać znaczenie treści. Na przykład jego znaczenie, cel i istniejące relacje. Nie mają specjalnego wpływu na wizualizację, są zorientowane na wyszukiwarki.
Wyszukiwarki będą mogły indeksować i interpretować te metainformacje, dzięki czemu nie będą po prostu szukać wystąpień słów w tekście strony.
Pozwala na włączenie plików RDF / OWL (z metainformacjami) do stron w celu opisania relacji między używanymi terminami.
Ponadto oferuje wszechstronność w obsłudze i animacji prostych obiektów, obrazów itp.

Nowe API i Javascript

API do przeciągania i upuszczania . Poprzez wydarzenia.
API do pracy Off-Line. Pozwala pobrać wszystkie niezbędne treści i pracować lokalnie.
Geolokalizacja API dla urządzeń, które to obsługują.
API pamięci masowej. Łatwość lokalnej trwałej pamięci masowej, z bazami danych (oparte na SQLite ) lub z obiektową pamięcią masową przez aplikację lub domenę internetową (Local Storage i Global Storage). Dostępna jest Baza Danych z możliwością wykonywania zapytań SQL.
Gniazda sieciowe. Dwukierunkowy interfejs API komunikacji między stronami. Podobne do gniazd C.
Pracownicy sieci. Wątki wykonania równolegle.
Przyszły standard. Informacje o systemie API. Dostęp do sprzętu niskiego poziomu: sieć, pliki, procesor, pamięć, porty USB, kamery, mikrofony... Bardzo ciekawe, ale z licznymi zastrzeżeniami bezpieczeństwa.

Przykłady kodu HTML5

Kod HTML5 do odtwarzania dźwięku bez wtyczek

W przypadku wideo jest to coś podobnego.

<!DOCTYPE HTML> 
< html  LANG = "en" > 
  < head > 
    < meta  charset = "UTF-8" > 
    < title > źródło wieloelementowe </ title > 
  </ head > 
  < body > 
    < audio  id = "audioTestElem "  formanty autobuffera  > < source src = "test.m4a" > < source src = "test.ogg" type = "audio/ogg; codecs=vorbis" > < source src = "url" > 
       
        
       
      brak dźwięku dla ciebie
    </ audio > 
  </ body > 
</ html >

Przykład WebWorker (wątek równoległy)
Wymagany jest JavaScript.

Dla pliku Test.html

<!DOCTYPE HTML> 
< html > 
 < head > 
  < title > Przykład procesu roboczego: obliczenia jednordzeniowe </ title > 
 </ head > 
 < body > 
  < p > Najwyższa odkryta do tej pory liczba pierwsza to: < output  id = "result " ></ output ></ p > 
  < script > 
   var  worker  =  new  Worker ( 'worker.js' ); 
   pracownik . onmessage  =  funkcja  ( zdarzenie )  { 
     dokument . getElementById ( 'wynik' ). textContent  =  zdarzenie . data ; 
   }; 
  </ skrypt > 
 </ body > 
</ html >

Dla pliku worker.js (plik z zadaniem nowego wątku nieskończonego wykonywania)

zmn = 1;
szukaj: podczas (prawda) {
  n += 1;
  for (var i = 2; i < = Math.sqrt(n); i += 1)
    jeśli (n % i == 0)
     kontynuuj wyszukiwanie;
  // znaleziono liczbę pierwszą!
  postMessage(n);
}

Przykład płótna 2D przy użyciu interfejsu API do rysowania

<!DOCTYPE HTML> 
< html > 
  < head > 
    < title > Przykład HTML5 Canvas </ title > 
    < script > 
      function  drawPicture (){

        // Najpierw pobierany jest obiekt canvas do zmodyfikowania 
        var  canvas  =  document . getElementById ( 'przykład' );

        // Następnie powie Ci, jak pracować 2D lub 3D 
        var  context  =  canvas . getContext ( '2d' );

        // Rozpocznij rysowanie na płótnie za pomocą 
        // obiektów graficznych

        kontekst . fillStyle  =  "rgb(0,255,0)" ; 
        kontekst . fillRect  ( 25 ,  25 ,  100 ,  100 );

        kontekst . fillStyle  =  "rgba(255,0,0, 0,6)" ; 
        kontekst . początkowa ścieżka (); 
        kontekst . arc ( 125 , 100 , 50 , 0 , Math . PI * 2 , true ); 
        kontekst . wypełnić ();

        kontekst . fillStyle  =  "rgba(0,0,255,0.6)" ; 
        kontekst . początkowa ścieżka (); 
        kontekst . moveTo ( 125 , 100 ); 
        kontekst . liniaTo ( 175 , 50 ); 
        kontekst . liniaTo ( 225 , 150 ); 
        kontekst . wypełnić ();

      } 
    </ script > 
    < style  type = "text/css" > 
      canvas  {  border :  2 px  solid  black ;  } 
    </ style > 
  </ head > 
  < body  onload = "drawPicture();" >

    < identyfikator kanwy  = „przykład” szerokość = „260” wysokość = „200” >  
    Podobno ma tu być przykładowy rysunek, ale to nieistotne.
    </ płótno >

  </ body > 
</ html >

Przykład formularza z nowymi typami danych

Wyeliminuj wiele walidacji w JavaScript. (Klucz znajduje się w atrybucie Type).

<!DOCTYPE HTML> 
< html > 
  < body > 
  < formularz >

    < input  name = "form_number"  id = "form_number"  type = "number"  min = "1"  max = "10"  > 
    < input  name = "form_date"  id = "form_date"  type = "data" > 
    < input  name = "form_month"  id = "form_month"  type = "month" > 
    < input  name = "form_week"  id = "form_week"  type = "week" > 
    < input  name = "form_time"  id = "form_time"  type = "time" > 
    < input  name = "form_url"  id = "form_url"  type = "url"  list = "url_list" > 
    < datalist  id = "url_list" > 
        < wartość opcji  = "http://www.google.com" label = "Google „ > < wartość opcji = „http://net.tutsplus.com” label = „NetTuts+” > </ datalist > < input name = „form_email” id = „form_email” type = „email” list = „email_list” multiple > < datalist id = "email_list" > < wartość opcji = " [email protected]" label = "Jana Kowalski " > < wartość opcji = "[email protected]" label = "Jan Kowalski" > < / datalist > < input name = "form_telephone" id = "form_telephone" type = "tel" > < input name = "form_color" id = "form_color" type = "color" > < label > 
          
    
         
     
         
         
    
       
       
    
        Załączniki:
        < input  type = „file”  multiple  name = „att” > 
    </ label > 
    < input  name = „x”  type = „range”  min = „100”  max = „700”  step = „9.09090909”  value = „509.090909” >

  </ formularz > 
  </ body > 
</ html >

Przykład geopozycjonowania

<!DOCTYPE HTML> 
< html > 
< head > 
< title > Lokalizacje geograficzne </ title > 
</ head > 
< body > 
< język skryptowy  = "javascript" > function get_location () { navigator . geolokalizacja . getCurrentPosition ( współrzędne ); } współrzędne funkcji ( pozycja ) { var latitude = pozycja . współrzędne _ szerokość geograficzna ; zmienna długość = pozycja . współrzędne _ długość geograficzna ; alert ( 'Twoje współrzędne to: (' + szerokość geograficzna + ',' + długość geograficzna + ')' ); } </ script > < a href = "javascript:get_location();" > Pokaż pozycję </a> < / body > < / html >

Referencje

↑ W3C (6 października 2009). Ian Hickson i David Hyatt, wyd. „HTML 5” (w języku angielskim) . Źródło 6 października 2009 .
↑ Jorge Franganillo (6 września 2010). „HTML 5: nowy podstawowy standard sieciowy” .
↑ „HTML 5 sfinalizowany” . OSWiadomości . 29 października 2014 r . Pobrano 29 października 2014 .
↑ W3C (13 czerwca 2014). "HTML/Elementy/hgroup " .
↑ W3C (2007). „Odniesienie do tagów HTML 5 Konsorcjum W3C ” . Zarchiwizowane od oryginału 2 sierpnia 2012 r.

Zobacz także

HTML
WHATWG , społeczność, która decyduje o przyszłości HTML.
Płótno (HTML)
Filmy HTML5
H.264/MPEG-4 AVC
teoria
WebM
sieć semantyczna
Internet 3.0
CSS3

Linki zewnętrzne

Wikimedia Commons zawiera kategorię multimediów o HTML5 .
Bieżąca wersja robocza specyfikacji HTML5
Kod źródłowy HTML5
Dysk testowy firmy Microsoft
www.html5rocks.com , HTML5 Rocks, od Google
Zasoby internetowe Mozilli
HTML5: co to jest HTML5? , film instruktażowy dotyczący rodziny technologii o nazwie HTML5.
dragonbound.net , gra stworzona z HTML5.
Quiz HTML5

[w3cSpec-1] W3C (6 października 2009). Ian Hickson i David Hyatt, wyd. „HTML 5” (w języku angielskim) . Źródło 6 października 2009 .

[franganilloHTML5-2] Jorge Franganillo (6 września 2010). „HTML 5: nowy podstawowy standard sieciowy” .

[finalosnews-3] „HTML 5 sfinalizowany” . OSWiadomości . 29 października 2014 r . Pobrano 29 października 2014 .

[4] W3C (13 czerwca 2014). "HTML/Elementy/hgroup " .

[5] W3C (2007). „Odniesienie do tagów HTML 5 Konsorcjum W3C ” . Zarchiwizowane od oryginału 2 sierpnia 2012 r.

[ 1 ]

[

[ 3

[ 4 ]

[ 5