Heim  >  Artikel  >  Web-Frontend  >  HTML5-Grundlagen, Teil 1: Erste Schritte

HTML5-Grundlagen, Teil 1: Erste Schritte

黄舟
黄舟Original
2016-12-19 15:55:351396Durchsuche

HTML5 ist eine Sprache zur Organisation von Webinhalten. Ihr Zweck besteht darin, Webdesign und -entwicklung durch die Erstellung einer standardmäßigen und intuitiven UI-Markup-Sprache zu vereinfachen. HTML5 bietet verschiedene Möglichkeiten zum Schneiden und Teilen von Seiten, wodurch Sie Schnittkomponenten erstellen können, die nicht nur zur logischen Organisation der Site verwendet werden können, sondern der Site auch die Möglichkeit zur Aggregation geben. HTML5 kann als „Mapping-Methode von Informationen zum Website-Design“ beschrieben werden, da es die Essenz der Informationszuordnung verkörpert, Informationen unterteilt und Informationen mit Tags versehen, um sie einfach zu verwenden und zu verstehen. Dies ist die Grundlage für die ausdrucksstarke Semantik und praktische Ästhetik von HTML5, die Designern und Entwicklern die Möglichkeit gibt, eine Vielzahl von Inhalten auf allen Ebenen zu veröffentlichen, von einfachen Textinhalten bis hin zu reichhaltigen, interaktiven Inhalten. Alle Multimediainhalte sind enthalten.

HTML5 bietet effiziente Datenverwaltungs-, Zeichen-, Video- und Audio-Tools, die die Entwicklung browserübergreifender Anwendungen im Web und auf tragbaren Geräten erleichtern. HTML5 ist eine der Technologien, die die Entwicklung mobiler Cloud-Computing-Dienste vorantreiben, da es eine größere Flexibilität ermöglicht und die Entwicklung sehr spannender interaktiver Websites unterstützt. Außerdem werden neue Tags und erweiterte Funktionen eingeführt, darunter eine elegante Struktur, Formularsteuerelemente, APIs, Multimedia, Datenbankunterstützung und deutlich verbesserte Verarbeitungsgeschwindigkeiten.

Die neuen Tags in HTML5 sind sehr eindrucksvoll und die Tags fassen ihre Funktionen und Verwendung zusammen. Frühere HTML-Versionen verwendeten eher nicht beschreibende Tags. HTML5 verfügt jedoch über sehr beschreibende, intuitive Tags, die einen umfangreichen Satz von Inhalts-Tags bereitstellen, die den Inhalt sofort identifizierbar machen. Beispielsweise wurde das häufig verwendete Tag um zwei zusätzliche Tags ergänzt: ,

werden auch spezifischere Inhaltstypen genauer beschrieben.

HTML5 bietet:

1. Tags, die genau beschreiben, was sie enthalten sollen
2. Verbesserte Netzwerkkommunikation
Erheblich verbesserter häufig verwendeter Speicher
4. Web Worker läuft im Hintergrund
5. WebSocket-Schnittstelle zum Herstellen einer kontinuierlichen Verbindung zwischen lokaler Anwendung und Server
Bessere Methode zum Abrufen von Speicherdaten
Beschleunigte Seitenspeicherung und Ladegeschwindigkeit
8 für die Verwendung von CSS3 zur Verwaltung der GUI, was bedeutet, dass HTML5 inhaltsorientiert sein kann
9. Verbesserte Browser-Formularverarbeitung
10 und Video, das das Hinzufügen von Grafiken und Videos ermöglicht, ohne Plug-Ins von Drittanbietern zu installieren
12. Geolocation-API-Spezifikation, die die mobile Cloud durch die Nutzung von Smartphone-Standortfunktionen, Diensten und Apps integriert
13 Laden Sie JavaScript-Code herunter, um eine effizientere Kommunikation zwischen Mobilgeräten und Cloud-Diensten zu ermöglichen.

HTML5 sorgt für ein ansprechenderes Erlebnis für Benutzer: Mit HTML5 gestaltete Seiten können ein ähnliches Erlebnis wie Desktop-Anwendungen bieten. HTML5 bietet außerdem eine verbesserte plattformübergreifende Entwicklung durch die Integration der API-Funktionalität in allgegenwärtige Browser. Durch die Verwendung von HTML5 können Entwickler ein modernes Anwendungserlebnis bieten, das reibungslos über alle Plattformen hinweg funktioniert.

