---
title: HTML5
slug: HTML/HTML5
tags:
- CSS3
- HTML
- HTML 5
translation_of: Web/Guide/HTML/HTML5
---
Zawarta poniżej treść przeznaczona jest do zastosowania przez wszystkich programistów, strona zawiera dużo informacji na temat technologii HTML5, która została opisana w kilku grupach podzielonych według ich funkcji.
Semantyka
- Elementy sekcji zawarte w dokumencie HTML5
- Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.
- Zastosowanie elementów audio i video
- Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.
- Formularze w HTML5
- Spojrzenie na ulepszenia formularzy sieciowych w HTML5: wymuszenie poprawności API, kilka nowych atrybutów, nowe wartości dla atrybutów {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} i nowego elementu {{HTMLElement("output")}}.
- Nowe semantyczne elementy
- Obok sekcji, elementów mediów i formularzy, są liczne, nowe elementy takie jak: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, lub {{HTMLElement("meter")}} i {{HTMLElement("main")}}, zwiększenie ilości elementów poprawności HTML 5.
- Ulepszenia w {{HTMLElement("iframe")}}
- Używając atrybutów {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}} , autorzy mogą teraz precyzyjniej określać poziom bezpieczeństwa i pożądane wyświetlanie elementów {{HTMLElement("iframe")}}.
- MathML
- Pozwala na bezpośrednie umieszczanie formuł matematycznych.
- Wprowadzenie do HTML5
- Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.
- Parser zgodny z HTML5
- Parser, który przetwarza dokument HTML na DOM, został rozszerzony i teraz precyzyjnie definiuje zachowanie we wszystkich przypadkach, nawet w wypadku niepoprawnego HTML-a. To prowadzi do znacznie większej przewidywalności zachowania strony i współpracy między przeglądarkami zgodnymi z HTML 5.
Połączenia
- Web Sockets (dwukierunkowa komunikacja z serwerem)
- Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i wymieniać nie-HTML-owe dane.
- Server-Sent Events (zdarzenia wysłane przez serwer)
- Pozwala serwerowi na "własnowolne" wysyłanie zdarzeń do klienta, inaczej niż w przypadku klasycznego paradygmatu, w którym serwer mógł wysyłać dane tylko w odpowiedzi na zapytanie klienta.
- WebRTC
- Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
Tryb Offline i przechowywanie
- Zasoby offline: pamięć cache aplikacji
- Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.
- Zdarzenia online i offline
- Firefox 3 wspiera zdarzenia WHATWG online i offline, dzięki czemu aplikacje i dodatki mogą wykryć czy istnieje aktywne połączenie internetowe, a także wykrywać kiedy połączenie wygaśnie i kiedy jest aktywne.
- Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)
- Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.
- IndexedDB
- IndexedDB jest sieciowym standardem przechowywania znacznych ilości danych strukturalnych w przeglądarce i wysokiej wydajności wyszukiwania w tych danych za pomocą indeksów.
- Używanie plików z aplikacji internetowych
- Wsparcie dla nowego API plików HTML5 zostało dodane do Gecko, tworząc możliwość dostępu aplikacji internetowych do plików lokalnych wybranych przez użytkownika. Obejmuje też wsparcie dla wielokrotnego wyboru plików z użyciem {{HTMLElement("input")}} z atrybutem type file i nowym atrybutem elementu: multiple. Istnieje także
FileReader
.
- Zastosowanie elementów audio i video w HTML5
- Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.
- WebRTC
- Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
- Używanie API kamery internetowej
- Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
- Track and WebVTT
- Znacznik {{HTMLElement("track")}} pozwala tworzyć napisy i rozdziały. WebVTT jest formatem ścieżek tekstowych.
EFEKTY I GRAFIKA 3D
- Przewodnik po Canvas
- Informacje o nowym elemencie
{{HTMLElement("canvas")}}
wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie.
- HTML5 text API dla elementów <canvas>
- HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.
- WebGL
- WebGL przenosi grafikę 3D do sieci poprzez wprowadzenie API, które ściśle odpowiada OpenGl ES 2.0 i może być używane w znacznikach HTML5 {{HTMLElement("canvas")}}.
- SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa
- Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.
WYDAJNOŚĆ i iNTEGRACJA
- Web Workers
- Umożliwia przekazanie działania JavaScript do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.
XMLHttpRequest
Poziom 2
- Umożliwia asynchroniczne pobieranie części strony, co umożliwia wyświetlanie elementów dynamicznych, zmieniających się w zależności od czasu i działań użytkownika. Jest to "następca" Ajax-a.
- JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)
- Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.
- API do obsługi przycisku wstecz (History API)
- Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.
- Atrybut contentEditable: przekształć swoją stronę w encyklopedię!
- HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.
- Przeciągnij i upuść
- API 'przeciągnij i upuść' w HTML5 wspiera przeciąganie i upuszczanie elementów wewnątrz strony i pomiędzy stronami. Upraszcza to także API dla dodatków i aplikacji bazujących na technologiach Mozilli.
- Zarządzanie aktywnością w HTML
- Nowe atrybuty HTML5
activeElement
i hasFocus
są już wspierane.
- Obsługa protokołów opartych na sieci
- Możesz teraz zarejestrować aplikacje internetowe jako obsługę protokołów używając funkcji
navigator.registerProtocolHandler().
requestAnimationFrame
- Pozwala kontrolować renderowanie animacji dla uzyskania optymalnej wydajności.1
- Pełnoekranowe API
- Kontroluje użycie całego ekranu dla stron internetowych lub aplikacji sieciowych bez wyświetlania UI przeglądarki.
- Blokowanie kursora
- Powala zablokować wskaźnik do zawartości, więc gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.
- Zdarzenia online i offline
- Aby stworzyć dobrze obsługującą tryb offline aplikację internetową trzeba wiedzieć, kiedy aplikacja jest rzeczywiście offline. Prawdę mówiąc, musisz wiedzieć też, kiedy aplikacja powróci do stanu online.
DOSTĘP DO URZĄDZENIA
- Używanie API kamery internetowej
- Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
- Zdarzenia dotykowe
- Narzędzia do obsługi zdarzeń tworzonych przez użytkownika używającego ekranu dotykowego.
- Geolokacja
- Pozwól przeglądarce zlokalizować pozycję użytkownika przy użyciu geolokacji.
- Wykrywanie orientacji urządzenia
- Pobierz informację o zmianie orientacji urządzenia na którym pracuje przeglądarka. Może ona być użyta jako urządzenie wejściowe( np w grach reagujących na zmianę pozycji urządzenia) lub służyć przystosowaniu layoutu strony do aktualnej orientacji urządzenia (portrait lub landscape)
- Blokowanie kursora
- Powala zablokować wskaźnik do zawartości, więc gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.
stylizacja
CSS zostało rozszerzone, aby móc o wiele wygodniej stylizować elementy. Jest często nazywane CSS3, choć CSS nie jest monolitycznym tworem, w którym wszystkie elementy są na poziomie 3. Część jest na poziomie 1, część na 4, Lub którymś z poziomów pośrednich.
- Nowe właściwości stylizacji tła
- Teraz jest możliwe dodanie cienia do box-ów używając {{cssxref("box-shadow")}}, a także można ustawić wielokrotne tło.
- Bardziej fantazyjne obramowania
- Teraz nie tylko możliwe jest stylizowanie obramowań za pomocą obrazów, używając {{cssxref("border-image")}} i związanych z pismem odręcznym właściwościami, ale także zaokrąglenia obramowań są wspierane przez właściwość {{cssxref("border-radius")}}.
- Wpraw w ruch swój styl
- Używając Przejść CSS do animacji przejść pomiędzy różnymi stanami lub używając Animacji CSS do animowania części strony, bez zdarzenia wywołującego, możesz teraz kontrolować elementy interaktywne na twojej stronie.
- Poprawa typografii Typography improvement
- Autorzy mają większą kontrolę dla osiągnięcia lepszej typografii. Mogą kontrolować {{cssxref("text-overflow")}} i dzielenie wyrazów, a także mogą dodawać cienie i precyzyjniej kontrolować dekoracje tekstu. Niestandardowe kroje można pobrać i zastosować za pomocą {{cssxref("@font-face")}}.
- Nowe, prezentacyjne layouty
- W celu polepszenia elastyczności designów zostały dodane dwa nowe layouty: CSS multi-column layout(wielokolumnowy layout CSS) i CSS flexible box layout(layout elastycznego pudełka CSS).