From a3cb768f710d274b572a26c48448f0cb8e4a1bdd Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 25 May 2021 00:43:56 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 5 +- files/de/_wikihistory.json | 22 +- files/de/orphaned/web/guide/html/html5/index.html | 175 +++++++++++ files/de/web/guide/html/html5/index.html | 175 ----------- files/es/_redirects.txt | 14 +- files/es/_wikihistory.json | 108 +++---- .../html/html5/constraint_validation/index.html | 346 +++++++++++++++++++++ .../web/guide/html/html5/html5_parser/index.html | 65 ++++ files/es/orphaned/web/guide/html/html5/index.html | 200 ++++++++++++ .../html/html5/introduction_to_html5/index.html | 17 + .../html/html5/constraint_validation/index.html | 346 --------------------- .../web/guide/html/html5/html5_parser/index.html | 65 ---- files/es/web/guide/html/html5/index.html | 200 ------------ .../html/html5/introduction_to_html5/index.html | 17 - files/fr/_redirects.txt | 12 +- files/fr/_wikihistory.json | 50 +-- files/fr/orphaned/web/guide/html/html5/index.html | 168 ++++++++++ .../html/html5/introduction_to_html5/index.html | 41 +++ files/fr/web/guide/html/html5/index.html | 167 ---------- .../html/html5/introduction_to_html5/index.html | 41 --- files/ja/_redirects.txt | 23 +- files/ja/_wikihistory.json | 70 ++--- .../html/html5/constraint_validation/index.html | 330 ++++++++++++++++++++ files/ja/orphaned/web/guide/html/html5/index.html | 172 ++++++++++ .../html/html5/introduction_to_html5/index.html | 27 ++ .../html/html5/constraint_validation/index.html | 329 -------------------- files/ja/web/guide/html/html5/index.html | 171 ---------- .../html/html5/introduction_to_html5/index.html | 26 -- files/ko/_redirects.txt | 10 +- files/ko/_wikihistory.json | 42 +-- files/ko/orphaned/web/guide/html/html5/index.html | 123 ++++++++ .../html/html5/introduction_to_html5/index.html | 41 +++ files/ko/web/guide/html/html5/index.html | 123 -------- .../html/html5/introduction_to_html5/index.html | 41 --- files/pl/_redirects.txt | 3 +- files/pl/_wikihistory.json | 20 +- files/pl/orphaned/web/guide/html/html5/index.html | 173 +++++++++++ files/pl/web/guide/html/html5/index.html | 173 ----------- files/pt-br/_redirects.txt | 12 +- files/pt-br/_wikihistory.json | 56 ++-- .../pt-br/orphaned/web/guide/html/html5/index.html | 300 ++++++++++++++++++ .../html/html5/introduction_to_html5/index.html | 24 ++ files/pt-br/web/guide/html/html5/index.html | 300 ------------------ .../html/html5/introduction_to_html5/index.html | 24 -- files/ru/_redirects.txt | 9 +- files/ru/_wikihistory.json | 74 ++--- .../html/html5/constraint_validation/index.html | 342 ++++++++++++++++++++ files/ru/orphaned/web/guide/html/html5/index.html | 172 ++++++++++ .../html/html5/introduction_to_html5/index.html | 27 ++ .../html/html5/constraint_validation/index.html | 342 -------------------- files/ru/web/guide/html/html5/index.html | 172 ---------- .../html/html5/introduction_to_html5/index.html | 27 -- files/zh-cn/_redirects.txt | 9 +- files/zh-cn/_wikihistory.json | 100 +++--- .../html/html5/constraint_validation/index.html | 340 ++++++++++++++++++++ .../zh-cn/orphaned/web/guide/html/html5/index.html | 187 +++++++++++ .../html/html5/introduction_to_html5/index.html | 44 +++ .../html/html5/constraint_validation/index.html | 339 -------------------- files/zh-cn/web/guide/html/html5/index.html | 186 ----------- .../html/html5/introduction_to_html5/index.html | 43 --- files/zh-tw/_redirects.txt | 8 +- files/zh-tw/_wikihistory.json | 42 +-- .../zh-tw/orphaned/web/guide/html/html5/index.html | 109 +++++++ .../html/html5/introduction_to_html5/index.html | 41 +++ files/zh-tw/web/guide/html/html5/index.html | 108 ------- .../html/html5/introduction_to_html5/index.html | 40 --- 66 files changed, 3820 insertions(+), 3788 deletions(-) create mode 100644 files/de/orphaned/web/guide/html/html5/index.html delete mode 100644 files/de/web/guide/html/html5/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/html5_parser/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/es/web/guide/html/html5/html5_parser/index.html delete mode 100644 files/es/web/guide/html/html5/index.html delete mode 100644 files/es/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/fr/orphaned/web/guide/html/html5/index.html create mode 100644 files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/fr/web/guide/html/html5/index.html delete mode 100644 files/fr/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/ja/orphaned/web/guide/html/html5/index.html create mode 100644 files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ja/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/ja/web/guide/html/html5/index.html delete mode 100644 files/ja/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/ko/orphaned/web/guide/html/html5/index.html create mode 100644 files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ko/web/guide/html/html5/index.html delete mode 100644 files/ko/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/pl/orphaned/web/guide/html/html5/index.html delete mode 100644 files/pl/web/guide/html/html5/index.html create mode 100644 files/pt-br/orphaned/web/guide/html/html5/index.html create mode 100644 files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/guide/html/html5/index.html delete mode 100644 files/pt-br/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/ru/orphaned/web/guide/html/html5/index.html create mode 100644 files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ru/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/ru/web/guide/html/html5/index.html delete mode 100644 files/ru/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/zh-cn/orphaned/web/guide/html/html5/index.html create mode 100644 files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/zh-cn/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/zh-cn/web/guide/html/html5/index.html delete mode 100644 files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/zh-tw/orphaned/web/guide/html/html5/index.html create mode 100644 files/zh-tw/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/zh-tw/web/guide/html/html5/index.html delete mode 100644 files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index dd83cf2012..1c8a7889f3 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -294,7 +294,7 @@ /de/docs/HTML/Element/time /de/docs/Web/HTML/Element/time /de/docs/HTML/Element/ul /de/docs/Web/HTML/Element/ul /de/docs/HTML/Element/var /de/docs/Web/HTML/Element/var -/de/docs/HTML/HTML5 /de/docs/Web/Guide/HTML/HTML5 +/de/docs/HTML/HTML5 /de/docs/orphaned/Web/Guide/HTML/HTML5 /de/docs/HTML/HTML5/HTML5_element_list /de/docs/conflicting/Web/HTML/Element /de/docs/HTML/HTML5/liste_der_HTML5_elemente /de/docs/conflicting/Web/HTML/Element /de/docs/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements @@ -664,6 +664,7 @@ /de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen /de/docs/Web/API/Canvas_API/Tutorial/Basic_usage /de/docs/Web/Guide/HTML/Content_Editable /de/docs/Web/Guide/HTML/Editable_content /de/docs/Web/Guide/HTML/Einführung /de/docs/Learn/HTML/Introduction_to_HTML +/de/docs/Web/Guide/HTML/HTML5 /de/docs/orphaned/Web/Guide/HTML/HTML5 /de/docs/Web/Guide/HTML/Inhaltskategorien /de/docs/Web/Guide/HTML/Content_categories /de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /de/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /de/docs/Web/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements @@ -694,7 +695,7 @@ /de/docs/Web/HTML/Globale_Attribute/tabindex /de/docs/Web/HTML/Global_attributes/tabindex /de/docs/Web/HTML/Globale_Attribute/title /de/docs/Web/HTML/Global_attributes/title /de/docs/Web/HTML/Globale_Attribute/translate /de/docs/Web/HTML/Global_attributes/translate -/de/docs/Web/HTML/HTML5 /de/docs/Web/Guide/HTML/HTML5 +/de/docs/Web/HTML/HTML5 /de/docs/orphaned/Web/Guide/HTML/HTML5 /de/docs/Web/HTML/HTML5/HTML5_element_list /de/docs/conflicting/Web/HTML/Element /de/docs/Web/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements /de/docs/Web/HTML/Referenz /de/docs/Web/HTML/Reference diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index ee41a1874a..a3fbab39b8 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -8166,17 +8166,6 @@ "lxdiamond" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-03-23T23:33:45.828Z", - "contributors": [ - "suriyaa", - "teoli", - "timausk", - "thorsten.rinne", - "matze", - "nothine" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2019-03-18T20:37:20.242Z", "contributors": [ @@ -14788,6 +14777,17 @@ "td8" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-03-23T23:33:45.828Z", + "contributors": [ + "suriyaa", + "teoli", + "timausk", + "thorsten.rinne", + "matze", + "nothine" + ] + }, "orphaned/Web/HTML/Global_attributes/dropzone": { "modified": "2020-10-15T21:40:11.332Z", "contributors": [ diff --git a/files/de/orphaned/web/guide/html/html5/index.html b/files/de/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..20c745e391 --- /dev/null +++ b/files/de/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,175 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

+ + + +

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

+ + + +
+
+

SemantiK

+ +
+
Gliederungen und Abschnitte in HTML5
+
Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
Formulare in HTML5
+
Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.
+
Neue semantische Elemente
+
Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge gültiger HTML5 Elemente.
+
Verbesserung bei {{HTMLElement("iframe")}}
+
Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.
+
MathML
+
Erlaubt das direkte Einbinden mathematischer Formeln.
+
Einführung in HTML5
+
Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
+
HTML5-konformer Parser
+
Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.
+
+ +

Konnektivität

+ +
+
Web Sockets
+
Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
+
Server-gesendete Ereignisse
+
Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
+ +

Offline & Speicherung

+ +
+
+
Offline-Ressourcen: der Anwendungs-Cache
+
Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
+
Online- und Offline-Ereignisse
+
Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
+
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)
+
Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
+
IndexedDB
+
Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
+
Dateien aus Webanwendungen benutzen
+
Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von {{HTMLElement("input")}} Elementen des Typs file ein. Außerdem gibt es FileReader.
+
+
+ +

Multimedia

+ +
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
Die Camera API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Untertitel und WebVTT
+
Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.
+
+ +

3D, graphiKEN & effeKtE

+ +
+
Canvas-Tutorial
+
Lerne mehr über das neue {{HTMLElement("canvas")}} Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
+
HTML5 Text-API für <canvas> Elemente
+
Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.
+
WebGL
+
WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.
+
SVG
+
Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
+
 
+
+
+ +
+

Leistung & integration

+ +
+
Web Worker
+
Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
+
XMLHttpRequest Level 2
+
Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
+
JIT-kompilierende JavaScript-Engines
+
Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
+
History API
+
Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
+
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!
+
In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
+
Drag und Drop
+
Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
+
Fokus-Kontrolle in HTML
+
Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
+
Web-basierte Protokoll-Handler
+
Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
+
requestAnimationFrame
+
Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
+
Vollbild-API
+
Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
Online- und Offline-Ereignisse
+
Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.
+
+ +

Gerätezugriff

+ +
+
Die Kamera-API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Touch-Ereignisse
+
Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
+
Geolocation benutzen
+
Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
+
Geräte-Orientierung ermitteln
+
Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
+ +

Styling

+ +

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

+ +
+
Neue Funktionen für Hintergründe
+
Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und mehrere Hintergründe zu setzen.
+
Ausgefallenere Ränder
+
Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.
+
Stile animierbar machen
+
Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
+
Typographie-Verbesserungen
+
Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.
+
Neue Präsentations-Layouts
+
Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.
+
+
+
+ +

 

diff --git a/files/de/web/guide/html/html5/index.html b/files/de/web/guide/html/html5/index.html deleted file mode 100644 index 17b92f244a..0000000000 --- a/files/de/web/guide/html/html5/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - References - - Web Development -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

- - - -

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

- - - -
-
-

SemantiK

- -
-
Gliederungen und Abschnitte in HTML5
-
Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.
-
HTML5 Audio und Video benutzen
-
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
-
Formulare in HTML5
-
Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.
-
Neue semantische Elemente
-
Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge gültiger HTML5 Elemente.
-
Verbesserung bei {{HTMLElement("iframe")}}
-
Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.
-
MathML
-
Erlaubt das direkte Einbinden mathematischer Formeln.
-
Einführung in HTML5
-
Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
-
HTML5-konformer Parser
-
Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.
-
- -

Konnektivität

- -
-
Web Sockets
-
Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
-
Server-gesendete Ereignisse
-
Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
-
WebRTC
-
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
-
- -

Offline & Speicherung

- -
-
-
Offline-Ressourcen: der Anwendungs-Cache
-
Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
-
Online- und Offline-Ereignisse
-
Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
-
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)
-
Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
-
IndexedDB
-
Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
-
Dateien aus Webanwendungen benutzen
-
Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von {{HTMLElement("input")}} Elementen des Typs file ein. Außerdem gibt es FileReader.
-
-
- -

Multimedia

- -
-
HTML5 Audio und Video benutzen
-
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
-
WebRTC
-
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
-
Die Camera API benutzen
-
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
-
Untertitel und WebVTT
-
Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.
-
- -

3D, graphiKEN & effeKtE

- -
-
Canvas-Tutorial
-
Lerne mehr über das neue {{HTMLElement("canvas")}} Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
-
HTML5 Text-API für <canvas> Elemente
-
Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.
-
WebGL
-
WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.
-
SVG
-
Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
-
 
-
-
- -
-

Leistung & integration

- -
-
Web Worker
-
Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
-
XMLHttpRequest Level 2
-
Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
-
JIT-kompilierende JavaScript-Engines
-
Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
-
History API
-
Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
-
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!
-
In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
-
Drag und Drop
-
Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
-
Fokus-Kontrolle in HTML
-
Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
-
Web-basierte Protokoll-Handler
-
Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
-
requestAnimationFrame
-
Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
-
Vollbild-API
-
Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
-
Pointer Lock API
-
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
-
Online- und Offline-Ereignisse
-
Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.
-
- -

Gerätezugriff

- -
-
Die Kamera-API benutzen
-
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
-
Touch-Ereignisse
-
Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
-
Geolocation benutzen
-
Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
-
Geräte-Orientierung ermitteln
-
Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
-
Pointer Lock API
-
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
-
- -

Styling

- -

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

- -
-
Neue Funktionen für Hintergründe
-
Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und mehrere Hintergründe zu setzen.
-
Ausgefallenere Ränder
-
Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.
-
Stile animierbar machen
-
Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
-
Typographie-Verbesserungen
-
Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.
-
Neue Präsentations-Layouts
-
Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.
-
-
-
- -

 

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index acb86f967d..0b38f00189 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -891,14 +891,14 @@ /es/docs/HTML/Elemento/var /es/docs/Web/HTML/Element/var /es/docs/HTML/Elemento/video /es/docs/Web/HTML/Element/video /es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats -/es/docs/HTML/HTML5 /es/docs/Web/Guide/HTML/HTML5 +/es/docs/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 /es/docs/HTML/HTML5/Forms_in_HTML5 /es/docs/Learn/Forms /es/docs/HTML/HTML5/Formularios_en_HTML5 /es/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/es/docs/HTML/HTML5/HTML5_Parser /es/docs/Web/Guide/HTML/HTML5/HTML5_Parser +/es/docs/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser /es/docs/HTML/HTML5/HTML5_lista_elementos /es/docs/conflicting/Web/HTML/Element -/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/Web/Guide/HTML/HTML5/Constraint_validation +/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /es/docs/HTML:Canvas /es/docs/Web/API/Canvas_API /es/docs/HTML:Element /es/docs/Web/HTML/Element @@ -2066,6 +2066,10 @@ /es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form /es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data /es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/Forms/Styling_web_forms +/es/docs/Web/Guide/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 +/es/docs/Web/Guide/HTML/HTML5/Constraint_validation /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation +/es/docs/Web/Guide/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser +/es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduction_to_HTML /es/docs/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/orphaned/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/Guide/HTML/Content_categories diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 933fa3d9f8..7478c48f7a 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -14312,60 +14312,6 @@ "V.Morantes" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-05-16T09:08:08.720Z", - "contributors": [ - "jonasdamher", - "SphinxKnight", - "anibalymariacantantes60", - "AzulMartin", - "264531666", - "fracp", - "damianed", - "alfredotemiquel", - "rossettistone", - "carlossuarez", - "teoli", - "JosueMolina", - "Pablo_Ivan", - "welm", - "bicentenario", - "jesusruiz", - "pierre_alfonso", - "pitufo_cabron", - "cesar_ortiz_elPatox", - "inma_610", - "vigia122", - "StripTM", - "deimidis", - "Izel" - ] - }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2020-08-11T08:06:04.309Z", - "contributors": [ - "gerardo750711", - "israel-munoz" - ] - }, - "Web/Guide/HTML/HTML5/HTML5_Parser": { - "modified": "2019-03-24T00:07:09.448Z", - "contributors": [ - "teoli", - "RickieesES", - "inma_610", - "StripTM", - "juanb", - "Izel" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-24T00:05:36.058Z", - "contributors": [ - "teoli", - "inma_610" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2019-03-23T23:38:22.567Z", "contributors": [ @@ -23602,6 +23548,60 @@ "rubencidlara" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2020-05-16T09:08:08.720Z", + "contributors": [ + "jonasdamher", + "SphinxKnight", + "anibalymariacantantes60", + "AzulMartin", + "264531666", + "fracp", + "damianed", + "alfredotemiquel", + "rossettistone", + "carlossuarez", + "teoli", + "JosueMolina", + "Pablo_Ivan", + "welm", + "bicentenario", + "jesusruiz", + "pierre_alfonso", + "pitufo_cabron", + "cesar_ortiz_elPatox", + "inma_610", + "vigia122", + "StripTM", + "deimidis", + "Izel" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-08-11T08:06:04.309Z", + "contributors": [ + "gerardo750711", + "israel-munoz" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/HTML5_Parser": { + "modified": "2019-03-24T00:07:09.448Z", + "contributors": [ + "teoli", + "RickieesES", + "inma_610", + "StripTM", + "juanb", + "Izel" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:05:36.058Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, "orphaned/Web/Guide/HTML/Introduction_alhtml_clone": { "modified": "2019-03-23T23:11:36.473Z", "contributors": [ diff --git a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..160d590380 --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,346 @@ +--- +title: Validación de restricciones +slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation +tags: + - CSS + - Guía + - HTML5 + - NecesitaContenido + - Selectores +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +original_slug: Web/Guide/HTML/HTML5/Constraint_validation +--- +

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

+ +
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
+ +

Restricciones intrínsecas y básicas

+ +

En HTML5, las restricciones básicas son declaradas de dos formas:

+ + + +

Tipos de captura semánticos

+ +

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

+ + + + + + + + + + + + + + + + + + + + + +
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: +
    +
  • una URI válida (como se define en RFC 3986)
    • +
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • +
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • +
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • +
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: +
    +
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • +
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • +
+ +
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
+ +

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

+ +

Atributos relacionados con validaciones

+ +

Los siguientes atributos son usados para describir restricciones básicas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
+ +

Proceso de validación de restricciones

+ +

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

+ + + +
Nota: + + +
+ +

Restricciones complejas usando la API de Restricciones de HTML5

+ +

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

+ +

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

+ +

Restricciones que combinan varios campos: Validación de código postal

+ +

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

+ +
+

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

+
+ +

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

+ +
<form>
+    <label for="ZIP">Código postal : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">País : </label>
+    <select id="Country">
+      <option value="ch">Suiza</option>
+      <option value="fr">Francia</option>
+      <option value="de">Alemania</option>
+      <option value="nl">Países Bajos</option>
+    </select>
+    <input type="submit" value="Validar">
+</form>
+ +

Esto mostrará el siguiente formulario: 

+ +

+ +

Primero, escribimos una función que revisará las restricciones en sí:

+ +
function checkZIP() {
+  // Para cada país, se define el patrón para el código postal
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
+  };
+
+  // Se lee el ID del país
+  var country = document.getElementById("Country").value;
+
+  // Se obtiene el campo del código postal
+  var ZIPField = document.getElementById("ZIP");
+
+  // Se crea el validador de la restricción
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // ¡Se hace la revisión!
+  if (constraint.test(ZIPField.value)) {
+    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // El código postal no cumple la restricción, usamos la API de Restricciones para
+    // dar un mensaje sobre el formato requerido para este país
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

+ +

Limitando el tamaño de un archivo antes de ser subido

+ +

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

+ +

Aquí está la parte de HTML:

+ +
<label for="FS">Selecciona un archivo menor a 75KB : </label>
+<input type="file" id="FS">
+ +

Esto muestra lo siguiente:

+ +

+ + + +

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Si hay (por lo menos) un archivo seleccionado
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Validar la restricción
+       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
+       return;
+     }
+  }
+  // No hay incumplimiento de la restricción
+  FS.setCustomValidity("");
+}
+ + + +

Finalmente, anclamos el método al evento requerido:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

+ +

Estilos visuales de validación de restricciones

+ +

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

+ +

Controlando el aspecto de los elementos

+ +

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

+ +

Pseudo-clases :required y :optional

+ +

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

+ +

Pseudo-clase :-moz-placeholder

+ +

Véase ::placeholder (experimental).

+ +

Pseudo-clases :valid :invalid

+ +

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

+ +

Estilos predeterminados

+ +

Controlando el texto de incumplimiento de restricciones

+ +

El atributo x-moz-errormessage

+ +

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

+ +
+

Nota: Esta extensión no es estándar.

+
+ +

element.setCustomValidity() de la API de Validación de Restricciones

+ +

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

+ +

Objeto ValidityState de la API de Validación de Restricciones

+ +

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusión

diff --git a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..5548e129ac --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html @@ -0,0 +1,65 @@ +--- +title: Analizador de HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/HTML5_Parser +tags: + - HTML + - HTML5 + - para_revisar +translation_of: Web/Guide/HTML/HTML5/HTML5_Parser +original_slug: Web/Guide/HTML/HTML5/HTML5_Parser +--- +

{{ gecko_minversion_header("2") }}{{ draft() }}

+

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

+

El nuevo analizador presenta estas mejoras importantes:

+ +

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

+

Conductas del analizador modificadas

+

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

+

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

+

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

+

Llamar a document.write () durante el análisis

+

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

+

Algunos contextos en los que no debes llamar a document.write() incluyen:

+ +

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

+

Falta de repetición del análisis

+

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

+

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

+ +

Mejora del rendimiento con el análisis especulativo

+

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

+

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

+

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

+

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

+
<script>
+  document.write ("<div>");
+  document.write ("<p> Aquí va el contenido. </ p>");
+  document.write ("</ div>");
+</ script>
+<!-- Aquí va el HTML sin script. -->
+
+
+

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

+
<script>document.write("<div>");</script>
+<p>El contenido va aquí.</p>
+<script>document.write("</div>");</script>
+
+
+

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

+

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/orphaned/web/guide/html/html5/index.html b/files/es/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..a85b952772 --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,200 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - API + - CSS3 + - Gráficos(2) + - HTML + - HTML5 + - Multimedia + - SVG + - conectividad + - graficos + - mejoras + - nuevo +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

+ + + +

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

+ + + +
+
+

SEMÁNTICA

+ +
+
Secciones y contenidos en HTML5
+
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
+
Uso de audio y video en HTML5
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
+
+ +
+
Formularios en HTML5
+
Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
+
Nuevos elementos semánticos
+
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos. +
+
+
Mejora en {{HTMLElement("iframe")}}
+
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
+
MathML
+
Permite integrar directamente fórmulas matemáticas.
+
+
Introducción a HTML5
+
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
+
Analizador de HTML5 compatible
+
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
+
+ +

CONECTIVIDAD

+ +
+
Web Sockets
+
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
+
Eventos de servidor enviados
+
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
+ +

Sin Conexión Y ALMACENAMIENTO

+ +
+
Recursos sin conexión: el caché de la aplicación
+
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
+
Eventos  con y sin conexión
+
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
+
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
+
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
+
IndexedDB
+
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
+
Uso de archivos desde aplicaciones web
+
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
+
+ +

MULTIMEDIA

+ +
+
Usando HTML5 de audio y video
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. +
+
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Track and WebVTT
+
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
+
+ +

3D, GRAFICOS & EFECTOS

+ +
+
Canvas Tutorial
+
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
+
API de texto para elementos <canvas> 
+
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
+
WebGL
+
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <canvas> HTML5  .
+
SVG
+
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
+
+
+
+
+
+
+
+ +
+

RESULTADOS e INTEGRACIÓN

+ +
+
Web Workers
+
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
+
XMLHttpRequest Nivel 2
+
Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
+
+ +
+
Motores JIT compilación de JavaScript
+
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
+
History API
+
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
+
El atributo contentEditable: transformar su sitio web en una wiki!
+
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
+
Arrastrar y soltar
+
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
+
Gestión del foco en HTML
+
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
+
Manejadores de protocolo basados ​​en web
+
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
+
Fullscreen API
+
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
Eventos en línea y fuera de línea
+
+
+
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
+
+
+
+ +

ACCESO al dispositivo

+ +
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Eventos táctiles
+
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
+
El uso de geolocalización
+
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
+
Detección de la orientación del dispositivo
+
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
+ +

CSS3 STYLING

+ +

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.

+ +
+
Nuevas características de diseño de fondo
+
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
+
+ +
+
Bordes mas "lujosos"
+
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
+
Animación de su estilo
+
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
+
Tipografía mejorada
+
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
+
Nuevos diseños de presentación
+
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
+
+
+
diff --git a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..c0ad7e26db --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,17 @@ +--- +title: Introducción a HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +


+ HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

+

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

+

El tipo de documento HTML5

+

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

+
<!DOCTYPE html>
+

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

+

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/es/web/guide/html/html5/constraint_validation/index.html b/files/es/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index ad5fdfc234..0000000000 --- a/files/es/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Validación de restricciones -slug: Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guía - - HTML5 - - NecesitaContenido - - Selectores -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: HTML/HTML5/Validacion_de_restricciones ---- -

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

- -
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
- -

Restricciones intrínsecas y básicas

- -

En HTML5, las restricciones básicas son declaradas de dos formas:

- - - -

Tipos de captura semánticos

- -

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

- - - - - - - - - - - - - - - - - - - - - -
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: -
    -
  • una URI válida (como se define en RFC 3986)
    • -
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • -
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • -
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • -
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: -
    -
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • -
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • -
- -
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
- -

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

- -

Atributos relacionados con validaciones

- -

Los siguientes atributos son usados para describir restricciones básicas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
- -

Proceso de validación de restricciones

- -

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

- - - -
Nota: - - -
- -

Restricciones complejas usando la API de Restricciones de HTML5

- -

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

- -

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

- -

Restricciones que combinan varios campos: Validación de código postal

- -

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

- -
-

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

-
- -

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

- -
<form>
-    <label for="ZIP">Código postal : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">País : </label>
-    <select id="Country">
-      <option value="ch">Suiza</option>
-      <option value="fr">Francia</option>
-      <option value="de">Alemania</option>
-      <option value="nl">Países Bajos</option>
-    </select>
-    <input type="submit" value="Validar">
-</form>
- -

Esto mostrará el siguiente formulario: 

- -

- -

Primero, escribimos una función que revisará las restricciones en sí:

- -
function checkZIP() {
-  // Para cada país, se define el patrón para el código postal
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
-  };
-
-  // Se lee el ID del país
-  var country = document.getElementById("Country").value;
-
-  // Se obtiene el campo del código postal
-  var ZIPField = document.getElementById("ZIP");
-
-  // Se crea el validador de la restricción
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // ¡Se hace la revisión!
-  if (constraint.test(ZIPField.value)) {
-    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // El código postal no cumple la restricción, usamos la API de Restricciones para
-    // dar un mensaje sobre el formato requerido para este país
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

- -

Limitando el tamaño de un archivo antes de ser subido

- -

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

- -

Aquí está la parte de HTML:

- -
<label for="FS">Selecciona un archivo menor a 75KB : </label>
-<input type="file" id="FS">
- -

Esto muestra lo siguiente:

- -

- - - -

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // Si hay (por lo menos) un archivo seleccionado
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Validar la restricción
-       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
-       return;
-     }
-  }
-  // No hay incumplimiento de la restricción
-  FS.setCustomValidity("");
-}
- - - -