Wenn Sie das Wort HTML5 sagen, verwenden Sie ein kurzes Wort, um eine kontinuierliche Innovation auszudrücken. Neues Markup, eine neue Reihe von Methoden und ein gemeinsames Entwicklungsframework, das auf dem Zusammenspiel von HTML5 und seinen beiden komplementären Kollegen CSS3 und Javascript basiert, einem kundenorientierten Ansatz für das Phänomen Der Kern der Anwendung. Zusätzlich zu den zahlreichen Desktop-Implementierungen von Techniken und Methoden der HTML5-Technologie kann HTML5 auch in funktionsreichen Webbrowsern für Mobiltelefone implementiert werden – ein wachsender Markt für Apple iPhones, Google Android und Android-Geräte mit Palm webOS. Die Allgegenwart von Mobiltelefonen ist ein Zeugnis dafür.

Ein sehr wichtiger Aspekt der leistungsstarken Funktionen von HTML5 ist die Informationszuordnung – oder Inhaltsblockierung. Wenn Sie so wollen, führt dieser Ansatz zu einem viel einfacher verständlichen Prozess. Sie können sehen, wie effizient dieses Tool in Bezug auf Design und Entwicklung geworden ist, indem Sie die Kontrolle über diesen Bereich der Webverarbeitung verbessern.

HTML5 kündigt die Entstehung einer effizienteren semantischen Verarbeitung auf Textebene und einer stärkeren Kontrolle über die Formularerstellung und -verwendung an. All diese Funktionen und viele andere Feinheiten der HTML5-Innovation bilden die Grundlage dieses zunehmend vorherrschenden Paradigmas. Viele institutionelle Einheiten, kommerzielle und andere – sogar viele Organisationen, die die Verarbeitung und Kommunikation von Informationen überhaupt nicht als ihre institutionellen Hauptaktivitäten betrachten – sind in unterschiedlichem Maße von der Entwicklung dieses wachsenden Phänomens betroffen.

HTML5 ist keine Wunderlampe und es wird kein Geist erscheinen. Aufgrund seiner technischen und methodischen Vorzüge kommt es dem Polieren einer Wunderlampe jedoch am nächsten.

Planungsseite

Sie werden eine einfache Webseite erstellen. Unterwegs werde ich einige der neuen Tags besprechen, die in HTML5 eingeführt wurden. Um eine effiziente und effektive Webseite zu erstellen, müssen Sie einen Plan erstellen und alle Komponenten berücksichtigen, die Sie erstellen möchten. Die von Ihnen erstellte Webseite weist ein übergeordnetes Design auf, wie in Abbildung 1 dargestellt. Das Seitendesign umfasst einen Kopfzeilenbereich, einen Navigationsbereich, einen Artikelbereich mit drei Abschnittsbereichen und einem Nebenbereich sowie schließlich einen Fußzeilenbereich. Die Seite ist so konzipiert, dass sie im Chrome-Browser von Google funktioniert, wodurch ein Teil der visuellen Unordnung beseitigt wird, die zu Problemen bei der Browserkompatibilität führt und gleichzeitig das Verständnis der zugrunde liegenden Struktur erschwert. Unser Ziel war es, eine Seite zu erstellen, die die Verwendung der neuen HTML5-Tags klar beschreibt und zeigt, wie man damit gut formatierten Code und ein elegantes Seitendesign erstellt.

Abbildung 1. Webseitenplan von Acme United

HTML5-Grundlagen, Teil 1: Erste Schritte

Beim Erstellen dieser Seite werde ich CSS3 einbeziehen, das ich für die korrekte Darstellung von HTML5 benötige Webseiten effizient erstellen. CSS3 ist für den Stil, die Navigation und das allgemeine Erscheinungsbild von HTML5-Seiten von wesentlicher Bedeutung, und seine Eigenschaften, die Sie auf der CSS3-Referenzseite von WsSchool finden (siehe Abschnitt „Ressourcen“), umfassen einige sehr nützliche Elemente, wie z. B. Hintergrund und Schriftart , Festzelt, Animation usw.

Bevor Sie jedoch mit dem Erstellen von Seiten beginnen, müssen Sie einige neue HTML5-Tags lernen.

Header-Bereich

Das Beispiel des Header-Bereichs enthält den Seitentitel und den Untertitel. Das

-Tag wird verwendet, um den Inhalt des Header-Bereichs der Seite zu erstellen. Zusätzlich zur Seite selbst kann das Tag öffentliche Informationen zu -Tag.

Listing 1. Beispiel für

Hier platziert werden

Tags sind in Ordnung ;-Tag, wie in Listing 2 gezeigt. Das -Tag gruppiert Überschriften und verwendet hier die Überschriftenhierarchien
Listing 2. Beispiel für

Untertitel

Navigationsbereich

Sie können das
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn