MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Ihre Suchergebnisse

    HTML5

    HTML5 Demos

    Eine Sammlung von Demos, die die neuesten HTML-Technologien in Aktion zeigen.

    HTML5_Logo_128.png

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

    • Es ist eine neue Version der Sprache HTML, mit neuen Elementen, Attributeen and Verhaltensweisen,
    • und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen. Diese Kombination wird manchmal HTML5 & Freunde genannt und oft zu HTML5 abgekürzt.

    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: Erlaubt präziser zu beschreiben, was der Inhalt ist.
    • Konnektivität: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.
    • Offline & Speicherung: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.
    • Multimedia: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.
    • 2D/3D Graphiken & Effekte: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.
    • Leistung & Integration: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.
    • Gerätezugriff: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.
    • Styling: Lässt Autoren anspruchsvollere Designs schreiben.

    SemantiK

    Gliederungen und Abschnitte in HTML5
    Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: <section>, <article>, <nav>, <header>, <footer>, <aside> und <hgroup>.
    HTML5 Audio und Video benutzen
    Das <audio> und das <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 <input> Attribut type und das neue <output> Element.
    Neue semantische Elemente
    Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> oder <meter>, die Menge gültiger HTML5 Elemente.
    Verbesserung bei <iframe>
    Mithilfe der sandbox, seamless und srcdoc Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von <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 <input> Elementen des Typs file ein. Außerdem gibt es FileReader.

    Multimedia

    HTML5 Audio und Video benutzen
    Das <audio> und das <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 <track> Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.

    3D, graphiKEN & effeKtE

    Canvas-Tutorial
    Lerne mehr über das neue <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 <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 <canvas> Elementen genutzt werden kann.
    SVG
    Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
     

    Leistung & integration

    Web-Arbeiter
    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 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 border-image und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die 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 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 @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.

     

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: matze, nothine, teoli
    Zuletzt aktualisiert von: matze,