Finalmente, anclamos el método al evento requerido:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

- -

Estilos visuales de validación de restricciones

- -

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

- -

Controlando el aspecto de los elementos

- -

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

- -

Pseudo-clases :required y :optional

- -

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

- -

Pseudo-clase :-moz-placeholder

- -

Véase ::placeholder (experimental).

- -

Pseudo-clases :valid :invalid

- -

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

- -

Estilos predeterminados

- -

Controlando el texto de incumplimiento de restricciones

- -

El atributo x-moz-errormessage

- -

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

- -
-

Nota: Esta extensión no es estándar.

-
- -

element.setCustomValidity() de la API de Validación de Restricciones

- -

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

- -

Objeto ValidityState de la API de Validación de Restricciones

- -

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusión

diff --git a/files/es/web/guide/html/html5/html5_parser/index.html b/files/es/web/guide/html/html5/html5_parser/index.html deleted file mode 100644 index f4357339f4..0000000000 --- a/files/es/web/guide/html/html5/html5_parser/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Analizador de HTML5 -slug: Web/Guide/HTML/HTML5/HTML5_Parser -tags: - - HTML - - HTML5 - - para_revisar -translation_of: Web/Guide/HTML/HTML5/HTML5_Parser -original_slug: HTML/HTML5/HTML5_Parser ---- -

{{ gecko_minversion_header("2") }}{{ draft() }}

-

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

-

El nuevo analizador presenta estas mejoras importantes:

- -

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

-

Conductas del analizador modificadas

-

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

-

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

-

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

-

Llamar a document.write () durante el análisis

-

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

-

Algunos contextos en los que no debes llamar a document.write() incluyen:

- -

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

-

Falta de repetición del análisis

-

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

-

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

- -

Mejora del rendimiento con el análisis especulativo

-

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

-

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

-

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

-

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

-
<script>
-  document.write ("<div>");
-  document.write ("<p> Aquí va el contenido. </ p>");
-  document.write ("</ div>");
-</ script>
-<!-- Aquí va el HTML sin script. -->
-
-
-

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

-
<script>document.write("<div>");</script>
-<p>El contenido va aquí.</p>
-<script>document.write("</div>");</script>
-
-
-

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

-

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/web/guide/html/html5/index.html b/files/es/web/guide/html/html5/index.html deleted file mode 100644 index 1d98d2baa5..0000000000 --- a/files/es/web/guide/html/html5/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - API - - CSS3 - - Gráficos(2) - - HTML - - HTML5 - - Multimedia - - SVG - - conectividad - - graficos - - mejoras - - nuevo -translation_of: Web/Guide/HTML/HTML5 -original_slug: HTML/HTML5 ---- -

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

- - - -

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

- - - -
-
-

SEMÁNTICA

- -
-
Secciones y contenidos en HTML5
-
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
-
Uso de audio y video en HTML5
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
-
- -
-
Formularios en HTML5
-
Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
-
Nuevos elementos semánticos
-
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos. -
-
-
Mejora en {{HTMLElement("iframe")}}
-
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
-
MathML
-
Permite integrar directamente fórmulas matemáticas.
-
-
Introducción a HTML5
-
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
-
Analizador de HTML5 compatible
-
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
-
- -

CONECTIVIDAD

- -
-
Web Sockets
-
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
-
Eventos de servidor enviados
-
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
-
WebRTC
-
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
-
- -

Sin Conexión Y ALMACENAMIENTO

- -
-
Recursos sin conexión: el caché de la aplicación
-
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
-
Eventos  con y sin conexión
-
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
-
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
-
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
-
IndexedDB
-
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
-
Uso de archivos desde aplicaciones web
-
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
-
- -

MULTIMEDIA

- -
-
Usando HTML5 de audio y video
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. -
-
-
WebRTC
-
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Track and WebVTT
-
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
-
- -

3D, GRAFICOS & EFECTOS

- -
-
Canvas Tutorial
-
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
-
API de texto para elementos <canvas> 
-
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
-
WebGL
-
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <canvas> HTML5  .
-
SVG
-
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
-
-
-
-
-
-
-
- -
-

RESULTADOS e INTEGRACIÓN

- -
-
Web Workers
-
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
-
XMLHttpRequest Nivel 2
-
Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
-
- -
-
Motores JIT compilación de JavaScript
-
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
-
History API
-
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
-
El atributo contentEditable: transformar su sitio web en una wiki!
-
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
-
Arrastrar y soltar
-
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
-
Gestión del foco en HTML
-
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
-
Manejadores de protocolo basados ​​en web
-
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
-
Fullscreen API
-
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
-
API Pointer Lock
-
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
-
Eventos en línea y fuera de línea
-
-
-
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
-
-
-
- -

ACCESO al dispositivo

- -
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Eventos táctiles
-
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
-
El uso de geolocalización
-
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
-
Detección de la orientación del dispositivo
-
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
-
API Pointer Lock
-
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
-
- -

CSS3 STYLING

- -

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.

- -
-
Nuevas características de diseño de fondo
-
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
-
- -
-
Bordes mas "lujosos"
-
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
-
Animación de su estilo
-
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
-
Tipografía mejorada
-
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
-
Nuevos diseños de presentación
-
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
-
-
-
diff --git a/files/es/web/guide/html/html5/introduction_to_html5/index.html b/files/es/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 877f2666e0..0000000000 --- a/files/es/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Introducción a HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: HTML/HTML5/Introducción_a_HTML5 ---- -


- HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

-

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

-

El tipo de documento HTML5

-

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

-
<!DOCTYPE html>
-

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

-

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index f9bb4f68cc..22ba5716b9 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -2009,12 +2009,12 @@ /fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML /fr/docs/Learn/Forms/Your_first_form /fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple /fr/docs/Learn/Forms/Your_first_form/Example /fr/docs/HTML/Global_attributes /fr/docs/Web/HTML/Global_attributes -/fr/docs/HTML/HTML5 /fr/docs/Web/Guide/HTML/HTML5 -/fr/docs/HTML/HTML5/Introduction_to_HTML5 /fr/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/fr/docs/HTML/HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5 +/fr/docs/HTML/HTML5/Introduction_to_HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /fr/docs/HTML/HTML5/Liste_des_éléments_HTML5 /fr/docs/conflicting/Web/HTML/Element /fr/docs/HTML/Image_avec_ressources_origines_multiples_CORS_activees /fr/docs/Web/HTML/CORS_enabled_image /fr/docs/HTML/Introduction /fr/docs/Learn/HTML/Introduction_to_HTML -/fr/docs/HTML/Introduction_à_HTML5 /fr/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/fr/docs/HTML/Introduction_à_HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /fr/docs/HTML/Manipulating_video_using_canvas /fr/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /fr/docs/HTML/Reglages_des_attributs_CORS /fr/docs/Web/HTML/Attributes/crossorigin /fr/docs/HTML/Référence_Éléments_HTML /fr/docs/Web/HTML/Element @@ -4464,6 +4464,8 @@ /fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets /fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls /fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript /fr/docs/Learn/Forms/Sending_forms_through_JavaScript /fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire /fr/docs/Learn/Forms/Form_validation +/fr/docs/Web/Guide/HTML/HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5 +/fr/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /fr/docs/Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 /fr/docs/conflicting/Web/HTML/Element /fr/docs/Web/Guide/HTML/Introduction /fr/docs/Learn/HTML/Introduction_to_HTML /fr/docs/Web/Guide/HTML/Liens_email /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85 @@ -4552,13 +4554,13 @@ /fr/docs/Web/HTML/Formulaires/Mon_premier_formulaire_HTML /fr/docs/Learn/Forms/Your_first_form /fr/docs/Web/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple /fr/docs/Learn/Forms/Your_first_form/Example /fr/docs/Web/HTML/Gestion_du_focus_en_HTML /fr/docs/Web/API/Document/hasFocus -/fr/docs/Web/HTML/HTML5 /fr/docs/Web/Guide/HTML/HTML5 +/fr/docs/Web/HTML/HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5 /fr/docs/Web/HTML/HTML5/Liste_des_éléments_HTML5 /fr/docs/conflicting/Web/HTML/Element /fr/docs/Web/HTML/Image_avec_ressources_origines_multiples_CORS_activees /fr/docs/Web/HTML/CORS_enabled_image /fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP /fr/docs/Web/HTML/CORS_enabled_image /fr/docs/Web/HTML/Inline_elemente /fr/docs/Web/HTML/Inline_elements /fr/docs/Web/HTML/Introduction /fr/docs/Learn/HTML/Introduction_to_HTML -/fr/docs/Web/HTML/Introduction_to_HTML5 /fr/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/fr/docs/Web/HTML/Introduction_to_HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /fr/docs/Web/HTML/La_vérification_orthographique_dans_les_formulaires /fr/docs/Web/HTML/Global_attributes/spellcheck /fr/docs/Web/HTML/Microdonnées /fr/docs/Web/HTML/Microdata /fr/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /fr/docs/Glossary/speculative_parsing diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index c87e29f02a..99ed1bb69a 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -31131,31 +31131,6 @@ "SphinxKnight" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-11-06T04:21:55.272Z", - "contributors": [ - "Awebsome", - "teoli", - "tregagnon", - "leoetlino", - "Flaburgan", - "DavidWalsh", - "vigia122", - "MatthieuMaler", - "rd6137", - "Dwchiang", - "BenoitL" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-24T00:07:20.983Z", - "contributors": [ - "Goofy", - "Bringdal", - "tregagnon", - "xaky" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2020-04-07T04:00:20.055Z", "contributors": [ @@ -45229,6 +45204,31 @@ "loella16" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-11-06T04:21:55.272Z", + "contributors": [ + "Awebsome", + "teoli", + "tregagnon", + "leoetlino", + "Flaburgan", + "DavidWalsh", + "vigia122", + "MatthieuMaler", + "rd6137", + "Dwchiang", + "BenoitL" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:07:20.983Z", + "contributors": [ + "Goofy", + "Bringdal", + "tregagnon", + "xaky" + ] + }, "orphaned/Web/HTML/Element/isindex": { "modified": "2020-10-15T21:24:06.247Z", "contributors": [ diff --git a/files/fr/orphaned/web/guide/html/html5/index.html b/files/fr/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..c6c1e46369 --- /dev/null +++ b/files/fr/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,168 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :

+ +

Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé HTML5 & Cie et est souvent juste abrégé en HTML5.

+ +

Conçue pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait le lien vers de nombreuses ressources sur les technologies HTML5 classées dans différents groupes suivant leur(s) fonction(s).

+ + + +
+
+

Sémantique

+ +
+
Introduction à HTML5
+
Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.
+
Sections et structure des documents avec HTML5
+
Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} et {{HTMLElement("hgroup")}}.
+
Utilisation de l'audio et de la video en HTML5
+
Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans vos pages de nouveaux contenus multimédias.
+
Formulaires en HTML5
+
Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut {{htmlattrxref("type", "input")}} de {{HTMLElement("input")}} et le nouvel élément {{HTMLElement("output")}}.
+
+ +
+
Nouveaux éléments d'HTML5
+
En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou encore {{HTMLElement("meter")}}.
+
Amélioration de {{HTMLElement("iframe")}}
+
En utilisant les attributs {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, et {{htmlattrxref("srcdoc", "iframe")}}, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément {{HTMLElement("iframe")}}.
+
MathML
+
Permet d'insérer des formules mathématiques directement dans les pages web.
+
Parseur conforme à HTML5
+
Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.
+
+ +

Connectivité

+ +
+
Web Sockets
+
Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.
+
Évènements envoyés par le serveur
+
Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel selon lequel le serveur ne peut envoyer des données qu'en réponse à une demande effectuée par le client.
+
WebRTC
+
RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.
+
+ +

Hors-connexion et Stockage

+ +
+
Ressources hors connexion : l'Application Cache
+
Firefox gère complètement la spécification des ressources hors connexion de HTML5.
+
Évènement online et offline
+
Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.
+
Stockage de session et persistance côté client du WHATWG (ou DOM Storage)
+
Le stockage de session et la persistance côté client permettent aux applications web de stocker des données structurées du côté du client.
+
IndexedDB
+
Est un standard web pour stocker dans le navigateur des volumes importants de données structurées, et permettant d'effectuer des recherches rapides dans ces données en utilisant des index.
+
Utilisation de fichiers depuis des applications web
+
La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut {{htmlattrxref("multiple", "input")}} de l'élément HTML {{HTMLElement("input")}} {{htmlattrxref("type", "input")}}="file".
+
+ +

Multimédia

+ +
+
Utilisation de l'audio et de la video en HTML5
+
Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans les pages web de nouveaux contenus multimédia.
+
WebRTC
+
RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.
+
Utiliser l'API Camera
+
Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
+
Track et WebVTT
+
L'élément {{HTMLElement("track")}} permet de sous-titrer et de chapitrer. WebVTT est un format pour marquer du texte par rapport à une durée.
+
+ +

3D, Graphiques et Effets

+ +
+
Tutoriel Canvas
+
Découvrez le nouvel élément {{HTMLElement("canvas")}} et apprennez à dessiner des graphiques et autres objets dans Firefox.
+
API de texte HTML5 pour les éléments <canvas>
+
Les éléments {{HTMLElement("canvas")}} gèrent également l'API texte d'HTML5.
+
WebGL
+
WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments {{HTMLElement("canvas")}}.
+
SVG
+
Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.
+
+
+ +
+

Performance et Intégration

+ +
+
Web Workers
+
Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’intéraction.
+
XMLHttpRequest Niveau 2
+
Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'AJAX.
+
Moteurs JavaScript à compilation JIT (juste à temps)
+
La nouvelle génération de moteurs JavaScript est bien plus puissante et permet de meilleures performances dans l'interprétation du langage.
+
API Historique
+
Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.
+
L'attribut contentEditable : transformer un site web en un wiki !
+
HTML5 a standardisé l'attribut contentEditable : apprenez-en plus sur cette fonctionnalité.
+
Glisser et déposer
+
L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein d'une page web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.
+
Gestion du focus en HTML
+
Les nouveaux attributs HTML5 activeElement et hasFocus sont gérés.
+
Gestionnaires de protocoles web
+
Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permet de contrôler le rendu des animations et ainsi d'obtenir une performance optimale.
+
API Plein écran
+
Contrôle l'utilisation de la totalité de l'écran pour afficher une page ou une application web sans l'interface du navigateur
+
API Verrouillage de la souris
+
Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
+
Évènement online et offline
+
Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.
+
+ +

Accès aux périphériques

+ +
+
Utiliser l'API Camera
+
Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
+
Évènements tactiles
+
Des gestionnaires pour réagir aux évènements créés par un utilisateur qui touche un écran tactile.
+
Utilisation de la Geolocalisation
+
Permet au navigateur de situer l'utilisateur en utilisant la géolocalisation.
+
Détection de l'orientation de l'appareil
+
Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page suivant l'orientation de l'appareil (portrait ou paysage).
+
API Verrouillage de la souris
+
Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
+
+ +

Style

+ +

CSS a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le CSS3, bien que CSS ne soit plus une spécification monolithique et que les différent modules ne soient pas tous au niveau 3 : certains sont au niveau 1,  d'autres au niveau 4, mais tous les niveaux intermédiaires sont couverts.

+ +
+
Nouveaux styles d'arrière-plan
+
Il est maintenant possible créer une ombre pour une boîte en utilisant {{cssxref("box-shadow")}}, et de définir plusieurs arrière-plans.
+
Des bordures plus classes
+
Il est maintenant non seulement possible d'utiliser des images pour styler les bordures en utilisant {{cssxref("border-image")}}, mais aussi de faire des bords arrondis grâce à la propriété {{cssxref("border-radius")}}.
+
Animer vos styles
+
En utilisant les Transitions CSS pour animer différents états, ou en utilisant les Animations CSS pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.
+
Amélioration de la typographie
+
Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler {{cssxref("text-overflow")}} et la césure automatique. Ils peuvent rajouter une ombre et des décorations plus fines. Des polices personnalisées peuvent être utilisées grâce {{cssxref("@font-face")}}.
+
Nouvelles options de mise en page
+
Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : Colonnes CSS et boîtes flexibles CSS.
+
+
+
diff --git a/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..c885937350 --- /dev/null +++ b/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,41 @@ +--- +title: Introduction à HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

+ +

Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : HTML5. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site CanIUse .

+ +

Indiquer que le document contient du HTML5 grâce au doctype HTML5

+ +

La doctype HTML5 est très simple, il s'agit simplement de ceci :

+ +
<!DOCTYPE html>
+
+ +

Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.

+ +

Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

+ +

Déclarer l'encodage de caractères avec <meta charset>

+ +

La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :

+ +
<meta charset="UTF-8">
+ +

Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.

+ +

Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.

+ +

Utiliser le nouveau parser HTML5

+ +

Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.

+ +

Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.

+ +

Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !

diff --git a/files/fr/web/guide/html/html5/index.html b/files/fr/web/guide/html/html5/index.html deleted file mode 100644 index 02f73932c6..0000000000 --- a/files/fr/web/guide/html/html5/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :

- -

Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé HTML5 & Cie et est souvent juste abrégé en HTML5.

- -

Conçue pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait le lien vers de nombreuses ressources sur les technologies HTML5 classées dans différents groupes suivant leur(s) fonction(s).

- - - -
-
-

Sémantique

- -
-
Introduction à HTML5
-
Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.
-
Sections et structure des documents avec HTML5
-
Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} et {{HTMLElement("hgroup")}}.
-
Utilisation de l'audio et de la video en HTML5
-
Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans vos pages de nouveaux contenus multimédias.
-
Formulaires en HTML5
-
Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut {{htmlattrxref("type", "input")}} de {{HTMLElement("input")}} et le nouvel élément {{HTMLElement("output")}}.
-
- -
-
Nouveaux éléments d'HTML5
-
En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou encore {{HTMLElement("meter")}}.
-
Amélioration de {{HTMLElement("iframe")}}
-
En utilisant les attributs {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, et {{htmlattrxref("srcdoc", "iframe")}}, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément {{HTMLElement("iframe")}}.
-
MathML
-
Permet d'insérer des formules mathématiques directement dans les pages web.
-
Parseur conforme à HTML5
-
Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.
-
- -

Connectivité

- -
-
Web Sockets
-
Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.
-
Évènements envoyés par le serveur
-
Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel selon lequel le serveur ne peut envoyer des données qu'en réponse à une demande effectuée par le client.
-
WebRTC
-
RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.
-
- -

Hors-connexion et Stockage

- -
-
Ressources hors connexion : l'Application Cache
-
Firefox gère complètement la spécification des ressources hors connexion de HTML5.
-
Évènement online et offline
-
Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.
-
Stockage de session et persistance côté client du WHATWG (ou DOM Storage)
-
Le stockage de session et la persistance côté client permettent aux applications web de stocker des données structurées du côté du client.
-
IndexedDB
-
Est un standard web pour stocker dans le navigateur des volumes importants de données structurées, et permettant d'effectuer des recherches rapides dans ces données en utilisant des index.
-
Utilisation de fichiers depuis des applications web
-
La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut {{htmlattrxref("multiple", "input")}} de l'élément HTML {{HTMLElement("input")}} {{htmlattrxref("type", "input")}}="file".
-
- -

Multimédia

- -
-
Utilisation de l'audio et de la video en HTML5
-
Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans les pages web de nouveaux contenus multimédia.
-
WebRTC
-
RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.
-
Utiliser l'API Camera
-
Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
-
Track et WebVTT
-
L'élément {{HTMLElement("track")}} permet de sous-titrer et de chapitrer. WebVTT est un format pour marquer du texte par rapport à une durée.
-
- -

3D, Graphiques et Effets

- -
-
Tutoriel Canvas
-
Découvrez le nouvel élément {{HTMLElement("canvas")}} et apprennez à dessiner des graphiques et autres objets dans Firefox.
-
API de texte HTML5 pour les éléments <canvas>
-
Les éléments {{HTMLElement("canvas")}} gèrent également l'API texte d'HTML5.
-
WebGL
-
WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments {{HTMLElement("canvas")}}.
-
SVG
-
Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.
-
-
- -
-

Performance et Intégration

- -
-
Web Workers
-
Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’intéraction.
-
XMLHttpRequest Niveau 2
-
Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'AJAX.
-
Moteurs JavaScript à compilation JIT (juste à temps)
-
La nouvelle génération de moteurs JavaScript est bien plus puissante et permet de meilleures performances dans l'interprétation du langage.
-
API Historique
-
Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.
-
L'attribut contentEditable : transformer un site web en un wiki !
-
HTML5 a standardisé l'attribut contentEditable : apprenez-en plus sur cette fonctionnalité.
-
Glisser et déposer
-
L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein d'une page web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.
-
Gestion du focus en HTML
-
Les nouveaux attributs HTML5 activeElement et hasFocus sont gérés.
-
Gestionnaires de protocoles web
-
Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permet de contrôler le rendu des animations et ainsi d'obtenir une performance optimale.
-
API Plein écran
-
Contrôle l'utilisation de la totalité de l'écran pour afficher une page ou une application web sans l'interface du navigateur
-
API Verrouillage de la souris
-
Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
-
Évènement online et offline
-
Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.
-
- -

Accès aux périphériques

- -
-
Utiliser l'API Camera
-
Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
-
Évènements tactiles
-
Des gestionnaires pour réagir aux évènements créés par un utilisateur qui touche un écran tactile.
-
Utilisation de la Geolocalisation
-
Permet au navigateur de situer l'utilisateur en utilisant la géolocalisation.
-
Détection de l'orientation de l'appareil
-
Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page suivant l'orientation de l'appareil (portrait ou paysage).
-
API Verrouillage de la souris
-
Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
-
- -

Style

- -

CSS a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le CSS3, bien que CSS ne soit plus une spécification monolithique et que les différent modules ne soient pas tous au niveau 3 : certains sont au niveau 1,  d'autres au niveau 4, mais tous les niveaux intermédiaires sont couverts.

- -
-
Nouveaux styles d'arrière-plan
-
Il est maintenant possible créer une ombre pour une boîte en utilisant {{cssxref("box-shadow")}}, et de définir plusieurs arrière-plans.
-
Des bordures plus classes
-
Il est maintenant non seulement possible d'utiliser des images pour styler les bordures en utilisant {{cssxref("border-image")}}, mais aussi de faire des bords arrondis grâce à la propriété {{cssxref("border-radius")}}.
-
Animer vos styles
-
En utilisant les Transitions CSS pour animer différents états, ou en utilisant les Animations CSS pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.
-
Amélioration de la typographie
-
Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler {{cssxref("text-overflow")}} et la césure automatique. Ils peuvent rajouter une ombre et des décorations plus fines. Des polices personnalisées peuvent être utilisées grâce {{cssxref("@font-face")}}.
-
Nouvelles options de mise en page
-
Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : Colonnes CSS et boîtes flexibles CSS.
-
-
-
diff --git a/files/fr/web/guide/html/html5/introduction_to_html5/index.html b/files/fr/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index b0da2e9209..0000000000 --- a/files/fr/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Introduction à HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/HTML/Introduction_to_HTML5 ---- -

HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

- -

Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : HTML5. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site CanIUse .

- -

Indiquer que le document contient du HTML5 grâce au doctype HTML5

- -

La doctype HTML5 est très simple, il s'agit simplement de ceci :

- -
<!DOCTYPE html>
-
- -

Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.

- -

Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

- -

Déclarer l'encodage de caractères avec <meta charset>

- -

La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :

- -
<meta charset="UTF-8">
- -

Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.

- -

Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.

- -

Utiliser le nouveau parser HTML5

- -

Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.

- -

Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.

- -

Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 7f04ea0e65..5734fe717a 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2517,14 +2517,14 @@ /ja/docs/HTML/Forms/Styling_HTML_forms /ja/docs/Learn/Forms/Styling_web_forms /ja/docs/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls /ja/docs/HTML/Global_attributes /ja/docs/Web/HTML/Global_attributes -/ja/docs/HTML/HTML5 /ja/docs/Web/Guide/HTML/HTML5 +/ja/docs/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/HTML/HTML5/Forms_in_HTML5 /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates /ja/docs/HTML/HTML5/HTML5_Tags_List /ja/docs/conflicting/Web/HTML/Element -/ja/docs/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/Web/Guide/HTML/HTML5 +/ja/docs/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/HTML/HTML5/HTML5_element_list /ja/docs/conflicting/Web/HTML/Element /ja/docs/HTML/HTML5/HTML5_element_list-redirect-1 /ja/docs/conflicting/Web/HTML/Element /ja/docs/HTML/HTML5/HTML5_のフォーム /ja/docs/Learn/Forms -/ja/docs/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ja/docs/HTML/HTML5/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/HTML/HTML_Elements /ja/docs/Web/HTML/Element /ja/docs/HTML/HTML_Elements/Audio /ja/docs/Web/HTML/Element/audio /ja/docs/HTML/HTML_Elements/Heading_Elements /ja/docs/Web/HTML/Element/Heading_Elements @@ -2568,7 +2568,7 @@ /ja/docs/HTML/HTML_Extensions /ja/docs/orphaned/Web/HTML/HTML_Extensions /ja/docs/HTML/Inline_elements /ja/docs/Web/HTML/Inline_elements /ja/docs/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML -/ja/docs/HTML/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ja/docs/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/HTML/Supported_media_formats /ja/docs/Web/Media/Formats /ja/docs/HTML/Using_HTML5_audio_and_video /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content @@ -4604,10 +4604,13 @@ /ja/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript /ja/docs/Learn/Forms/Sending_forms_through_JavaScript /ja/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /ja/docs/Learn/Forms/Styling_web_forms /ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls +/ja/docs/Web/Guide/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 +/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation /ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /ja/docs/Web/Guide/HTML/HTML5/Forms_in_HTML5 /ja/docs/Learn/Forms -/ja/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/Web/Guide/HTML/HTML5 +/ja/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/Web/Guide/HTML/HTML5/HTML5_element_list /ja/docs/conflicting/Web/HTML/Element /ja/docs/Web/Guide/HTML/HTML5/HTML5_のフォーム /ja/docs/Learn/Forms +/ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid /ja/docs/conflicting/Learn/HTML/Introduction_to_HTML /ja/docs/Web/Guide/Performance/Using_web_workers /ja/docs/Web/API/Web_Workers_API/Using_web_workers @@ -4671,13 +4674,13 @@ /ja/docs/Web/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls /ja/docs/Web/HTML/Forms_in_HTML /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates /ja/docs/Web/HTML/Global_attributes/dropzone /ja/docs/orphaned/Web/HTML/Global_attributes/dropzone -/ja/docs/Web/HTML/HTML5 /ja/docs/Web/Guide/HTML/HTML5 -/ja/docs/Web/HTML/HTML5/Constraint_validation /ja/docs/Web/Guide/HTML/HTML5/Constraint_validation +/ja/docs/Web/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 +/ja/docs/Web/HTML/HTML5/Constraint_validation /ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /ja/docs/Web/HTML/HTML5/Forms_in_HTML5 /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/ja/docs/Web/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/Web/Guide/HTML/HTML5 +/ja/docs/Web/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/Web/HTML/HTML5/HTML5_element_list /ja/docs/conflicting/Web/HTML/Element /ja/docs/Web/HTML/HTML5/HTML5_のフォーム /ja/docs/Learn/Forms -/ja/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ja/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/HTML/HTML_Elements /ja/docs/Web/HTML/Element /ja/docs/Web/HTML/HTML_Elements/Audio /ja/docs/Web/HTML/Element/audio /ja/docs/Web/HTML/HTML_Elements/Heading_Elements /ja/docs/Web/HTML/Element/Heading_Elements @@ -4720,7 +4723,7 @@ /ja/docs/Web/HTML/HTML_Elements/var /ja/docs/Web/HTML/Element/var /ja/docs/Web/HTML/HTML_Extensions /ja/docs/orphaned/Web/HTML/HTML_Extensions /ja/docs/Web/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML -/ja/docs/Web/HTML/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ja/docs/Web/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /ja/docs/Glossary/speculative_parsing /ja/docs/Web/HTML/Preloading_content /ja/docs/orphaned/Web/HTML/Preloading_content /ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 7f29bb115b..c036e9e759 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -33933,41 +33933,6 @@ "maripo" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-08-02T11:47:39.233Z", - "contributors": [ - "8tak4", - "mfuji09", - "wbamberg", - "tmtarr", - "teoli", - "isdh", - "ethertank", - "sii", - "Potappo", - "vigia122", - "saneyuki_s", - "shirayuki", - "Dwchiang", - "Marsf" - ] - }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2020-10-16T13:41:03.752Z", - "contributors": [ - "mfuji09", - "Uemmra3" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2020-01-19T16:30:15.396Z", - "contributors": [ - "mfuji09", - "teoli", - "ethertank", - "Potappo" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2020-08-09T13:53:14.893Z", "contributors": [ @@ -52744,6 +52709,41 @@ "superyusuke" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-08-02T11:47:39.233Z", + "contributors": [ + "8tak4", + "mfuji09", + "wbamberg", + "tmtarr", + "teoli", + "isdh", + "ethertank", + "sii", + "Potappo", + "vigia122", + "saneyuki_s", + "shirayuki", + "Dwchiang", + "Marsf" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-10-16T13:41:03.752Z", + "contributors": [ + "mfuji09", + "Uemmra3" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2020-01-19T16:30:15.396Z", + "contributors": [ + "mfuji09", + "teoli", + "ethertank", + "Potappo" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2020-10-15T21:25:54.776Z", "contributors": [ diff --git a/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..a392493e50 --- /dev/null +++ b/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,330 @@ +--- +title: 制約検証 +slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation +tags: + - CSS + - Guide + - HTML5 + - NeedsContent + - Selectors +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +original_slug: Web/Guide/HTML/HTML5/Constraint_validation +--- +

ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。HTML5 では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする制約検証が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は制約検証 API を使用して検査することができます。

+ +

これらの概念の基本的な入門 (サンプル付き) は、フォーム検証チュートリアルをご覧ください。

+ +
メモ: HTML5 の制約検証は、サーバー側での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。
+ +

組込みの基本的な制約

+ +

HTML5 では、基本的な制約は 2通りの方法で定義されます。

+ + + +

意味を持つ入力型

+ +

{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。

+ + + + + + + + + + + + + + + + + + + + + +
入力型制約の説明関連付けられた違反
<input type="URL">値は絶対 URL であり、URL Living Standard で定義された通りでなければなりません。TypeMismatch 制約違反
<input type="email">値は統語的に妥当なメールアドレス、ふつうは username@hostname.tld の書式でなければなりません。TypeMismatch 制約違反
+ +

これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、Type mismatch 制約違反が発生します。

+ +

なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。

+ + + +

上記で述べた type 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性属性をサポートする入力タイプとりうる値制約の説明関連する違反
patterntext, search, url, tel, email, passwordJavaScript 正規表現 (ECMAScript 5 global, ignoreCase と multiline フラグが無効でコンパイルされたもの)値はパターンに一致する必要があります。patternMismatch 制約違反
minrange, number有効な数値値以上であること。rangeUnderflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
maxrange, number有効な数値値以下であること。rangeOverflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
requiredtext, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。none Boolean 属性のため: 存在すれば true, 存在しなければ false値は必須 (セットされた場合)。valueMissing 制約違反
stepdate日の整数値step がリテラル値 any にセットされていない場合、値は min + step の整数倍stepMismatch 制約違反
month月の整数値
week週の整数値
datetime, datetime-local, time秒の整数値
range, number整数値
minlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。tooShort 制約違反
maxlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は属性値を超えない。tooLong 制約違反
+ +

制約検証プロセス

+ +

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

+ + + +

Calling checkValidity() is called statically validating the constraints, while calling reportValidity() or submitting the form is called interactively validating the constraints.

+ +
Note: + + +
+ +

HTML5 制約 API を使用した複雑な制約

+ +

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.

+ +

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+ +

Constraint combining several fields: Postal code validation

+ +

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

+ +
+

注: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.

+
+ +

As an example, we will add a script checking the constraint validation for this simple form:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

This displays the following form:

+ +

{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}

+ +

First, we write a function checking the constraint itself:

+ +
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

You can see a live example of the postal code validation.

+ +

アップロード前のファイルサイズの制限

+ +

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the field.setCustomValidity() method, with another JavaScript API, here the File API.

+ +

Here is the HTML part:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

This displays:

+ +

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

+ +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+ +

Finally we hook the method with the correct event:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

You can see a live example of the File size constraint validation.

+ +

制約検証における表示の整形

+ +

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+ +

要素の外見の制御

+ +

The look of elements can be controlled via CSS pseudo-classes.

+ +

CSS の :required および :optional 疑似クラス

+ +

The {{cssxref(':required')}} and {{cssxref(':optional')}} pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

+ +

:placeholder-shown CSS pseudo-class

+ +

See {{cssxref(':placeholder-shown')}}

+ +

CSS の :valid :invalid 疑似クラス

+ +

The {{cssxref(':valid')}} and {{cssxref(':invalid')}} pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+ +

制約違反の文字列の制御

+ +

The following items can help with controlling the text of a constraint violation:

+ + diff --git a/files/ja/orphaned/web/guide/html/html5/index.html b/files/ja/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..d78bba9d7c --- /dev/null +++ b/files/ja/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,172 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。

+ +

このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。

+ + + +
+
+

Semantics

+ +
+
HTML5 のセクションとアウトライン
+
HTML5 ではアウトラインとセクションに関する要素が追加されました。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}, {{HTMLElement("hgroup")}}
+
HTML5 の audio 要素と video 要素の利用
+
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みや操作を可能にします。
+
フォームの改善
+
HTML5 ではウェブフォームに様々な改善が施されています。制約バリデーション API、多数の新しい属性、 {{HTMLElement("input")}} 要素の属性の新しい {{htmlattrxref("type", "input")}} の値の追加。そして新要素として {{HTMLElement("output")}} が追加されています。
+
新しいセマンティック要素
+
セクション、メディア、フォーム要素のほかに、 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} あるいは {{HTMLElement("meter")}} のような多くの新しい要素、妥当な HTML5 の要素はますます増えています。
+
{{HTMLElement("iframe")}} の改善
+
{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("srcdoc", "iframe")}} 属性を使用することで、著者は今やセキュリティレベルを明確にし、望まれた {{HTMLElement("iframe")}} 要素の描画が可能となりました。
+
MathML
+
HTML 文書に数式を直接埋め込むことができます。
+
HTML5 の紹介
+
この記事では、ウェブデザインやウェブアプリケーションでの HTML5 の利用方法を紹介します。
+
HTML5 リファレンスガイド
+
マークアップ作成ツール、コード例、ウェブ開発者ツールを含む HTML5 のクイックリファレンスシートです。このガイドは利用やアクセスがしやすいようにダウンロードできます。このページは W3C の支援によって、 HTML5 を使用した基本的な親しみやすさと経験のために作成されました。
+
ダウンロード可能な HTML5 ガイド
+
HTML5 のクイックガイドで、よくある HTML タグと新しい HTML5 のタグを含みます。 Downloadable in PDF and PNG formats.
+
HTML5 虎の巻 
+
HTML 5、要素、イベント属性、互換性をマスターしたいと思う初心者向けの HTML 5 の小さな虎の巻です。
+
HTML5 準拠のパーサー
+
HTML 文書のバイト列を DOM に変換するパーサーは拡張され、妥当ではない HTML に直面したときも含め、すべての場合で使用する振る舞いを詳細に定義されるようになりました。これによって、予測可能性や、 HTML5 準拠のブラウザー間で相互運用性が格段に高まりました。
+
+ +

Connectivity

+ +
+
Web Socket
+
Web Socket はページとサーバーが永続的な接続を作成し、 HTML ではないデータを交換することを可能にします 。
+
Server-sent event
+
サーバーがクライアントからのリクエストに対するレスポンスとしてのみデータを送ることができたという、古典的な枠組みより、サーバーがクライアントにイベントを送出することが可能になります。
+
WebRTC
+
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
+
+ +

Offline & storage

+ +

オフラインリソース: アプリケーションキャッシュ

+ +
+
Firefox は HTML5 のオフラインリソースの仕様に完全に対応しています。その他のほとんどのブラウザーは、ある程度のレベルでオフラインリソースに対応しています。
+
オンラインおよびオフラインのイベント
+
Firefox 3 は WHATWG の、アプリケーションや拡張機能にアクティブなインターネット接続があるかどうかを検出させ、接続の成功やダウンも検出する、オンラインおよびオフラインのイベントをサポートしています。
+
WHATWG のクライアントサイドセッションと、 DOM Storage として知られる永続的なストレージ
+
クライアントサイドセッションと永続的なストレージは、ウェブアプリケーションが、構築されたデータをクライアントサイドに保存することを可能とします。
+
IndexedDB
+
IndexedDB は、インデックスを使って、ブラウザーで大量に構造化されたデータの保存と、このデータの高性能な検索のためのウェブ標準です。
+
ウェブアプリケーションからファイルを扱う
+
新しい HTML5 File API のサポートが Gecko に加えられており、ウェブアプリケーションはユーザーによって選択されたローカルファイルにアクセスすることができるようになっています。これは、type が file である  {{HTMLElement("input")}} HTML 要素の新しい multiple 属性を使った、複数のファイル選択のサポートを含みます。 FileReader もあります。
+
+ +

Multimedia

+ +
+
HTML5 の audio 要素 と video要素の利用
+
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みと操作を可能にします。
+
WebRTC
+
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
+
Camera API の利用
+
コンピューターのカメラの使用、操作、およびカメラ画像を格納することができます。
+
Track and WebVTT
+
{{HTMLElement("track")}} 要素は字幕とチャプターを可能にします。 WebVTT はテキストトラックフォーマットです。
+
+ +

2D/3D graphics AND effects

+ +
+
Canvas チュートリアル
+
新しい {{HTMLElement("canvas")}} 要素についてと、 Firefox でどのようにグラフや他のオブジェクトを描画するかを学習します。
+
HTML5 text API for <canvas> elements
+
HTML5 の text API が {{HTMLElement("canvas")}} 要素によってサポートされます。
+
WebGL
+
WebGL は、 HTML5 の {{HTMLElement("canvas")}} 要素で利用できる、OpenGL ES 2.0 に厳密に従った API を提供することで、 3D グラフィックスを Web にもたらします。
+
SVG
+
ベクター画像の XML ベースのフォーマット。HTML5 では SVG を直接文書に埋め込む事が可能になりました。
+
+
+ +
+

Performance and Integration

+ +
+
Web Worker
+
JavaScript の評価をバックグラウンドのスレッドに委譲することを可能にして、これらの動作がインタラクティブなイベントを低速にすることを防ぐことを可能にします。
+
XMLHttpRequest Level 2
+
ページのいくつかのパーツの非同期に取得することを可能にして、時間とユーザーのアクションによって変化する、動的なコンテンツを表示することを可能とします。これは Ajax の背後にある技術です。
+
JIT-compiling JavaScript engines
+
新世代 の JavaScript エンジンは以前よりはるかに強力で、パフォーマンスの向上を導きます。
+
History API
+
ブラウザーの閲覧履歴の操作ができます。特に対話的に新しい情報を読み込むページに於いて有益な API です。
+
contentEditable 属性で、あなたのウェブサイトが wiki に変身！
+
HTML5 は contentEditable 属性を標準化しました。この機能についてより学びます。
+
ドラッグ＆ドロップ API
+
HTML5 の ドラッグ＆ドロップ API は、ウェブサイト内部あるいはウェブサイト間の、アイテムのドラッグ及びドロップのサポートを可能にします。これはまた、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API 提供します。
+
HTML でのフォーカスの管理
+
新しい HTML5 の activeElement と hasFocus 属性がサポートされています。
+
Web ベースのプロトコルハンドラー
+
navigator.registerProtocolHandler() メソッドを使って、ウェブアプリケーションをプロトコルのハンドラーとして登録することができます。
+
requestAnimationFrame
+
アニメーションのレンダリングのに最適なチューニングが施された新しいメソッド。
+
Fullscreen API
+
ブラウザの UI を表示せずに、ウェブページやアプリケーションがスクリーン全体の使用を制御します。
+
Pointer Lock API
+
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
+
オンラインおよびオフラインのイベント
+
オフラインで有能な良い Web アプリケーションを構築するため、アプリケーションが実際にオフラインであるときのことを知る必要があります。ついでに、アプリケーションが再度オンライン状態を返したときのことも知る必要があります。
+
+ +

Device access

+ +
+
Camera API の利用
+
コンピュータのカメラからの画像の使用、操作、保存が可能になります。
+
Touch events
+
閲覧者のタッチスクリーン押下によって発生するイベントに対応するハンドラ。
+
Geolocation の利用
+
ブラウザが閲覧者の現在位置を取得し、これを利用する事が出来ます。
+
デバイスの方向の検出
+
ブラウザを起動しているデバイスが方向を変えたときに、その情報を得られるようにします。例えば、デバイスの姿勢に反応するゲームを作るための入力デバイス、あるいは縦長または横長というスクリーンの方向に、ページのレイアウトを適応するために利用できます。
+
Pointer Lock API
+
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
+
+ +

StylIng

+ +

CSS は、さらに複雑な方法で要素を形成することができるように拡張されてきました。 CSS はもう一枚岩の仕様ではなく、異なるモジュールがすべてレベル 3 ではありませんが、これはしばしば CSS3 として参照されます。いくつかのモジュールはレベル 1 、あるモジュールはレベル 4 で、その中間のすべてのレベルをカバーしています。

+ +
+
背景のスタイル付けの新機能
+
{{cssxref("box-shadow")}}、 複数の背景、 CSS の {{cssxref("filter")}} を用いてボックスに影をつけることができるようになりました。これらは Advanced box effects を読むことで知ることができます。
+
より飾った境界線
+
{{cssxref("border-image")}} およびそれに関連する個別指定プロパティを用いて枠線の形成に画像を使うことができるだけでなく、 {{cssxref("border-radius")}} プロパティによって角丸の枠線に対応しています。
+
スタイルのアニメーション
+
異なる状態にアニメーションするための CSS Transitions の使用、またはイベントの引き金無くページのパーツをアニメーションするための CSS Animations の使用により、ページの可動要素を操作することができます。
+
タイポグラフィの改善
+
著者には、より良いタイポグラフィに到達するための、より良いコントロールがあります。 {{cssxref("text-overflow")}} やハイフネーションはもちろん、影もコントロールでき、またはその装飾はより明確にコントロールすることができます。新しい {{cssxref("@font-face")}} @-規則のおかげで、特別な書体をダウンロードし、適用することができます。
+
新しい表象的なレイアウト
+
デザインの柔軟性の向上のため、二つの新しいレイアウトが加えられました。 CSS 段組みレイアウトと、 CSS フレックスボックスレイアウトです。
+
+
+
diff --git a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..e4aa5843c2 --- /dev/null +++ b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,27 @@ +--- +title: HTML5 の紹介 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。

+ +

HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。HTML5 のメインページに Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、CanIUse ウェブサイトを参照してください。

+ +

{{ 英語版章題("The HTML5 doctype") }}

+ +

HTML5  の DOCTYPE

+ +

HTML5 の DOCTYPE は非常にシンプルです。HTML コンテントで HTML5 を使用することを示すには、単純に以下のようにします：

+ +
<!DOCTYPE html>
+
+ +

この非常にシンプルな DOCTYPE は、現在 HTML5をサポートしていないブラウザでさえ、HTML の古くから存在する部分に HTML5の規格通りに入り込み、それらがサポートしない HTML5 の新機能を無視することを意味する、標準モードに切り替えます。

+ +
+

{{ languages( {"en": "en/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5"} ) }}

+
diff --git a/files/ja/web/guide/html/html5/constraint_validation/index.html b/files/ja/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index c0315fe912..0000000000 --- a/files/ja/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: 制約検証 -slug: Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guide - - HTML5 - - NeedsContent - - Selectors -translation_of: Web/Guide/HTML/HTML5/Constraint_validation ---- -

ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。HTML5 では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする制約検証が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は制約検証 API を使用して検査することができます。

- -

これらの概念の基本的な入門 (サンプル付き) は、フォーム検証チュートリアルをご覧ください。

- -
メモ: HTML5 の制約検証は、サーバー側での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。
- -

組込みの基本的な制約

- -

HTML5 では、基本的な制約は 2通りの方法で定義されます。

- - - -

意味を持つ入力型

- -

{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。

- - - - - - - - - - - - - - - - - - - - - -
入力型制約の説明関連付けられた違反
<input type="URL">値は絶対 URL であり、URL Living Standard で定義された通りでなければなりません。TypeMismatch 制約違反
<input type="email">値は統語的に妥当なメールアドレス、ふつうは username@hostname.tld の書式でなければなりません。TypeMismatch 制約違反
- -

これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、Type mismatch 制約違反が発生します。

- -

なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。

- - - -

上記で述べた type 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性属性をサポートする入力タイプとりうる値制約の説明関連する違反
patterntext, search, url, tel, email, passwordJavaScript 正規表現 (ECMAScript 5 global, ignoreCase と multiline フラグが無効でコンパイルされたもの)値はパターンに一致する必要があります。patternMismatch 制約違反
minrange, number有効な数値値以上であること。rangeUnderflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
maxrange, number有効な数値値以下であること。rangeOverflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
requiredtext, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。none Boolean 属性のため: 存在すれば true, 存在しなければ false値は必須 (セットされた場合)。valueMissing 制約違反
stepdate日の整数値step がリテラル値 any にセットされていない場合、値は min + step の整数倍stepMismatch 制約違反
month月の整数値
week週の整数値
datetime, datetime-local, time秒の整数値
range, number整数値
minlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。tooShort 制約違反
maxlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は属性値を超えない。tooLong 制約違反
- -

制約検証プロセス

- -

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

- - - -

Calling checkValidity() is called statically validating the constraints, while calling reportValidity() or submitting the form is called interactively validating the constraints.

- -
Note: - - -
- -

HTML5 制約 API を使用した複雑な制約

- -

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.

- -

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

- -

Constraint combining several fields: Postal code validation

- -

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

- -
-

注: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.

-
- -

As an example, we will add a script checking the constraint validation for this simple form:

- -
<form>
-    <label for="ZIP">ZIP : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">Country : </label>
-    <select id="Country">
-      <option value="ch">Switzerland</option>
-      <option value="fr">France</option>
-      <option value="de">Germany</option>
-      <option value="nl">The Netherlands</option>
-    </select>
-    <input type="submit" value="Validate">
-</form>
- -

This displays the following form:

- -

{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}

- -

First, we write a function checking the constraint itself:

- -
function checkZIP() {
-  // For each country, defines the pattern that the ZIP has to follow
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
-  };
-
-  // Read the country id
-  var country = document.getElementById("Country").value;
-
-  // Get the NPA field
-  var ZIPField = document.getElementById("ZIP");
-
-  // Build the constraint checker
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // Check it!
-  if (constraint.test(ZIPField.value)) {
-    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
-    // give a message about the format required for this country
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

You can see a live example of the postal code validation.

- -

アップロード前のファイルサイズの制限

- -

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the field.setCustomValidity() method, with another JavaScript API, here the File API.

- -

Here is the HTML part:

- -
<label for="FS">Select a file smaller than 75 kB : </label>
-<input type="file" id="FS">
- -

This displays:

- -

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

- -

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // If there is (at least) one file selected
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Check the constraint
-       FS.setCustomValidity("The selected file must not be larger than 75 kB");
-       return;
-     }
-  }
-  // No custom constraint violation
-  FS.setCustomValidity("");
-}
- -

Finally we hook the method with the correct event:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

You can see a live example of the File size constraint validation.

- -

制約検証における表示の整形

- -

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

- -

要素の外見の制御

- -

The look of elements can be controlled via CSS pseudo-classes.

- -

CSS の :required および :optional 疑似クラス

- -

The {{cssxref(':required')}} and {{cssxref(':optional')}} pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

- -

:placeholder-shown CSS pseudo-class

- -

See {{cssxref(':placeholder-shown')}}

- -

CSS の :valid :invalid 疑似クラス

- -

The {{cssxref(':valid')}} and {{cssxref(':invalid')}} pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

- -

制約違反の文字列の制御

- -

The following items can help with controlling the text of a constraint violation:

- - diff --git a/files/ja/web/guide/html/html5/index.html b/files/ja/web/guide/html/html5/index.html deleted file mode 100644 index 70a1bf5a71..0000000000 --- a/files/ja/web/guide/html/html5/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - References - - Web Development -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。

- -

このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。

- - - -
-
-

Semantics

- -
-
HTML5 のセクションとアウトライン
-
HTML5 ではアウトラインとセクションに関する要素が追加されました。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}, {{HTMLElement("hgroup")}}
-
HTML5 の audio 要素と video 要素の利用
-
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みや操作を可能にします。
-
フォームの改善
-
HTML5 ではウェブフォームに様々な改善が施されています。制約バリデーション API、多数の新しい属性、 {{HTMLElement("input")}} 要素の属性の新しい {{htmlattrxref("type", "input")}} の値の追加。そして新要素として {{HTMLElement("output")}} が追加されています。
-
新しいセマンティック要素
-
セクション、メディア、フォーム要素のほかに、 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} あるいは {{HTMLElement("meter")}} のような多くの新しい要素、妥当な HTML5 の要素はますます増えています。
-
{{HTMLElement("iframe")}} の改善
-
{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("srcdoc", "iframe")}} 属性を使用することで、著者は今やセキュリティレベルを明確にし、望まれた {{HTMLElement("iframe")}} 要素の描画が可能となりました。
-
MathML
-
HTML 文書に数式を直接埋め込むことができます。
-
HTML5 の紹介
-
この記事では、ウェブデザインやウェブアプリケーションでの HTML5 の利用方法を紹介します。
-
HTML5 リファレンスガイド
-
マークアップ作成ツール、コード例、ウェブ開発者ツールを含む HTML5 のクイックリファレンスシートです。このガイドは利用やアクセスがしやすいようにダウンロードできます。このページは W3C の支援によって、 HTML5 を使用した基本的な親しみやすさと経験のために作成されました。
-
ダウンロード可能な HTML5 ガイド
-
HTML5 のクイックガイドで、よくある HTML タグと新しい HTML5 のタグを含みます。 Downloadable in PDF and PNG formats.
-
HTML5 虎の巻 
-
HTML 5、要素、イベント属性、互換性をマスターしたいと思う初心者向けの HTML 5 の小さな虎の巻です。
-
HTML5 準拠のパーサー
-
HTML 文書のバイト列を DOM に変換するパーサーは拡張され、妥当ではない HTML に直面したときも含め、すべての場合で使用する振る舞いを詳細に定義されるようになりました。これによって、予測可能性や、 HTML5 準拠のブラウザー間で相互運用性が格段に高まりました。
-
- -

Connectivity

- -
-
Web Socket
-
Web Socket はページとサーバーが永続的な接続を作成し、 HTML ではないデータを交換することを可能にします 。
-
Server-sent event
-
サーバーがクライアントからのリクエストに対するレスポンスとしてのみデータを送ることができたという、古典的な枠組みより、サーバーがクライアントにイベントを送出することが可能になります。
-
WebRTC
-
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
-
- -

Offline & storage

- -

オフラインリソース: アプリケーションキャッシュ

- -
-
Firefox は HTML5 のオフラインリソースの仕様に完全に対応しています。その他のほとんどのブラウザーは、ある程度のレベルでオフラインリソースに対応しています。
-
オンラインおよびオフラインのイベント
-
Firefox 3 は WHATWG の、アプリケーションや拡張機能にアクティブなインターネット接続があるかどうかを検出させ、接続の成功やダウンも検出する、オンラインおよびオフラインのイベントをサポートしています。
-
WHATWG のクライアントサイドセッションと、 DOM Storage として知られる永続的なストレージ
-
クライアントサイドセッションと永続的なストレージは、ウェブアプリケーションが、構築されたデータをクライアントサイドに保存することを可能とします。
-
IndexedDB
-
IndexedDB は、インデックスを使って、ブラウザーで大量に構造化されたデータの保存と、このデータの高性能な検索のためのウェブ標準です。
-
ウェブアプリケーションからファイルを扱う
-
新しい HTML5 File API のサポートが Gecko に加えられており、ウェブアプリケーションはユーザーによって選択されたローカルファイルにアクセスすることができるようになっています。これは、type が file である  {{HTMLElement("input")}} HTML 要素の新しい multiple 属性を使った、複数のファイル選択のサポートを含みます。 FileReader もあります。
-
- -

Multimedia

- -
-
HTML5 の audio 要素 と video要素の利用
-
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みと操作を可能にします。
-
WebRTC
-
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
-
Camera API の利用
-
コンピューターのカメラの使用、操作、およびカメラ画像を格納することができます。
-
Track and WebVTT
-
{{HTMLElement("track")}} 要素は字幕とチャプターを可能にします。 WebVTT はテキストトラックフォーマットです。
-
- -

2D/3D graphics AND effects

- -
-
Canvas チュートリアル
-
新しい {{HTMLElement("canvas")}} 要素についてと、 Firefox でどのようにグラフや他のオブジェクトを描画するかを学習します。
-
HTML5 text API for <canvas> elements
-
HTML5 の text API が {{HTMLElement("canvas")}} 要素によってサポートされます。
-
WebGL
-
WebGL は、 HTML5 の {{HTMLElement("canvas")}} 要素で利用できる、OpenGL ES 2.0 に厳密に従った API を提供することで、 3D グラフィックスを Web にもたらします。
-
SVG
-
ベクター画像の XML ベースのフォーマット。HTML5 では SVG を直接文書に埋め込む事が可能になりました。
-
-
- -
-

Performance and Integration

- -
-
Web Worker
-
JavaScript の評価をバックグラウンドのスレッドに委譲することを可能にして、これらの動作がインタラクティブなイベントを低速にすることを防ぐことを可能にします。
-
XMLHttpRequest Level 2
-
ページのいくつかのパーツの非同期に取得することを可能にして、時間とユーザーのアクションによって変化する、動的なコンテンツを表示することを可能とします。これは Ajax の背後にある技術です。
-
JIT-compiling JavaScript engines
-
新世代 の JavaScript エンジンは以前よりはるかに強力で、パフォーマンスの向上を導きます。
-
History API
-
ブラウザーの閲覧履歴の操作ができます。特に対話的に新しい情報を読み込むページに於いて有益な API です。
-
contentEditable 属性で、あなたのウェブサイトが wiki に変身！
-
HTML5 は contentEditable 属性を標準化しました。この機能についてより学びます。
-
ドラッグ＆ドロップ API
-
HTML5 の ドラッグ＆ドロップ API は、ウェブサイト内部あるいはウェブサイト間の、アイテムのドラッグ及びドロップのサポートを可能にします。これはまた、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API 提供します。
-
HTML でのフォーカスの管理
-
新しい HTML5 の activeElement と hasFocus 属性がサポートされています。
-
Web ベースのプロトコルハンドラー
-
navigator.registerProtocolHandler() メソッドを使って、ウェブアプリケーションをプロトコルのハンドラーとして登録することができます。
-
requestAnimationFrame
-
アニメーションのレンダリングのに最適なチューニングが施された新しいメソッド。
-
Fullscreen API
-
ブラウザの UI を表示せずに、ウェブページやアプリケーションがスクリーン全体の使用を制御します。
-
Pointer Lock API
-
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
-
オンラインおよびオフラインのイベント
-
オフラインで有能な良い Web アプリケーションを構築するため、アプリケーションが実際にオフラインであるときのことを知る必要があります。ついでに、アプリケーションが再度オンライン状態を返したときのことも知る必要があります。
-
- -

Device access

- -
-
Camera API の利用
-
コンピュータのカメラからの画像の使用、操作、保存が可能になります。
-
Touch events
-
閲覧者のタッチスクリーン押下によって発生するイベントに対応するハンドラ。
-
Geolocation の利用
-
ブラウザが閲覧者の現在位置を取得し、これを利用する事が出来ます。
-
デバイスの方向の検出
-
ブラウザを起動しているデバイスが方向を変えたときに、その情報を得られるようにします。例えば、デバイスの姿勢に反応するゲームを作るための入力デバイス、あるいは縦長または横長というスクリーンの方向に、ページのレイアウトを適応するために利用できます。
-
Pointer Lock API
-
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
-
- -

StylIng

- -

CSS は、さらに複雑な方法で要素を形成することができるように拡張されてきました。 CSS はもう一枚岩の仕様ではなく、異なるモジュールがすべてレベル 3 ではありませんが、これはしばしば CSS3 として参照されます。いくつかのモジュールはレベル 1 、あるモジュールはレベル 4 で、その中間のすべてのレベルをカバーしています。

- -
-
背景のスタイル付けの新機能
-
{{cssxref("box-shadow")}}、 複数の背景、 CSS の {{cssxref("filter")}} を用いてボックスに影をつけることができるようになりました。これらは Advanced box effects を読むことで知ることができます。
-
より飾った境界線
-
{{cssxref("border-image")}} およびそれに関連する個別指定プロパティを用いて枠線の形成に画像を使うことができるだけでなく、 {{cssxref("border-radius")}} プロパティによって角丸の枠線に対応しています。
-
スタイルのアニメーション
-
異なる状態にアニメーションするための CSS Transitions の使用、またはイベントの引き金無くページのパーツをアニメーションするための CSS Animations の使用により、ページの可動要素を操作することができます。
-
タイポグラフィの改善
-
著者には、より良いタイポグラフィに到達するための、より良いコントロールがあります。 {{cssxref("text-overflow")}} やハイフネーションはもちろん、影もコントロールでき、またはその装飾はより明確にコントロールすることができます。新しい {{cssxref("@font-face")}} @-規則のおかげで、特別な書体をダウンロードし、適用することができます。
-
新しい表象的なレイアウト
-
デザインの柔軟性の向上のため、二つの新しいレイアウトが加えられました。 CSS 段組みレイアウトと、 CSS フレックスボックスレイアウトです。
-
-
-
diff --git a/files/ja/web/guide/html/html5/introduction_to_html5/index.html b/files/ja/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 64143bdd59..0000000000 --- a/files/ja/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HTML5 の紹介 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。

- -

HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。HTML5 のメインページに Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、CanIUse ウェブサイトを参照してください。

- -

{{ 英語版章題("The HTML5 doctype") }}

- -

HTML5  の DOCTYPE

- -

HTML5 の DOCTYPE は非常にシンプルです。HTML コンテントで HTML5 を使用することを示すには、単純に以下のようにします：

- -
<!DOCTYPE html>
-
- -

この非常にシンプルな DOCTYPE は、現在 HTML5をサポートしていないブラウザでさえ、HTML の古くから存在する部分に HTML5の規格通りに入り込み、それらがサポートしない HTML5 の新機能を無視することを意味する、標準モードに切り替えます。

- -
-

{{ languages( {"en": "en/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5"} ) }}

-
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 497bfa0434..0a073302eb 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -317,9 +317,9 @@ /ko/docs/HTML/Element/Video /ko/docs/Web/HTML/Element/Video /ko/docs/HTML/Element/a /ko/docs/Web/HTML/Element/a /ko/docs/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus -/ko/docs/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 +/ko/docs/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/HTML/Inline_elements /ko/docs/Web/HTML/Inline_elements /ko/docs/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML @@ -780,6 +780,8 @@ /ko/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /ko/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /ko/docs/Web/Guide/HTML /ko/docs/Learn/HTML /ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content +/ko/docs/Web/Guide/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 +/ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories /ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/Forms /ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form @@ -816,9 +818,9 @@ /ko/docs/Web/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus /ko/docs/Web/HTML/Global_attributes/dropzone /ko/docs/orphaned/Web/HTML/Global_attributes/dropzone /ko/docs/Web/HTML/Global_attributes/클래스 /ko/docs/Web/HTML/Global_attributes/class -/ko/docs/Web/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 +/ko/docs/Web/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/Web/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index bd986bb2c3..49b9cad561 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -10145,27 +10145,6 @@ "gblue1223" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-03-24T00:11:07.419Z", - "contributors": [ - "teoli", - "Channy", - "Dwchiang", - "vigia122", - "jisung", - "Joone" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:38:47.847Z", - "contributors": [ - "kybin", - "kuil09", - "juyoungbang", - "teoli", - "Channy" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2020-01-10T12:08:26.959Z", "contributors": [ @@ -18469,6 +18448,27 @@ "PineMt" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-03-24T00:11:07.419Z", + "contributors": [ + "teoli", + "Channy", + "Dwchiang", + "vigia122", + "jisung", + "Joone" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:38:47.847Z", + "contributors": [ + "kybin", + "kuil09", + "juyoungbang", + "teoli", + "Channy" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2020-10-15T21:44:01.823Z", "contributors": [ diff --git a/files/ko/orphaned/web/guide/html/html5/index.html b/files/ko/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..f7a60615ef --- /dev/null +++ b/files/ko/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,123 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

+ +

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

+ +

HTML5 소개

+ +
+
HTML5의 소개
+
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
+
+ +

HTML5의 요소

+ +
+
HTML5 요소·태그의 목록
+
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
+
오디오/비디오 사용하기
+
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
+
HTML5 웹 폼양식
+
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
+
HTML5 섹션과 아웃라인
+
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
+
{{ HTMLElement("mark") }} 요소
+
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
+
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
+
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
+
+ +

Canvas 기술 지원

+ +
+
Canvas 튜토리얼
+
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
+
canvas 요소의 HTML5 text API
+
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
+
+ +

웹 애플리케이션 기능

+ +
+
Firefox 오프 라인 자원
+
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
+
Online 이벤트와 Offline 이벤트
+
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
+
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
+
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
+
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
+
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
+
로컬 파일 사용하기
+
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
+
+ +

DOM 주요 기능

+ +
+
getElementsByClassName
+
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
+
드래그 앤 드롭
+
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
+
HTML 내 포커스 관리
+
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
+
웹 기반 프로토콜 핸들러
+
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
+
+ +

HTML 파서

+ +

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).

+ +

추가 변경사항

+ + + +

HTML5의 일부로서 포함된 기술

+ +

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

+ + + +

관련 문서

+ +

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

+ + diff --git a/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..5066c368b8 --- /dev/null +++ b/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,41 @@ +--- +title: HTML5 소개 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML5 + - 웹개발 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

+ +

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

+ +

HTML5 DOCTYPE

+ +

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

+ +
<!DOCTYPE html>
+
+ +

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

+ +

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

+ +

<meta charset>으로 문자셋 정의하기

+ +

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

+ +
<meta charset="UTF-8">
+ +

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

+ +

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

+ +

새로운 HTML5 해석기의 사용

+ +

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

+ +

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

+ +

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html deleted file mode 100644 index d001c97302..0000000000 --- a/files/ko/web/guide/html/html5/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

- -

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

- -

HTML5 소개

- -
-
HTML5의 소개
-
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
-
- -

HTML5의 요소

- -
-
HTML5 요소·태그의 목록
-
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
-
오디오/비디오 사용하기
-
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
-
HTML5 웹 폼양식
-
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
-
HTML5 섹션과 아웃라인
-
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
-
{{ HTMLElement("mark") }} 요소
-
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
-
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
-
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
-
- -

Canvas 기술 지원

- -
-
Canvas 튜토리얼
-
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
-
canvas 요소의 HTML5 text API
-
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
-
- -

웹 애플리케이션 기능

- -
-
Firefox 오프 라인 자원
-
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
-
Online 이벤트와 Offline 이벤트
-
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
-
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
-
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
-
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
-
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
-
로컬 파일 사용하기
-
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
-
- -

DOM 주요 기능

- -
-
getElementsByClassName
-
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
-
드래그 앤 드롭
-
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
-
HTML 내 포커스 관리
-
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
-
웹 기반 프로토콜 핸들러
-
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
-
- -

HTML 파서

- -

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).

- -

추가 변경사항

- - - -

HTML5의 일부로서 포함된 기술

- -

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

- - - -

관련 문서

- -

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

- - diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index f0bfebe0e7..0000000000 --- a/files/ko/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: HTML5 소개 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML5 - - 웹개발 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

- -

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

- -

HTML5 DOCTYPE

- -

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

- -
<!DOCTYPE html>
-
- -

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

- -

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

- -

<meta charset>으로 문자셋 정의하기

- -

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

- -
<meta charset="UTF-8">
- -

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

- -

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

- -

새로운 HTML5 해석기의 사용

- -

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

- -

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

- -

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index 660f48d5c3..e4306146e5 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -1444,7 +1444,7 @@ /pl/docs/HTML/Elementy/strong /pl/docs/Web/HTML/Element/strong /pl/docs/HTML/Elementy_blokowe /pl/docs/Web/HTML/Block-level_elements /pl/docs/HTML/Elementy_liniowe /pl/docs/Web/HTML/Inline_elements -/pl/docs/HTML/HTML5 /pl/docs/Web/Guide/HTML/HTML5 +/pl/docs/HTML/HTML5 /pl/docs/orphaned/Web/Guide/HTML/HTML5 /pl/docs/HTML/Kontrola_sprawdzania_pisowni_w_formularzach_HTML /pl/docs/conflicting/Web/HTML/Global_attributes/spellcheck /pl/docs/HTML/The_Importance_of_Correct_Commenting /pl/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /pl/docs/HTML/Znaczenie_poprawnego_komentowania /pl/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started @@ -2108,6 +2108,7 @@ /pl/docs/Web/Guide/CSS/Sprawdzanie_media_queries /pl/docs/Web/CSS/Media_Queries/Testing_media_queries /pl/docs/Web/Guide/Events/Creating_and_triggering_events /pl/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pl/docs/Web/Guide/HTML /pl/docs/Learn/HTML +/pl/docs/Web/Guide/HTML/HTML5 /pl/docs/orphaned/Web/Guide/HTML/HTML5 /pl/docs/Web/Guide/HTML/Wprowadzenie /pl/docs/Learn/HTML/Introduction_to_HTML /pl/docs/Web/Guide/Liczniki_CSS /pl/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /pl/docs/Web/HTML(PL) /pl/docs/conflicting/Web/HTML diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index 9eb38ac6da..2b50a0a549 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -5788,16 +5788,6 @@ "chrisdavidmills" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-06-28T04:18:42.824Z", - "contributors": [ - "Moniaesz", - "teoli", - "Jacob99", - "Ptak82", - "Teo" - ] - }, "Web/Guide/Performance": { "modified": "2019-03-23T23:11:21.113Z", "contributors": [ @@ -11275,6 +11265,16 @@ "Jan Dudek" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-06-28T04:18:42.824Z", + "contributors": [ + "Moniaesz", + "teoli", + "Jacob99", + "Ptak82", + "Teo" + ] + }, "orphaned/Web/HTML/Element/comment": { "modified": "2019-03-18T21:12:42.382Z", "contributors": [ diff --git a/files/pl/orphaned/web/guide/html/html5/index.html b/files/pl/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..67660867ab --- /dev/null +++ b/files/pl/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,173 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - CSS3 + - HTML + - HTML 5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 jest najnowszą wersją standardu opisującego język HTML. Termin ten możemy zdefiniować na dwa sposoby:

+ + + +

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.
+
+ +

Multimedia

+ +
+
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).
+
+
+
+ +
+
+
diff --git a/files/pl/web/guide/html/html5/index.html b/files/pl/web/guide/html/html5/index.html deleted file mode 100644 index 89b3a43466..0000000000 --- a/files/pl/web/guide/html/html5/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - CSS3 - - HTML - - HTML 5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: HTML/HTML5 ---- -

HTML5 jest najnowszą wersją standardu opisującego język HTML. Termin ten możemy zdefiniować na dwa sposoby:

- - - -

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.
-
- -

Multimedia

- -
-
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).
-
-
-
- -
-
-
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 0e3cfb0cc1..631aaa1fcd 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -333,10 +333,10 @@ /pt-BR/docs/HTML/Elementos HTML /pt-BR/docs/Web/HTML/Element /pt-BR/docs/HTML/Forms_in_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates /pt-BR/docs/HTML/Formularios_em_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/pt-BR/docs/HTML/HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5 +/pt-BR/docs/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/pt-BR/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-BR/docs/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-BR/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/HTML/HTML_Elements /pt-BR/docs/Web/HTML/Element /pt-BR/docs/HTML/HTML_Elements/time /pt-BR/docs/Web/HTML/Element/time /pt-BR/docs/HTML/Introducao /pt-BR/docs/Learn/HTML/Introduction_to_HTML @@ -759,6 +759,8 @@ /pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML /pt-BR/docs/Learn/Forms/Your_first_form /pt-BR/docs/Web/Guide/HTML/Forms/Os_widgets_nativos /pt-BR/docs/Learn/Forms/Basic_native_form_controls /pt-BR/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /pt-BR/docs/Learn/Forms/Sending_and_retrieving_form_data +/pt-BR/docs/Web/Guide/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 +/pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/Guide/HTML/Using_data_attributes /pt-BR/docs/Learn/HTML/Howto/Use_data_attributes /pt-BR/docs/Web/Guide/Introducao_ao_Desenvolvimento_Web /pt-BR/docs/Web/Guide/Introduction_to_Web_development /pt-BR/docs/Web/HTML/CORS_imagens_habilitadas /pt-BR/docs/Web/HTML/CORS_enabled_image @@ -772,9 +774,9 @@ /pt-BR/docs/Web/HTML/Element/figura /pt-BR/docs/Web/HTML/Element/figure /pt-BR/docs/Web/HTML/Elementos_block-level /pt-BR/docs/Web/HTML/Block-level_elements /pt-BR/docs/Web/HTML/Elementos_nlock-level /pt-BR/docs/Web/HTML/Block-level_elements -/pt-BR/docs/Web/HTML/HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5 +/pt-BR/docs/Web/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/Web/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/HTML/Inline_elemente /pt-BR/docs/Web/HTML/Inline_elements /pt-BR/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /pt-BR/docs/Glossary/speculative_parsing /pt-BR/docs/Web/HTML/Preloading_content /pt-BR/docs/orphaned/Web/HTML/Preloading_content diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 26d0f8c313..02cd6c4001 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -9220,34 +9220,6 @@ "fellyph" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-11-20T18:24:04.168Z", - "contributors": [ - "sambrmg", - "Fernandolrs", - "matheussilvasantos", - "netoguimaraes", - "jaimemaretoli", - "macalha", - "teoli", - "lfelipev", - "leandro2103", - "rodrigopadula", - "mauricio.araldi", - "PedroFelipe", - "phenriqueleao", - "apereira2001", - "RodrigoAlmeidaSp" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:38:50.368Z", - "contributors": [ - "flmidia", - "teoli", - "eduardodx" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2020-10-07T01:45:20.737Z", "contributors": [ @@ -17277,6 +17249,34 @@ "helton-mori-dev" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-11-20T18:24:04.168Z", + "contributors": [ + "sambrmg", + "Fernandolrs", + "matheussilvasantos", + "netoguimaraes", + "jaimemaretoli", + "macalha", + "teoli", + "lfelipev", + "leandro2103", + "rodrigopadula", + "mauricio.araldi", + "PedroFelipe", + "phenriqueleao", + "apereira2001", + "RodrigoAlmeidaSp" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:38:50.368Z", + "contributors": [ + "flmidia", + "teoli", + "eduardodx" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2019-03-23T23:38:57.259Z", "contributors": [ diff --git a/files/pt-br/orphaned/web/guide/html/html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..70e852c9cb --- /dev/null +++ b/files/pt-br/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,300 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - Desenvolvimento Web + - Guía + - HTML + - HTML5 + - Visão Geral + - Web +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

+ + + +

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

+ + + +
+ +
+ +

 Semântica 

+ +
+
Seções e estruturas em HTML
+
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
+
Formulários em HTML5 
+
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
+
Novos elementos semânticos
+
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
+
Melhorias no {{HTMLElement("iframe")}}
+
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
+
​MathML
+
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
+
Introdução ao HTML5
+
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
+
HTML5 parser compatível
+
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
+
+ +

Conectividade

+ +
+
Web Sockets
+
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
+
Eventos do servidor
+
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
+
WebRTC
+
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
+ +

Offline e armazenamento

+ +
+
Recursos offline: cache de aplicação
+
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
+
Eventos online e offline
+
+

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

+
+
WHATWG 
+
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
+
IndexedDB
+
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
+
Uso de arquivos de aplicações web
+
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
+
+ +

Multimídia

+ +
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
+
WebRTC
+
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
API da câmera
+
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
+
Track e WebVTT
+
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
+
+ +

Gráficos e efeitos 3D

+ +
+
Canvas
+
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
+
API de texto para {{HTMLElement("canvas")}}
+
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
+
WebGL
+
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
+
SVG
+
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
+
+ +

Performance e integração

+ +
+
Web Workers
+
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
+
XMLHttpRequest level 2
+
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
+
Motor JIT-compiling para JavaScript
+
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
+
History API
+
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
+
O atributo contentEditable: Transforme seu website em uma wiki!
+
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
+
Arrastar e soltar
+
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
+
Foco de gestão em HTML
+
O novo HTML5 activeElement e hasFocus são atributos suportados.
+
Manipuladores de protocolos beseados na web
+
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite o controle de animações de renderização para obter a performance ideal.
+
API Fullscreen
+
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
+
API bloqueio de ponteiro
+
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
+
Eventos online e offline
+
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
+
+ +

Acesso à dispositivos

+ +
+
Usando a API da câmera
+
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
+
Eventos touch
+
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
+
Utilizando geolocalização
+
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
+
Detectando a orientaçåo do dispositivo
+
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
+
Pointer Lock API
+
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
+
+ +

Estilização

+ +

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

+ +
+
Novas caracteristicas dos estilos de background
+
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
+
More fancy borders
+
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
+
Animating your style
+
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
+
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
+
Novos layouts de apresentaçoes
+
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
+
+ + + +

(Alguns outros artigos relacionados com HTML5.)

+ +

Introdução ao HTML5

+ +
+
Introdução ao HTML5
+
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
+
+ +

Elementos do HTML5

+ +
+
Lista de tags / elementos do HTML5
+
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
+
+ +
+
Utilizando audio e video
+
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
+
Formulários em HTML5
+
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
+
Seções e esboços em HTML5
+
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
+
O elemento {{ HTMLElement("mark") }}
+
Este elemento é usado para marcar em destaque um texto de especial relevância.
+
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
+
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
+
+ +

Suporte Canvas

+ +
+
Tutorial Canvas
+
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
+
HTML5 API texto para elemento <canvas>
+
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
+
+ +
+

Recursos de aplicações web

+
+ +
+
Recursos Offline
+
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
+
Eventos online e offline
+
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
+
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
+
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
+
O atributo contentEditable: transforma seu website em um wiki!
+
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
+
Usando arquivos de aplicações web
+
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
+
+ +

Recursos DOM

+ +
+
getElementsByClassName
+
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
+
Arrastar e soltar
+
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
+
Foco na gestão do HTML
+
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
+
Manipuladores de protocolo baseado em web
+
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
+
+ +

HTML parser

+ +

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.)

+ +

Alterações adicionais

+ + + +

Tecnologias muitas vezes chamado de parte do HTML5 que não são

+ +

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

+ + + +

Veja também

+ +

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

+ + + +
+

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

+
diff --git a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..a36dbb612f --- /dev/null +++ b/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,24 @@ +--- +title: Introdução ao HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.

+ +

Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

+ +

Seu primeiro passo: O doctype do HTML5

+ +

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

+ +
<!DOCTYPE html>
+
+ +

Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.

+ +
+

{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}

+
+ +

 

diff --git a/files/pt-br/web/guide/html/html5/index.html b/files/pt-br/web/guide/html/html5/index.html deleted file mode 100644 index 6369bb37e5..0000000000 --- a/files/pt-br/web/guide/html/html5/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

- - - -

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

- - - -
- -
- -

 Semântica 

- -
-
Seções e estruturas em HTML
-
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
-
Formulários em HTML5 
-
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
-
Novos elementos semânticos
-
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
-
Melhorias no {{HTMLElement("iframe")}}
-
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
-
​MathML
-
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
-
Introdução ao HTML5
-
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
-
HTML5 parser compatível
-
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
-
- -

Conectividade

- -
-
Web Sockets
-
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
-
Eventos do servidor
-
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
-
WebRTC
-
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
- -

Offline e armazenamento

- -
-
Recursos offline: cache de aplicação
-
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
-
Eventos online e offline
-
-

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

-
-
WHATWG 
-
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
-
IndexedDB
-
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
-
Uso de arquivos de aplicações web
-
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
-
- -

Multimídia

- -
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
-
WebRTC
-
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
API da câmera
-
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
-
Track e WebVTT
-
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
-
- -

Gráficos e efeitos 3D

- -
-
Canvas
-
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
-
API de texto para {{HTMLElement("canvas")}}
-
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
-
WebGL
-
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
-
SVG
-
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
-
- -

Performance e integração

- -
-
Web Workers
-
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
-
XMLHttpRequest level 2
-
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
-
Motor JIT-compiling para JavaScript
-
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
-
History API
-
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
-
O atributo contentEditable: Transforme seu website em uma wiki!
-
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
-
Arrastar e soltar
-
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
-
Foco de gestão em HTML
-
O novo HTML5 activeElement e hasFocus são atributos suportados.
-
Manipuladores de protocolos beseados na web
-
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite o controle de animações de renderização para obter a performance ideal.
-
API Fullscreen
-
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
-
API bloqueio de ponteiro
-
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
-
Eventos online e offline
-
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
-
- -

Acesso à dispositivos

- -
-
Usando a API da câmera
-
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
-
Eventos touch
-
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
-
Utilizando geolocalização
-
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
-
Detectando a orientaçåo do dispositivo
-
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
-
Pointer Lock API
-
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
-
- -

Estilização

- -

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

- -
-
Novas caracteristicas dos estilos de background
-
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
-
More fancy borders
-
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
-
Animating your style
-
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
-
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
-
Typography improvement
-
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
-
Novos layouts de apresentaçoes
-
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
-
- - - -

(Alguns outros artigos relacionados com HTML5.)

- -

Introdução ao HTML5

- -
-
Introdução ao HTML5
-
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
-
- -

Elementos do HTML5

- -
-
Lista de tags / elementos do HTML5
-
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
-
- -
-
Utilizando audio e video
-
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
-
Formulários em HTML5
-
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
-
Seções e esboços em HTML5
-
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
O elemento {{ HTMLElement("mark") }}
-
Este elemento é usado para marcar em destaque um texto de especial relevância.
-
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
-
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
-
- -

Suporte Canvas

- -
-
Tutorial Canvas
-
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
-
HTML5 API texto para elemento <canvas>
-
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
-
- -
-

Recursos de aplicações web

-
- -
-
Recursos Offline
-
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
-
Eventos online e offline
-
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
-
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
-
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
-
O atributo contentEditable: transforma seu website em um wiki!
-
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
-
Usando arquivos de aplicações web
-
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
-
- -

Recursos DOM

- -
-
getElementsByClassName
-
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
-
Arrastar e soltar
-
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
-
Foco na gestão do HTML
-
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
-
Manipuladores de protocolo baseado em web
-
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
-
- -

HTML parser

- -

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.)

- -

Alterações adicionais

- - - -

Tecnologias muitas vezes chamado de parte do HTML5 que não são

- -

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

- - - -

Veja também

- -

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

- - - -
-

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

-
diff --git a/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index dd4a4858cb..0000000000 --- a/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.

- -

Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

- -

Seu primeiro passo: O doctype do HTML5

- -

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

- -
<!DOCTYPE html>
-
- -

Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.

- -
-

{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}

-
- -

 

diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 9daf59d904..05cc2dc6dc 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -107,9 +107,9 @@ /ru/docs/HTML/Element/acronym /ru/docs/Web/HTML/Element/acronym /ru/docs/HTML/Element/form /ru/docs/Web/HTML/Element/form /ru/docs/HTML/Element/стиль /ru/docs/Web/HTML/Element/style -/ru/docs/HTML/HTML5 /ru/docs/Web/Guide/HTML/HTML5 -/ru/docs/HTML/HTML5/Constraint_validation /ru/docs/Web/Guide/HTML/HTML5/Constraint_validation -/ru/docs/HTML/HTML5/Введение_в_HTML5 /ru/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ru/docs/HTML/HTML5 /ru/docs/orphaned/Web/Guide/HTML/HTML5 +/ru/docs/HTML/HTML5/Constraint_validation /ru/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation +/ru/docs/HTML/HTML5/Введение_в_HTML5 /ru/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ru/docs/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /ru/docs/Glossary/speculative_parsing /ru/docs/IndexedDB /ru/docs/Web/API/IndexedDB_API /ru/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /ru/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB @@ -606,6 +606,9 @@ /ru/docs/Web/Guide/HTML/Drag_and_drop /ru/docs/Web/API/HTML_Drag_and_Drop_API /ru/docs/Web/Guide/HTML/Drag_and_drop/Drag_operations /ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations /ru/docs/Web/Guide/HTML/Forms /ru/docs/Learn/Forms +/ru/docs/Web/Guide/HTML/HTML5 /ru/docs/orphaned/Web/Guide/HTML/HTML5 +/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation /ru/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation +/ru/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ru/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ru/docs/Web/Guide/HTML/Introduction /ru/docs/Learn/HTML/Introduction_to_HTML /ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ru/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /ru/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index ef0f33b748..8bb44773ad 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -15387,43 +15387,6 @@ "warsan" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-11-05T05:54:38.208Z", - "contributors": [ - "ksam", - "nikolay94", - "SphinxKnight", - "duhas1993", - "CrawlOverYou", - "Hamelion-gm", - "MuradAz", - "teoli", - "BychekRU", - "syam1123", - "M57", - "Jmunb", - "repby", - "uleming", - "askhat", - "andygol", - "Grakov", - "AxDaim" - ] - }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2019-03-23T22:20:23.601Z", - "contributors": [ - "lautsevich", - "Pescao" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:32:08.971Z", - "contributors": [ - "Jmunb", - "Grakov" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2020-10-09T08:16:53.318Z", "contributors": [ @@ -25699,6 +25662,43 @@ "curdwithraisins" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2020-11-05T05:54:38.208Z", + "contributors": [ + "ksam", + "nikolay94", + "SphinxKnight", + "duhas1993", + "CrawlOverYou", + "Hamelion-gm", + "MuradAz", + "teoli", + "BychekRU", + "syam1123", + "M57", + "Jmunb", + "repby", + "uleming", + "askhat", + "andygol", + "Grakov", + "AxDaim" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2019-03-23T22:20:23.601Z", + "contributors": [ + "lautsevich", + "Pescao" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:32:08.971Z", + "contributors": [ + "Jmunb", + "Grakov" + ] + }, "orphaned/Web/HTML/Element/element": { "modified": "2019-03-23T22:16:19.667Z", "contributors": [ diff --git a/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..7d1f9fecd8 --- /dev/null +++ b/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,342 @@ +--- +title: Constraint validation +slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation +tags: + - Селекторы +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +original_slug: Web/Guide/HTML/HTML5/Constraint_validation +--- +

Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование пользователя о проблеме - может стать головной болью. Стандарт HTML5 предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и обязательная валидация, чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых атрибутов; более сложные ограничения могут быть реализованы через HTML5 Constraint Validation API.

+ +
Внимание: HTML5 Constraint validation не отменяет валидацию на стороне сервера. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.
+ +

Внутренние и базовые ограничения

+ +

В HTML5, базовые ограничения описываются двумя способами:

+ + + +

Семантические типы input-ов

+ +

Атрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:

+ + + + + + + + + + + + + + + + + + + + + +
Input typeОпределение ограниченияСвязанное с этим нарушение
<input type="URL">Значение должно быть абсолютным URL, одним из: +
    +
  • валидным URI (как описано в RFC 3986)
    • +
  • валидным IRI, без query компонента (как описано в RFC 3987)
    • +
  • валидным IRI, без query компонента и без неэкранированных не-ASCII символов (как описано в RFC 3987)
    • +
  • валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в RFC 3987)
    • +
+ 		Type mismatch constraint violation
 <input type="email">Значение должно следовать ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) где: +
    +
  • atext (описан в RFC 5322) - US-ASCII символ (A to Z and a-z), цифра (от 0 до 9) или один из следующих: 
    + ! # $ % & ' * + - / = ? ` { } | ~ специальных символов,
    • +
  • ldh-str (описан в RFC 1034) - US-ASCII символы, цифры и "-", сгруппированы по словам и разделённые точкой (.).
    • +
+ +
Внимание: если установлен атрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано Type mismatch constraint violation.
+ 		Type mismatch constraint violation
+ +

Следует учесть, что большинство типов input не имеют "нативных" ограничений, а некоторые из них просто лишены валидации или имеют автоматическую корректировку невалидных значений по умолчанию. 

+ +

Атрибуты валидации

+ +

Ниже перечислены атрибуты, которые описывают базовые ограничения:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
АтрибутТипы input с поддержкой атрибутаВозможные значенияОписание ограниченияСвязанное нарушение
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordРегулярное выражение JavaScript (по стандарту ECMAScript 5, флаги global, ignoreCase, и multiline отключены)Значение должно подходить под паттернPattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberВалидное числоЗначение поля должно быть больше или равно значению атрибутаUnderflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("max", "input") }}range, numberВалидное числоЗначение поля должно быть меньше или равно значению атрибутаOverflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elementsникакое так как это Boolean атрибут: его присутствие означает true, а отсутствие - falseЗначение должно быть не пустым (если установлено).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateЦелое число днейПока в атрибут step не установлен любой литерал, значение может быть min + любое число, красное шагу.Step mismatch constraint violation
monthЦелое число месяцев
weekЦелое число недель
datetime, datetime-local, timeЦелое число секунд
range, numberЦелое число
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}Длина (целое число)Количество символов (знаков) не должно превышать значение атрибута.Too long constraint violation
+ +

Процесс валидации ограничений

+ +

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

+ + + +
Note: + + +
+ +

Complex constraints using HTML5 Constraint API

+ +

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

+ +

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+ +

Constraint combining several fields: Postal code validation

+ +

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

+ +
+

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

+
+ +

As an example, we will add a script checking the constraint validation for this simple form:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

This displays the following form: 

+ +

+ +

First, we write a function checking the constraint itself:

+ +
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

You can see a live example of the postal code validation.  

+ +

Limiting the size of a file before its upload

+ +

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.

+ +

Here is the HTML part:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

This displays:

+ +

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

+ +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+ +

 

+ +

Finally we hook the method with the correct event:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

You can see a live example of the File size constraint validation.

+ +

Visual styling of constraint validation

+ +

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+ +

Controlling the look of elements

+ +

The look of elements can be controlled via CSS pseudo-classes.

+ +

:required and :optional CSS pseudo-classes

+ +

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

+ + +

:-moz-placeholder CSS pseudo-class

+ +

See :-moz-placeholder.

+ +

:valid :invalid CSS pseudo-classes

+ +

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+ +

Default styles

+ +

Controlling the text of constraints violation

+ +

The x-moz-errormessage attribute

+ +

The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.

+ +
+

Note: This extension is non-standard.

+
+ +

Constraint API's element.setCustomValidity()

+ +

The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.

+ +

Constraint API's ValidityState object

+ +

The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusion

diff --git a/files/ru/orphaned/web/guide/html/html5/index.html b/files/ru/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..41c9d4a443 --- /dev/null +++ b/files/ru/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,172 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - HTML5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 — последняя версия стандарта HTML. Термин имеет два определения:

+ + + +

Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:

+ + + + + + + + + + +
+

СЕМАНТИКА

+ +
+
Секции и контуры в HTML5
+
Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
+
Использование HTML5 audio и video
+
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
+
Формы в HTML5
+
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.
+
Новые семантические элементы
+
Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество валидных HTML5 элементов.
+
Улучшение {{HTMLElement("iframe")}}
+
Использование атрибутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега {{HTMLElement("iframe")}}.
+
MathML
+
Позволяет вставлять математические формулы.
+
Введение в HTML5
+
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
+
HTML5-совместимый парсер
+
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
+
+
+ +

СВЯЗЬ

+ +
+
Web Sockets
+
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
+
Server-sent события
+
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
+
WebRTC
+
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
+
+ +

ОФФЛАЙН И ХРАНИЛИЩЕ

+ +
+
Офлайн-ресурсы: кеш приложения
+
Firefox полностью поддерживает спецификацию HTML5 по офлайн-ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
+
Online and offline events
+
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
+
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
+
Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.
+
IndexedDB
+
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
+
Using files from web applications
+
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя {{ HTMLElement("input") }} с типом file, имеющих атрибут multiple. Ещё это FileReader.
+
+ +

МУЛЬТИМЕДИА

+ +
+
Использование HTML5 audio и video
+
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
+
WebRTC
+
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
+
Использование Camera API
+
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
+
+ +

ГРАФИКА И ЭФФЕКТЫ

+ +
+
Canvas Tutorial
+
Узнайте о элементе {{ HTMLElement("canvas") }} и узнайте, как рисовать графику и другие элементы в Firefox.
+
HTML5 text API для <canvas>
+
HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.
+
WebGL
+
WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.
+
SVG
+
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
+
+ +
+
+
+ 		+

производительность и интеграция

+ +
+
Web Workers
+
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
+
XMLHttpRequest Level 2
+
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
+
JIT-компилирование движков JavaScript
+
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
+
History API
+
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
+
contentEditable атрибут: трансформируйте свой сайт в википедию!
+
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
+
Drag and drop
+
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
+
Управление фокусом в HTML
+
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
+
Обработчики протоколов для Web
+
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Контролирует анимации для обеспечения оптимальной производительности.
+
Fullscreen API
+
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
+
Pointer Lock API
+
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
+
Online and offline events
+
Для того, чтобы построить хорошую офлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.
+
+ +

доступ к устройствам

+ +
+
Использование Camera API
+
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
+
Touch события
+
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
+
Геолокация
+
Позволяет браузерам получать местоположение пользователя.
+
Определение ориентации устройства
+
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
+
Pointer Lock API
+
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
+
+ +

стилизация

+ +

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

+ +
+
Новые способы стилизирования фона
+
Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление множественных фонов.
+
Лучшие границы
+
Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.
+
Анимируйте свой стиль
+
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
+
Улучшение типографии
+
Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и перенос слов, а также тень текста и его декорирование. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.
+
Новые презентационные макеты
+
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.
+
+
diff --git a/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..fc4bfc2bd9 --- /dev/null +++ b/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,27 @@ +--- +title: Введение в HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - DOCTYPE + - HTML5 + - HTML5 парсер +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 - пятая редакция и самая новая версия стандарта HTML. Она предлагает новые возможности, которые предоставляют не только богатую поддержку медиа, но и также расширяет возможности для создания веб-приложений, которые могут взаимодействовать с пользователем, его локальными данными, и серверами проще и эффективнее, чем это было раньше.

+

Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the main HTML5 page. For detailed information about multiple browsers' support of HTML5 features, refer to the CanIUse website.

+

Declaring that the document contains HTML5 mark-up with the HTML5 doctype

+

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

+
<!DOCTYPE html>
+
+

Doing so will cause even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.

+

This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.

+

Декларация кодировки с помощью <meta charset>

+

The first thing done on a page is usually indicating the character set that is used. In previous versions of HTML, it was done using a very complex {{HTMLElement("meta")}} element. Now, it is very simple:

+
<meta charset="UTF-8">
+

Place this right after your {{HTMLElement("head") }}, as some browsers restart the parsing of an HTML document if the declared charset is different from what they had anticipated. Also, if you are not currently using UTF-8, it's recommended that you switch to it in your Web pages, as it simplifies character handling in documents using different scripts.

+

Note that HTML5 restricts the valid charset to that compatible with ASCII and using at least 8 bits. This was done to tighten security and prevent some types of attacks.

+

Использование нового HTML5 парсера

+

The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

+

This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

+

Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

diff --git a/files/ru/web/guide/html/html5/constraint_validation/index.html b/files/ru/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index 73be6d59bb..0000000000 --- a/files/ru/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Constraint validation -slug: Web/Guide/HTML/HTML5/Constraint_validation -tags: - - Селекторы -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: HTML/HTML5/Constraint_validation ---- -

Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование пользователя о проблеме - может стать головной болью. Стандарт HTML5 предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и обязательная валидация, чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых атрибутов; более сложные ограничения могут быть реализованы через HTML5 Constraint Validation API.

- -
Внимание: HTML5 Constraint validation не отменяет валидацию на стороне сервера. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.
- -

Внутренние и базовые ограничения

- -

В HTML5, базовые ограничения описываются двумя способами:

- - - -

Семантические типы input-ов

- -

Атрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:

- - - - - - - - - - - - - - - - - - - - - -
Input typeОпределение ограниченияСвязанное с этим нарушение
<input type="URL">Значение должно быть абсолютным URL, одним из: -
    -
  • валидным URI (как описано в RFC 3986)
    • -
  • валидным IRI, без query компонента (как описано в RFC 3987)
    • -
  • валидным IRI, без query компонента и без неэкранированных не-ASCII символов (как описано в RFC 3987)
    • -
  • валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в RFC 3987)
    • -
- 		Type mismatch constraint violation
 <input type="email">Значение должно следовать ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) где: -
    -
  • atext (описан в RFC 5322) - US-ASCII символ (A to Z and a-z), цифра (от 0 до 9) или один из следующих: 
    - ! # $ % & ' * + - / = ? ` { } | ~ специальных символов,
    • -
  • ldh-str (описан в RFC 1034) - US-ASCII символы, цифры и "-", сгруппированы по словам и разделённые точкой (.).
    • -
- -
Внимание: если установлен атрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано Type mismatch constraint violation.
- 		Type mismatch constraint violation
- -

Следует учесть, что большинство типов input не имеют "нативных" ограничений, а некоторые из них просто лишены валидации или имеют автоматическую корректировку невалидных значений по умолчанию. 

- -

Атрибуты валидации

- -

Ниже перечислены атрибуты, которые описывают базовые ограничения:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
АтрибутТипы input с поддержкой атрибутаВозможные значенияОписание ограниченияСвязанное нарушение
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordРегулярное выражение JavaScript (по стандарту ECMAScript 5, флаги global, ignoreCase, и multiline отключены)Значение должно подходить под паттернPattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberВалидное числоЗначение поля должно быть больше или равно значению атрибутаUnderflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("max", "input") }}range, numberВалидное числоЗначение поля должно быть меньше или равно значению атрибутаOverflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elementsникакое так как это Boolean атрибут: его присутствие означает true, а отсутствие - falseЗначение должно быть не пустым (если установлено).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateЦелое число днейПока в атрибут step не установлен любой литерал, значение может быть min + любое число, красное шагу.Step mismatch constraint violation
monthЦелое число месяцев
weekЦелое число недель
datetime, datetime-local, timeЦелое число секунд
range, numberЦелое число
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}Длина (целое число)Количество символов (знаков) не должно превышать значение атрибута.Too long constraint violation
- -

Процесс валидации ограничений

- -

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

- - - -
Note: - - -
- -

Complex constraints using HTML5 Constraint API

- -

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

- -

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

- -

Constraint combining several fields: Postal code validation

- -

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

- -
-

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

-
- -

As an example, we will add a script checking the constraint validation for this simple form:

- -
<form>
-    <label for="ZIP">ZIP : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">Country : </label>
-    <select id="Country">
-      <option value="ch">Switzerland</option>
-      <option value="fr">France</option>
-      <option value="de">Germany</option>
-      <option value="nl">The Netherlands</option>
-    </select>
-    <input type="submit" value="Validate">
-</form>
- -

This displays the following form: 

- -

- -

First, we write a function checking the constraint itself:

- -
function checkZIP() {
-  // For each country, defines the pattern that the ZIP has to follow
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
-  };
-
-  // Read the country id
-  var country = document.getElementById("Country").value;
-
-  // Get the NPA field
-  var ZIPField = document.getElementById("ZIP");
-
-  // Build the constraint checker
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // Check it!
-  if (constraint.test(ZIPField.value)) {
-    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
-    // give a message about the format required for this country
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

You can see a live example of the postal code validation.  

- -

Limiting the size of a file before its upload

- -

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.

- -

Here is the HTML part:

- -
<label for="FS">Select a file smaller than 75 kB : </label>
-<input type="file" id="FS">
- -

This displays:

- -

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

- -

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // If there is (at least) one file selected
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Check the constraint
-       FS.setCustomValidity("The selected file must not be larger than 75 kB");
-       return;
-     }
-  }
-  // No custom constraint violation
-  FS.setCustomValidity("");
-}
- -

 

- -

Finally we hook the method with the correct event:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

You can see a live example of the File size constraint validation.

- -

Visual styling of constraint validation

- -

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

- -

Controlling the look of elements

- -

The look of elements can be controlled via CSS pseudo-classes.

- -

:required and :optional CSS pseudo-classes

- -

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

- - -

:-moz-placeholder CSS pseudo-class

- -

See :-moz-placeholder.

- -

:valid :invalid CSS pseudo-classes

- -

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

- -

Default styles

- -

Controlling the text of constraints violation

- -

The x-moz-errormessage attribute

- -

The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.

- -
-

Note: This extension is non-standard.

-
- -

Constraint API's element.setCustomValidity()

- -

The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.

- -

Constraint API's ValidityState object

- -

The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusion

diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html deleted file mode 100644 index 3656e1b81b..0000000000 --- a/files/ru/web/guide/html/html5/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: HTML/HTML5 ---- -

HTML5 — последняя версия стандарта HTML. Термин имеет два определения:

- - - -

Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:

- - - - - - - - - - -
-

СЕМАНТИКА

- -
-
Секции и контуры в HTML5
-
Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
Использование HTML5 audio и video
-
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
-
Формы в HTML5
-
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.
-
Новые семантические элементы
-
Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество валидных HTML5 элементов.
-
Улучшение {{HTMLElement("iframe")}}
-
Использование атрибутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега {{HTMLElement("iframe")}}.
-
MathML
-
Позволяет вставлять математические формулы.
-
Введение в HTML5
-
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
-
HTML5-совместимый парсер
-
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
-
-
- -

СВЯЗЬ

- -
-
Web Sockets
-
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
-
Server-sent события
-
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
-
WebRTC
-
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
-
- -

ОФФЛАЙН И ХРАНИЛИЩЕ

- -
-
Офлайн-ресурсы: кеш приложения
-
Firefox полностью поддерживает спецификацию HTML5 по офлайн-ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
-
Online and offline events
-
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
-
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
-
Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.
-
IndexedDB
-
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
-
Using files from web applications
-
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя {{ HTMLElement("input") }} с типом file, имеющих атрибут multiple. Ещё это FileReader.
-
- -

МУЛЬТИМЕДИА

- -
-
Использование HTML5 audio и video
-
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
-
WebRTC
-
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
-
Использование Camera API
-
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
-
- -

ГРАФИКА И ЭФФЕКТЫ

- -
-
Canvas Tutorial
-
Узнайте о элементе {{ HTMLElement("canvas") }} и узнайте, как рисовать графику и другие элементы в Firefox.
-
HTML5 text API для <canvas>
-
HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.
-
WebGL
-
WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.
-
SVG
-
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
-
- -
-
-
- 		-

производительность и интеграция

- -
-
Web Workers
-
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
-
XMLHttpRequest Level 2
-
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
-
JIT-компилирование движков JavaScript
-
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
-
History API
-
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
-
contentEditable атрибут: трансформируйте свой сайт в википедию!
-
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
-
Drag and drop
-
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
-
Управление фокусом в HTML
-
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
-
Обработчики протоколов для Web
-
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Контролирует анимации для обеспечения оптимальной производительности.
-
Fullscreen API
-
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
-
Pointer Lock API
-
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
-
Online and offline events
-
Для того, чтобы построить хорошую офлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.
-
- -

доступ к устройствам

- -
-
Использование Camera API
-
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
-
Touch события
-
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
-
Геолокация
-
Позволяет браузерам получать местоположение пользователя.
-
Определение ориентации устройства
-
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
-
Pointer Lock API
-
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
-
- -

стилизация

- -

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

- -
-
Новые способы стилизирования фона
-
Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление множественных фонов.
-
Лучшие границы
-
Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.
-
Анимируйте свой стиль
-
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
-
Улучшение типографии
-
Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и перенос слов, а также тень текста и его декорирование. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.
-
Новые презентационные макеты
-
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.
-
-
diff --git a/files/ru/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 85b024ad30..0000000000 --- a/files/ru/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Введение в HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - DOCTYPE - - HTML5 - - HTML5 парсер -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: HTML/HTML5/Введение_в_HTML5 ---- -

HTML5 - пятая редакция и самая новая версия стандарта HTML. Она предлагает новые возможности, которые предоставляют не только богатую поддержку медиа, но и также расширяет возможности для создания веб-приложений, которые могут взаимодействовать с пользователем, его локальными данными, и серверами проще и эффективнее, чем это было раньше.

-

Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the main HTML5 page. For detailed information about multiple browsers' support of HTML5 features, refer to the CanIUse website.

-

Declaring that the document contains HTML5 mark-up with the HTML5 doctype

-

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

-
<!DOCTYPE html>
-
-

Doing so will cause even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.

-

This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.

-

Декларация кодировки с помощью <meta charset>

-

The first thing done on a page is usually indicating the character set that is used. In previous versions of HTML, it was done using a very complex {{HTMLElement("meta")}} element. Now, it is very simple:

-
<meta charset="UTF-8">
-

Place this right after your {{HTMLElement("head") }}, as some browsers restart the parsing of an HTML document if the declared charset is different from what they had anticipated. Also, if you are not currently using UTF-8, it's recommended that you switch to it in your Web pages, as it simplifies character handling in documents using different scripts.

-

Note that HTML5 restricts the valid charset to that compatible with ASCII and using at least 8 bits. This was done to tighten security and prevent some types of attacks.

-

Использование нового HTML5 парсера

-

The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

-

This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

-

Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index b928226809..c19912bb2b 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -693,11 +693,11 @@ /zh-CN/docs/HTML/Forms /zh-CN/docs/Learn/Forms /zh-CN/docs/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript /zh-CN/docs/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/zh-CN/docs/HTML/HTML5 /zh-CN/docs/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5-and-his-friends /zh-CN/docs/Web/Guide/HTML/HTML5 +/zh-CN/docs/HTML/HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 +/zh-CN/docs/HTML/HTML5-and-his-friends /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 /zh-CN/docs/HTML/HTML5/HTML5_Tags_List /zh-CN/docs/conflicting/Web/HTML/Element /zh-CN/docs/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5/HTML5_入门 /zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/zh-CN/docs/HTML/HTML5/HTML5_入门 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/HTML/HTML_Elements /zh-CN/docs/Web/HTML/Element/Heading_Elements /zh-CN/docs/HTML/HTML_Elements/time /zh-CN/docs/Web/HTML/Element/time /zh-CN/docs/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML @@ -2307,8 +2307,11 @@ /zh-CN/docs/Web/Guide/HTML/Forms/表单入门 /zh-CN/docs/Learn/Forms/Your_first_form /zh-CN/docs/Web/Guide/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates /zh-CN/docs/Web/Guide/HTML/HTML /zh-CN/docs/orphaned/Web/Guide/HTML/HTML +/zh-CN/docs/Web/Guide/HTML/HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 +/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 /zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list /zh-CN/docs/conflicting/Web/HTML/Element +/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/Web/Guide/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 62e56751c9..84cda02220 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -31715,56 +31715,6 @@ "Teago" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-04-29T21:49:51.078Z", - "contributors": [ - "vanpipy", - "mike-j", - "GameWang", - "fanerge", - "mfoonirlee", - "Summer1026", - "xgqfrms-GitHub", - "Go7hic", - "panhe-xue", - "ObooChin", - "kevinfszu", - "teoli", - "xgqfrms", - "fghycode", - "jasonworg", - "mengzyou", - "Breezewish", - "Jianming", - "ziyunfei", - "xuxun", - "TimZhao", - "sunnylost", - "xcffl", - "princetoad@gmail.com" - ] - }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2020-08-07T06:53:08.941Z", - "contributors": [ - "Nierifeng", - "shiyi25928988", - "yongchen" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-24T00:12:23.341Z", - "contributors": [ - "eeeeeeeason", - "YueBiYang", - "008", - "guotingchaopr", - "ziyunfei", - "ibeen", - "gaoyanqi", - "leegorous" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2019-03-21T10:38:08.111Z", "contributors": [ @@ -50592,6 +50542,56 @@ "zzangxu" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-04-29T21:49:51.078Z", + "contributors": [ + "vanpipy", + "mike-j", + "GameWang", + "fanerge", + "mfoonirlee", + "Summer1026", + "xgqfrms-GitHub", + "Go7hic", + "panhe-xue", + "ObooChin", + "kevinfszu", + "teoli", + "xgqfrms", + "fghycode", + "jasonworg", + "mengzyou", + "Breezewish", + "Jianming", + "ziyunfei", + "xuxun", + "TimZhao", + "sunnylost", + "xcffl", + "princetoad@gmail.com" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-08-07T06:53:08.941Z", + "contributors": [ + "Nierifeng", + "shiyi25928988", + "yongchen" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:12:23.341Z", + "contributors": [ + "eeeeeeeason", + "YueBiYang", + "008", + "guotingchaopr", + "ziyunfei", + "ibeen", + "gaoyanqi", + "leegorous" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2019-03-18T20:43:33.481Z", "contributors": [ diff --git a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..c5a617d757 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,340 @@ +--- +title: 约束验证 +slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +original_slug: Web/Guide/HTML/HTML5/Constraint_validation +--- +

创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的，但是检查每一个字段的值是否有效并且一致是一件更加困难的事情，而向用户指明错误可能会令人头痛。HTML5 引入了表单相关的一些新的机制：为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型，使得在客户端检查表单内容的工作变得容易。基本上，在填写字段时，通常这些约束都会被检查，而不需要额外的JavaScript代码进行校验； 对于更复杂的约束条件的校验可以尝试使用 HTML5 Constraint Validation API.

+ +
Note: HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.
+ +

固有和基本的约束

+ +

在 HTML5中，声明基本的约束有两种方式：

+ + + +

语义的 input 类型

+ +

 {{ htmlattrxref("type", "input") }} 特性中固有约束：

+ + + + + + + + + + + + + + + + + + + + + +
Input 类型约束描述Associated violation
<input type="URL">值必须是绝对的URL, 即，是下面的某一种: +
    +
  • a valid URI (as defined in RFC 3986)
    • +
  • a valid IRI, without a query component (as defined in RFC 3987)
    • +
  • a valid IRI, with a query component without any unescaped non-ASCII character (as defined in RFC 3987)
    • +
  • a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in RFC 3987)
    • +
+ 		Type mismatch constraint violation
 <input type="email">The value must follow the ABNF production: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) where: +
    +
  • atext is defined in RFC 5322, i.e., a US-ASCII letter (A to Z and a-z), a digit (0 to 9) or one of the following! # $ % & ' * + - / = ? ` { } | ~ special character,
    • +
  • ldh-str is defined in RFC 1034, i.e., US-ASCII letters, mixed with digits and - grouped in words separated by a dot (.).
    • +
+ +
Note: if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the Type mismatch constraint violation is triggered.
+ 		Type mismatch constraint violation
+ +

Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. 

+ +

验证相关的特性（Attribute）

+ +

下列特性用于描述基本的约束：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性支持该特性的 Input 类型可接受的值约束描述Associated violation
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordA JavaScript regular expression (compiled with the ECMAScript 5 global, ignoreCase, and multiline flags disabled)输入的值必须匹配设置的模式。Pattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberA valid number输入的值必须大于等于设置的最小值。Underflow constraint violation
date, month, weekA valid date
datetime, datetime-local, timeA valid date and time
{{ htmlattrxref("max", "input") }}range, numberA valid number输入的值必须小于等于设置的最大值。Overflow constraint violation
date, month, weekA valid date
datetime, datetime-local, timeA valid date and time
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elementsnone as it is a Boolean attribute: its presence means true, its absence means falseThere must be a value (if set).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateAn integer number of daysUnless the step is set to the any literal, the value must be min + an integral multiple of the step.Step mismatch constraint violation
monthAn integer number of months
weekAn integer number of weeks
datetime, datetime-local, timeAn integer number of seconds
range, numberAn integer
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} elementAn integer lengthThe number of characters (code points) must not exceed the value of the attribute.Too long constraint violation
+ +

Constraint validation process

+ +

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

+ + + +
Note: + + +
+ +

Complex constraints using HTML5 Constraint API

+ +

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

+ +

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+ +

Constraint combining several fields: Postal code validation

+ +

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

+ +
+

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

+
+ +

As an example, we will add a script checking the constraint validation for this simple form:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

This displays the following form: 

+ +

+ +

First, we write a function checking the constraint itself:

+ +
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

You can see a live example of the postal code validation.  

+ +

Limiting the size of a file before its upload

+ +

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.

+ +

Here is the HTML part:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

This displays:

+ +

+ + + +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+ + + +

Finally we hook the method with the correct event:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

You can see a live example of the File size constraint validation.

+ +

Visual styling of constraint validation

+ +

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+ +

Controlling the look of elements

+ +

The look of elements can be controlled via CSS pseudo-classes.

+ +

:required and :optional CSS pseudo-classes

+ +

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

+ +

:-moz-placeholder CSS pseudo-class

+ +

See :-moz-placeholder.

+ +

:valid :invalid CSS pseudo-classes

+ +

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+ +

Default styles

+ +

Controlling the text of constraints violation

+ +

The x-moz-errormessage attribute

+ +

The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.

+ +
+

Note: This extension is non-standard.

+
+ +

Constraint API's element.setCustomValidity()

+ +

The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.

+ +

Constraint API's ValidityState object

+ +

The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusion

diff --git a/files/zh-cn/orphaned/web/guide/html/html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..fffbfb5204 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,187 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - JavaScript + - PHP + - Web + - Web 开发 + - angularjs + - nodejs + - vuejs + - 帮助 + - 指南 + - 综述 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现：

+ + + +

设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。

+ + + +
+
+

语义

+ +
+
HTML5 中的区块和段落元素
+
HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.
+
使用 HTML5 的音频和视频
+
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。
+
表单的改进
+
看一下 HTML5 中对 web 表单的改进：强制校验API，一些新的属性，一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ，新的 {{HTMLElement("output")}} 元素。
+
新的语义元素
+
除了节段，媒体和表单元素之外，还有众多的新元素，例如 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}}，这增加了有效的 HTML5 元素的数量。
+
{{HTMLElement("iframe")}} 的改进
+
使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。
+
MathML
+
允许直接嵌入数学公式。
+
HTML5 入门
+
本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。
+
HTML5 兼容的解析器
+
用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。
+
+ +

通信

+ +
+
Web Sockets
+
允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
+
Server-sent events
+
允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
+
WebRTC
+
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
+
+ +

离线 & 存储

+ +
+
离线资源：应用程序缓存
+
火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。
+
在线和离线事件
+
Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
+
WHATWG 客户端会话和持久化存储 (又名 DOM 存储)
+
客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。
+
IndexedDB
+
是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。
+
自 web 应用程序中使用文件
+
对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的 {{HTMLElement("input")}} 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。
+
+ +

多媒体

+ +
+
使用 HTML5 音视频
+
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。
+
WebRTC
+
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。
+
使用 Camera API
+
允许使用，操作计算机摄像头，并从中存储图像。
+
Track 和 WebVTT
+
 {{HTMLElement("track")}} 元素支持字幕和章节。WebVTT 一个文本轨道格式。
+
+ +

3D, 图像 & 效果

+ +
+
Canvas 教程
+
了解有关新的 {{HTMLElement("canvas")}} 元素以及如何在火狐中绘制图像和其他对象。
+
HTML5 针对 <canvas> 元素的文本 API
+
HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。
+
WebGL
+
WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。
+
SVG
+
一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。
+
 
+
+
+ +
+

性能 & 集成

+ +
+
Web Workers
+
能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
+
XMLHttpRequest Level 2
+
允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。
+
即时编译的 JavaScript 引擎
+
新一代的 JavaScript 引擎功能更强大，性能更杰出。
+
History API
+
允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
+
contentEditable 属性：把你的网站改变成 wiki !
+
HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。
+
拖放
+
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
+
HTML 中的焦点管理
+
支持新的 HTML5 activeElement 和 hasFocus 属性。
+
基于 Web 的协议处理程序
+
你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
+
requestAnimationFrame
+
允许控制动画渲染以获得更优性能。
+
全屏 API
+
为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
+
指针锁定 API
+
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
+
在线和离线事件
+
为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。
+
+ +

设备访问

+ +
+
使用 Camera API
+
允许使用和操作计算机的摄像头，并从中存取照片。
+
触控事件
+
对用户按下触控屏的事件做出反应的处理程序。
+
使用地理位置定位
+
让浏览器使用地理位置服务定位用户的位置。
+
检测设备方向
+
让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。
+
指针锁定 API
+
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
+
+ +

样式

+ +

CSS 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

+ +
+
新的背景样式特性
+
现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 多背景。
+
更精美的边框
+
现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。
+
为你的样式设置动画
+
使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。
+
排版方面的改进
+
作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 hyphenation， 还可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。
+
新的展示性布局
+
为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。
+
+
+
+ +

译注：

+ +

被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk

+ +

+ +

diff --git a/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..6aa6081ca7 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,44 @@ +--- +title: HTML5 入门 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - Basic + - Guide + - HTML + - HTML5 + - NeedsContent + - Web +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5是最新的第五代HTML标准。它不仅提供丰富的媒体支持，而且还增强了对创建一个能够与用户进行交互的Web应用的支持，使他/她的本地数据和服务器交互比以前更有效，更容易。

+ +

一些HTML5特性仍然不被某些浏览器支持。但是，Gecko已经开始推广，火狐浏览器也对HTML5的支持非常好，并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个HTML5主页中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息，请参阅 CanIUse 网站

+ +

用HTML5的doctype声明文件包含HTML5标记

+ +

HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：

+ +
<!DOCTYPE html>
+ +

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。

+ +

这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。

+ +

用<meta charset>声明字符集

+ +

在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的{{HTMLElement("meta")}}元素，现在它变得非常简单：

+ +
<meta charset="UTF-8">
+ +

把这个放到你的{{HTMLElement("head") }}，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用UTF-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。

+ +

值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII。这样做是为了加强安全，防止某些类型的攻击。

+ +

使用新的HTML5解析器

+ +

html5的解析器分析主要是从标签的语义进行，并且语义化标签在html5中得到更加严格的定义。在H5之前，只有明确定义的标签被才能使用，意味着一旦只要有一个小错误在标签上（大部分网站只要有一个），表现出来的形式就是未定义的标签。从本质上讲，这导致所有的浏览器使用相同的标签时，产生的作用和表现的形式都不一样。如今面对标签问题，所有的浏览器商必须定义一个相同标准。

+ +

这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准，同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签，html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题

+ +

别担心，你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了！

diff --git a/files/zh-cn/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index befe2acc41..0000000000 --- a/files/zh-cn/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: 约束验证 -slug: Web/Guide/HTML/HTML5/Constraint_validation -translation_of: Web/Guide/HTML/HTML5/Constraint_validation ---- -

创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的，但是检查每一个字段的值是否有效并且一致是一件更加困难的事情，而向用户指明错误可能会令人头痛。HTML5 引入了表单相关的一些新的机制：为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型，使得在客户端检查表单内容的工作变得容易。基本上，在填写字段时，通常这些约束都会被检查，而不需要额外的JavaScript代码进行校验； 对于更复杂的约束条件的校验可以尝试使用 HTML5 Constraint Validation API.

- -
Note: HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.
- -

固有和基本的约束

- -

在 HTML5中，声明基本的约束有两种方式：

- - - -

语义的 input 类型

- -

 {{ htmlattrxref("type", "input") }} 特性中固有约束：

- - - - - - - - - - - - - - - - - - - - - -
Input 类型约束描述Associated violation
<input type="URL">值必须是绝对的URL, 即，是下面的某一种: -
    -
  • a valid URI (as defined in RFC 3986)
    • -
  • a valid IRI, without a query component (as defined in RFC 3987)
    • -
  • a valid IRI, with a query component without any unescaped non-ASCII character (as defined in RFC 3987)
    • -
  • a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in RFC 3987)
    • -
- 		Type mismatch constraint violation
 <input type="email">The value must follow the ABNF production: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) where: -
    -
  • atext is defined in RFC 5322, i.e., a US-ASCII letter (A to Z and a-z), a digit (0 to 9) or one of the following! # $ % & ' * + - / = ? ` { } | ~ special character,
    • -
  • ldh-str is defined in RFC 1034, i.e., US-ASCII letters, mixed with digits and - grouped in words separated by a dot (.).
    • -
- -
Note: if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the Type mismatch constraint violation is triggered.
- 		Type mismatch constraint violation
- -

Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. 

- -

验证相关的特性（Attribute）

- -

下列特性用于描述基本的约束：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
特性支持该特性的 Input 类型可接受的值约束描述Associated violation
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordA JavaScript regular expression (compiled with the ECMAScript 5 global, ignoreCase, and multiline flags disabled)输入的值必须匹配设置的模式。Pattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberA valid number输入的值必须大于等于设置的最小值。Underflow constraint violation
date, month, weekA valid date
datetime, datetime-local, timeA valid date and time
{{ htmlattrxref("max", "input") }}range, numberA valid number输入的值必须小于等于设置的最大值。Overflow constraint violation
date, month, weekA valid date
datetime, datetime-local, timeA valid date and time
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elementsnone as it is a Boolean attribute: its presence means true, its absence means falseThere must be a value (if set).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateAn integer number of daysUnless the step is set to the any literal, the value must be min + an integral multiple of the step.Step mismatch constraint violation
monthAn integer number of months
weekAn integer number of weeks
datetime, datetime-local, timeAn integer number of seconds
range, numberAn integer
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} elementAn integer lengthThe number of characters (code points) must not exceed the value of the attribute.Too long constraint violation
- -

Constraint validation process

- -

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

- - - -
Note: - - -
- -

Complex constraints using HTML5 Constraint API

- -

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

- -

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

- -

Constraint combining several fields: Postal code validation

- -

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

- -
-

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

-
- -

As an example, we will add a script checking the constraint validation for this simple form:

- -
<form>
-    <label for="ZIP">ZIP : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">Country : </label>
-    <select id="Country">
-      <option value="ch">Switzerland</option>
-      <option value="fr">France</option>
-      <option value="de">Germany</option>
-      <option value="nl">The Netherlands</option>
-    </select>
-    <input type="submit" value="Validate">
-</form>
- -

This displays the following form: 

- -

- -

First, we write a function checking the constraint itself:

- -
function checkZIP() {
-  // For each country, defines the pattern that the ZIP has to follow
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
-  };
-
-  // Read the country id
-  var country = document.getElementById("Country").value;
-
-  // Get the NPA field
-  var ZIPField = document.getElementById("ZIP");
-
-  // Build the constraint checker
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // Check it!
-  if (constraint.test(ZIPField.value)) {
-    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
-    // give a message about the format required for this country
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

You can see a live example of the postal code validation.  

- -

Limiting the size of a file before its upload

- -

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.

- -

Here is the HTML part:

- -
<label for="FS">Select a file smaller than 75 kB : </label>
-<input type="file" id="FS">
- -

This displays:

- -

- - - -

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // If there is (at least) one file selected
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Check the constraint
-       FS.setCustomValidity("The selected file must not be larger than 75 kB");
-       return;
-     }
-  }
-  // No custom constraint violation
-  FS.setCustomValidity("");
-}
- - - -

Finally we hook the method with the correct event:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

You can see a live example of the File size constraint validation.

- -

Visual styling of constraint validation

- -

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

- -

Controlling the look of elements

- -

The look of elements can be controlled via CSS pseudo-classes.

- -

:required and :optional CSS pseudo-classes

- -

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

- -

:-moz-placeholder CSS pseudo-class

- -

See :-moz-placeholder.

- -

:valid :invalid CSS pseudo-classes

- -

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

- -

Default styles

- -

Controlling the text of constraints violation

- -

The x-moz-errormessage attribute

- -

The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.

- -
-

Note: This extension is non-standard.

-
- -

Constraint API's element.setCustomValidity()

- -

The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.

- -

Constraint API's ValidityState object

- -

The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusion

diff --git a/files/zh-cn/web/guide/html/html5/index.html b/files/zh-cn/web/guide/html/html5/index.html deleted file mode 100644 index 34bd9fb118..0000000000 --- a/files/zh-cn/web/guide/html/html5/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - JavaScript - - PHP - - Web - - Web 开发 - - angularjs - - nodejs - - vuejs - - 帮助 - - 指南 - - 综述 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现：

- - - -

设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。

- - - -
-
-

语义

- -
-
HTML5 中的区块和段落元素
-
HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.
-
使用 HTML5 的音频和视频
-
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。
-
表单的改进
-
看一下 HTML5 中对 web 表单的改进：强制校验API，一些新的属性，一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ，新的 {{HTMLElement("output")}} 元素。
-
新的语义元素
-
除了节段，媒体和表单元素之外，还有众多的新元素，例如 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}}，这增加了有效的 HTML5 元素的数量。
-
{{HTMLElement("iframe")}} 的改进
-
使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。
-
MathML
-
允许直接嵌入数学公式。
-
HTML5 入门
-
本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。
-
HTML5 兼容的解析器
-
用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。
-
- -

通信

- -
-
Web Sockets
-
允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
-
Server-sent events
-
允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
-
WebRTC
-
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
-
- -

离线 & 存储

- -
-
离线资源：应用程序缓存
-
火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。
-
在线和离线事件
-
Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
-
WHATWG 客户端会话和持久化存储 (又名 DOM 存储)
-
客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。
-
IndexedDB
-
是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。
-
自 web 应用程序中使用文件
-
对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的 {{HTMLElement("input")}} 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。
-
- -

多媒体

- -
-
使用 HTML5 音视频
-
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。
-
WebRTC
-
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。
-
使用 Camera API
-
允许使用，操作计算机摄像头，并从中存储图像。
-
Track 和 WebVTT
-
 {{HTMLElement("track")}} 元素支持字幕和章节。WebVTT 一个文本轨道格式。
-
- -

3D, 图像 & 效果

- -
-
Canvas 教程
-
了解有关新的 {{HTMLElement("canvas")}} 元素以及如何在火狐中绘制图像和其他对象。
-
HTML5 针对 <canvas> 元素的文本 API
-
HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。
-
WebGL
-
WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。
-
SVG
-
一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。
-
 
-
-
- -
-

性能 & 集成

- -
-
Web Workers
-
能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
-
XMLHttpRequest Level 2
-
允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。
-
即时编译的 JavaScript 引擎
-
新一代的 JavaScript 引擎功能更强大，性能更杰出。
-
History API
-
允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
-
contentEditable 属性：把你的网站改变成 wiki !
-
HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。
-
拖放
-
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
-
HTML 中的焦点管理
-
支持新的 HTML5 activeElement 和 hasFocus 属性。
-
基于 Web 的协议处理程序
-
你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
-
requestAnimationFrame
-
允许控制动画渲染以获得更优性能。
-
全屏 API
-
为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
-
指针锁定 API
-
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
-
在线和离线事件
-
为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。
-
- -

设备访问

- -
-
使用 Camera API
-
允许使用和操作计算机的摄像头，并从中存取照片。
-
触控事件
-
对用户按下触控屏的事件做出反应的处理程序。
-
使用地理位置定位
-
让浏览器使用地理位置服务定位用户的位置。
-
检测设备方向
-
让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。
-
指针锁定 API
-
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
-
- -

样式

- -

CSS 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

- -
-
新的背景样式特性
-
现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 多背景。
-
更精美的边框
-
现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。
-
为你的样式设置动画
-
使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。
-
排版方面的改进
-
作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 hyphenation， 还可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。
-
新的展示性布局
-
为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。
-
-
-
- -

译注：

- -

被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk

- -

- -

diff --git a/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 55c2e8df5e..0000000000 --- a/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: HTML5 入门 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - Basic - - Guide - - HTML - - HTML5 - - NeedsContent - - Web -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5是最新的第五代HTML标准。它不仅提供丰富的媒体支持，而且还增强了对创建一个能够与用户进行交互的Web应用的支持，使他/她的本地数据和服务器交互比以前更有效，更容易。

- -

一些HTML5特性仍然不被某些浏览器支持。但是，Gecko已经开始推广，火狐浏览器也对HTML5的支持非常好，并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个HTML5主页中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息，请参阅 CanIUse 网站

- -

用HTML5的doctype声明文件包含HTML5标记

- -

HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：

- -
<!DOCTYPE html>
- -

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。

- -

这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。

- -

用<meta charset>声明字符集

- -

在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的{{HTMLElement("meta")}}元素，现在它变得非常简单：

- -
<meta charset="UTF-8">
- -

把这个放到你的{{HTMLElement("head") }}，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用UTF-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。

- -

值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII。这样做是为了加强安全，防止某些类型的攻击。

- -

使用新的HTML5解析器

- -

html5的解析器分析主要是从标签的语义进行，并且语义化标签在html5中得到更加严格的定义。在H5之前，只有明确定义的标签被才能使用，意味着一旦只要有一个小错误在标签上（大部分网站只要有一个），表现出来的形式就是未定义的标签。从本质上讲，这导致所有的浏览器使用相同的标签时，产生的作用和表现的形式都不一样。如今面对标签问题，所有的浏览器商必须定义一个相同标准。

- -

这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准，同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签，html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题

- -

别担心，你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了！

diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 881453191d..11c7ddf8fc 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -172,7 +172,7 @@ /zh-TW/docs/HTML/Element /zh-TW/docs/Web/HTML/Element /zh-TW/docs/HTML/Element/HTML_元素 /zh-TW/docs/Web/HTML/Element /zh-TW/docs/HTML/Element/a /zh-TW/docs/Web/HTML/Element/a -/zh-TW/docs/HTML/HTML5 /zh-TW/docs/Web/Guide/HTML/HTML5 +/zh-TW/docs/HTML/HTML5 /zh-TW/docs/orphaned/Web/Guide/HTML/HTML5 /zh-TW/docs/HTML/HTML5_表單 /zh-TW/docs/Learn/Forms /zh-TW/docs/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-TW/docs/HTML5_Cross_Browser_Polyfills /zh-TW/docs/orphaned/HTML5_Cross_Browser_Polyfills @@ -661,6 +661,8 @@ /zh-TW/docs/Web/Guide/HTML/Event_attributes /zh-TW/docs/Learn/JavaScript/Building_blocks/Events /zh-TW/docs/Web/Guide/HTML/Forms /zh-TW/docs/Learn/Forms /zh-TW/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /zh-TW/docs/Learn/Forms/How_to_structure_a_web_form +/zh-TW/docs/Web/Guide/HTML/HTML5 /zh-TW/docs/orphaned/Web/Guide/HTML/HTML5 +/zh-TW/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/Web/Guide/Performance/Using_web_workers /zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers /zh-TW/docs/Web/Guide/圖像 /zh-TW/docs/Web/Guide/Graphics /zh-TW/docs/Web/HTML/Canvas /zh-TW/docs/Web/API/Canvas_API @@ -668,8 +670,8 @@ /zh-TW/docs/Web/HTML/Element/HTML_元素 /zh-TW/docs/Web/HTML/Element /zh-TW/docs/Web/HTML/Element/導航欄 /zh-TW/docs/Web/HTML/Element/nav /zh-TW/docs/Web/HTML/Forms_in_HTML /zh-TW/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/zh-TW/docs/Web/HTML/HTML5 /zh-TW/docs/Web/Guide/HTML/HTML5 -/zh-TW/docs/Web/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/zh-TW/docs/Web/HTML/HTML5 /zh-TW/docs/orphaned/Web/Guide/HTML/HTML5 +/zh-TW/docs/Web/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/Web/HTML/HTML5_表單 /zh-TW/docs/Learn/Forms /zh-TW/docs/Web/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-TW/docs/Web/HTML/Supported_media_formats /zh-TW/docs/conflicting/Web/Media/Formats diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 9c70666911..d23c601c6b 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -5537,27 +5537,6 @@ "iigmir" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-03-24T00:15:00.017Z", - "contributors": [ - "jackblackevo", - "Shiyou", - "teoli", - "alk03073135", - "wildsky", - "sailplaneTW", - "vigia122", - "Kennyluck", - "Dwchiang" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T22:57:07.502Z", - "contributors": [ - "jackblackevo", - "kwanjaiOP" - ] - }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-04-23T03:25:16.725Z", "contributors": [ @@ -8773,6 +8752,27 @@ "jackblackevo" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2019-03-24T00:15:00.017Z", + "contributors": [ + "jackblackevo", + "Shiyou", + "teoli", + "alk03073135", + "wildsky", + "sailplaneTW", + "vigia122", + "Kennyluck", + "Dwchiang" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T22:57:07.502Z", + "contributors": [ + "jackblackevo", + "kwanjaiOP" + ] + }, "orphaned/Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/JavaScript_概要": { "modified": "2019-01-16T14:44:37.660Z", "contributors": [ diff --git a/files/zh-tw/orphaned/web/guide/html/html5/index.html b/files/zh-tw/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..411dfc2fe8 --- /dev/null +++ b/files/zh-tw/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,109 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 是 HTML 標準中的最新版。在 HTML5 規格還未拍板定案之前，Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容，是 Mozilla  Gecko 解析引擎已經支援的部份，Firefox 和許多其他產品都使用 Gecko 解析引擎。

+ +

(這裡是 另一篇 HTML5 分類整理文章。)

+ +

HTML5 簡介

+ +
+
HTML5 簡介
+
這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。
+
+ +

HTML5 元素

+ +
+
使用 audio 和 video {{ gecko_minversion_inline("1.9.2") }}
+
Firefox 3.5 開始支援 HTML5 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 兩個元素。
+
HTML5 表單 {{ gecko_minversion_inline("2.0") }}
+
簡單介紹 HTML5 對於 Web 表單的改進項目：限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用，並且新增 {{ HTMLElement("output") }} 元素。
+
Sections 和 outlines {{ gecko_minversion_inline("2.0") }}
+
HTML5 對於大綱與分段的支援元素包含有： {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。
+
元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}
+
元素 mark 被用在標註特別相關的重點文字。
+
元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}
+
These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.
+
+ +

支援 Canvas

+ +
+
Canvas 導覽 {{ gecko_minversion_inline("1.8.1") }}
+
 學習如何使用新的 {{ HTMLElement("canvas") }} 元素，以及如何在 Firefox 中繪製圖表與其他物件。
+
給 <canvas> 元素的 HTML5 文字(text) API {{ gecko_minversion_inline("1.9.1") }}
+
{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。
+
+ +

給 Web 應用程式的新功能

+ +
+
Firefox 中的離線資源(含 HTML5 Application Cache 介紹)  {{ gecko_minversion_inline("1.9.1") }}
+
Firefox 完整支援 HTML5 離線資源規格。
+
上線與離線事件 (Online and offline events) {{ gecko_minversion_inline("1.9") }}
+
Firefox 3 支援 WHATWG 的上線與離線事件，這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線，也可以偵測何時建立或結束這個網路連線。
+
WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存) {{ gecko_minversion_inline("1.8.1") }}
+
用戶端 session 與持續性儲存功能，讓 web 應用程式可以在用戶端儲存結構性資料。
+
屬性 contentEditable ，將你的網站變成 wiki ! {{ gecko_minversion_inline("1.9.1") }}
+
HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。
+
在 web 應用程式中存取檔案 {{ gecko_minversion_inline("1.9.2") }}
+
Gecko 已經支援新的 HTML5 檔案 API，讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 {{ HTMLElement("input") }}  type file 的新屬性 multiple 來選取多個檔案。
+
+ +

DOM 新功能

+ +
+
getElementsByClassName
+
支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。
+
拖曳功能 (Drag and drop)
+
HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。
+
HTML Focus 管理
+
支援新的 HTML5 屬性：activeElement 與 hasFocus 。
+
Web-based 協定處理器
+
你現在可以使用 navigator.registerProtocolHandler() 方法將 web 應用程式註冊成協定處理器 (protocol handlers)。
+
+ +

HTML 解析器

+ +

Gecko 的 HTML5相容解析器 — 負責將一份 HTML 文件字元們轉化為 DOM — 已經於 2010 年五月預設為啟用。（備忘：該 HTML5 解析器版本搭載於 Gecko 1.9.2 / Firefox 3.6 當中，是個不穩定的版本，並且不建議用於正式使用環境。）

+ +

其他

+ + + +

有些人自以為它是 HTML5 的一部分……XD

+ + + +

參考

+ + diff --git a/files/zh-tw/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-tw/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..8652e3229a --- /dev/null +++ b/files/zh-tw/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,41 @@ +--- +title: Introduction to HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 是目前最新的HTML標準。它提供一些新特性，不只是支援多媒體，還讓網頁應用程式可以更容易、更有效地與使用者、伺服器互動。

+ +

目前，仍有一些瀏覽器未完全支援HTML5所有特性。但是使用Gecko解析引擎的Firefox已經對HTML5十分支持，現時還繼續開發去支援更多特性。Gecko已經在1.8.1版本開始支持一些HTML5 了。你可以在main HTML5 page找到Gecko解析引擎最近支援的HTML5特性列表。若要更仔細知道多種瀏覽器支援的情況，可瀏覽CanIUse。

+ +

建立HTML5文件並宣告HTML5 doctype

+ +

要建立HTML5文件很簡單，只需要在文件開首宣告：

+ +
<!DOCTYPE html>
+
+ +

對於未支援HTML5標準的瀏覽器，瀏覽器會繼續解析，但要注意一些HTML5的新特性則會忽略、不會支援。

+ +

然而這個宣告方法比以前HTML版本更簡單、更短，更容易記憶，亦減少文件容量。

+ +

利用<meta charset>來宣告字符集

+ +

你需要首先指示瀏覽器要使用哪一種字符集。在以前版本，這需要複雜的<meta>完素；來到HTML5，這變得非常簡單：

+ +
<meta charset="UTF-8">
+ +

將它放置在<head></head>之間。若果你使用的字符集與瀏覽器預先設定的不一樣，瀏覽器會重新解析文件。另外，若你目前並非UTF-8字符集，建議你在網頁中自行設定。

+ +

為了加強安全，HTML5文件限制字符集需要兼容ASCII和最少8位元。

+ +

Using the new HTML5 parser

+ +

The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

+ +

This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

+ +

Don't worry — you don't have to change anything on your Web site — the Web browsers' developers have done everything for you!

diff --git a/files/zh-tw/web/guide/html/html5/index.html b/files/zh-tw/web/guide/html/html5/index.html deleted file mode 100644 index 0e1ec8d54a..0000000000 --- a/files/zh-tw/web/guide/html/html5/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 是 HTML 標準中的最新版。在 HTML5 規格還未拍板定案之前，Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容，是 Mozilla  Gecko 解析引擎已經支援的部份，Firefox 和許多其他產品都使用 Gecko 解析引擎。

- -

(這裡是 另一篇 HTML5 分類整理文章。)

- -

HTML5 簡介

- -
-
HTML5 簡介
-
這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。
-
- -

HTML5 元素

- -
-
使用 audio 和 video {{ gecko_minversion_inline("1.9.2") }}
-
Firefox 3.5 開始支援 HTML5 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 兩個元素。
-
HTML5 表單 {{ gecko_minversion_inline("2.0") }}
-
簡單介紹 HTML5 對於 Web 表單的改進項目：限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用，並且新增 {{ HTMLElement("output") }} 元素。
-
Sections 和 outlines {{ gecko_minversion_inline("2.0") }}
-
HTML5 對於大綱與分段的支援元素包含有： {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。
-
元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}
-
元素 mark 被用在標註特別相關的重點文字。
-
元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}
-
These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.
-
- -

支援 Canvas

- -
-
Canvas 導覽 {{ gecko_minversion_inline("1.8.1") }}
-
 學習如何使用新的 {{ HTMLElement("canvas") }} 元素，以及如何在 Firefox 中繪製圖表與其他物件。
-
給 <canvas> 元素的 HTML5 文字(text) API {{ gecko_minversion_inline("1.9.1") }}
-
{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。
-
- -

給 Web 應用程式的新功能

- -
-
Firefox 中的離線資源(含 HTML5 Application Cache 介紹)  {{ gecko_minversion_inline("1.9.1") }}
-
Firefox 完整支援 HTML5 離線資源規格。
-
上線與離線事件 (Online and offline events) {{ gecko_minversion_inline("1.9") }}
-
Firefox 3 支援 WHATWG 的上線與離線事件，這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線，也可以偵測何時建立或結束這個網路連線。
-
WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存) {{ gecko_minversion_inline("1.8.1") }}
-
用戶端 session 與持續性儲存功能，讓 web 應用程式可以在用戶端儲存結構性資料。
-
屬性 contentEditable ，將你的網站變成 wiki ! {{ gecko_minversion_inline("1.9.1") }}
-
HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。
-
在 web 應用程式中存取檔案 {{ gecko_minversion_inline("1.9.2") }}
-
Gecko 已經支援新的 HTML5 檔案 API，讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 {{ HTMLElement("input") }}  type file 的新屬性 multiple 來選取多個檔案。
-
- -

DOM 新功能

- -
-
getElementsByClassName
-
支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。
-
拖曳功能 (Drag and drop)
-
HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。
-
HTML Focus 管理
-
支援新的 HTML5 屬性：activeElement 與 hasFocus 。
-
Web-based 協定處理器
-
你現在可以使用 navigator.registerProtocolHandler() 方法將 web 應用程式註冊成協定處理器 (protocol handlers)。
-
- -

HTML 解析器

- -

Gecko 的 HTML5相容解析器 — 負責將一份 HTML 文件字元們轉化為 DOM — 已經於 2010 年五月預設為啟用。（備忘：該 HTML5 解析器版本搭載於 Gecko 1.9.2 / Firefox 3.6 當中，是個不穩定的版本，並且不建議用於正式使用環境。）

- -

其他

- - - -

有些人自以為它是 HTML5 的一部分……XD

- - - -

參考

- - diff --git a/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 7e2eba7335..0000000000 --- a/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Introduction to HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 是目前最新的HTML標準。它提供一些新特性，不只是支援多媒體，還讓網頁應用程式可以更容易、更有效地與使用者、伺服器互動。

- -

目前，仍有一些瀏覽器未完全支援HTML5所有特性。但是使用Gecko解析引擎的Firefox已經對HTML5十分支持，現時還繼續開發去支援更多特性。Gecko已經在1.8.1版本開始支持一些HTML5 了。你可以在main HTML5 page找到Gecko解析引擎最近支援的HTML5特性列表。若要更仔細知道多種瀏覽器支援的情況，可瀏覽CanIUse。

- -

建立HTML5文件並宣告HTML5 doctype

- -

要建立HTML5文件很簡單，只需要在文件開首宣告：

- -
<!DOCTYPE html>
-
- -

對於未支援HTML5標準的瀏覽器，瀏覽器會繼續解析，但要注意一些HTML5的新特性則會忽略、不會支援。

- -

然而這個宣告方法比以前HTML版本更簡單、更短，更容易記憶，亦減少文件容量。

- -

利用<meta charset>來宣告字符集

- -

你需要首先指示瀏覽器要使用哪一種字符集。在以前版本，這需要複雜的<meta>完素；來到HTML5，這變得非常簡單：

- -
<meta charset="UTF-8">
- -

將它放置在<head></head>之間。若果你使用的字符集與瀏覽器預先設定的不一樣，瀏覽器會重新解析文件。另外，若你目前並非UTF-8字符集，建議你在網頁中自行設定。

- -

為了加強安全，HTML5文件限制字符集需要兼容ASCII和最少8位元。

- -

Using the new HTML5 parser

- -

The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

- -

This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

- -

Don't worry — you don't have to change anything on your Web site — the Web browsers' developers have done everything for you!

-- cgit v1.2.3-54-g00ecf