Heim Web-Frontend H5-Tutorial Grundlegende HTML5-Tags (HTML5-Video-Tag, Verwendung neuer HTML5-Tags)_HTML5-Tutorial-Fähigkeiten

Grundlegende HTML5-Tags (HTML5-Video-Tag, Verwendung neuer HTML5-Tags)_HTML5-Tutorial-Fähigkeiten

May 16, 2016 pm 03:48 PM
html5基础

1. Änderungen in der Deklaration

2. Geben Sie die Änderung der Zeichenkodierung an, es wird empfohlen, utf-8

in HTML5 zu verwenden

3. Html5 erlaubt

ohne Terminator, was kein Fehler ist

4. End-Tags dürfen nicht geschrieben werden: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

5. Elemente, bei denen das End-Tag weggelassen werden kann, sind: li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

6. Elemente, bei denen alle Tags weggelassen werden können, sind: html, head, body, colgroup, tbody

7. Musste der Attributwerttext in doppelte Anführungszeichen gesetzt werden, kann aber jetzt weggelassen werden

8. Siehe HTML5-Markup-Beispiel

9. Neuer Strukturelementabschnitt: Containerelement. Kapitel, Kopf- und Fußzeilen können in Kombination mit h1, h2... verwendet werden, um die Dokumentstruktur anzuzeigen. Kann auch zum Kapseln von Titelinhalten verwendet werden, aber kein Titel ist unangemessen. Wenn ein Containerelement direkt gestaltet oder mit einem Skript versehen werden muss, um das Verhalten zu definieren, wird empfohlen, div anstelle von section zu verwenden. Funktion: Seiteninhalt in Blöcke aufteilen. Nicht zu verwechseln mit dem Artikelelement, das über einen eigenen vollständigen, unabhängigen Inhalt verfügt. Zusammenfassung: ① Verwenden Sie das Abschnittselement nicht als Seitencontainer zum Festlegen von Stilen, das ist die Aufgabe des div-Elements. ② Wenn das Artikelelement, das Nebenelement oder das Navigationselement besser für die Verwendung geeignet sind, verwenden Sie das Abschnittselement nicht. ③Verwenden Sie das Abschnittselement nicht für Inhaltsblöcke ohne Titel.

10. Neuer Strukturelementartikel: Element auf Blockebene. Stellt einen unabhängigen Inhalt auf der Seite dar, der kontextuell nicht relevant ist. Betonen Sie die Unabhängigkeit, der Abschnitt betont die Segmentierung oder Aufteilung und der Artikel betont die Unabhängigkeit.

11. Neues Strukturelement nebenbei: Element auf Blockebene. Stellt die Inhaltsposition des Artikelelements und den Hilfsinhalt in Bezug auf den Inhalt des Artikelelements dar.

12. Neues Strukturelement Header: Element auf Blockebene. Der Titel der gesamten Seite. Der Header muss mindestens eine Überschrift (h1-h6) oder ein hgroup-Element oder ein nav-Element enthalten.

13. Neues Strukturelement hgroup: Element auf Blockebene. Wird verwendet, um Titel für eine ganze Seite oder einen Inhaltsblock innerhalb einer Seite zu kombinieren. Wenn es nur einen Haupttitel gibt, wird hgroup nicht benötigt.

14. Neue Strukturelement-Fußzeile: Element auf Blockebene. Fußzeile für den Inhaltsblock.

15. Neue Strukturelementadresse: Inline-Element. Präsentieren Sie die Kontaktinformationen des Dokuments, einschließlich Autor, E-Mail usw.

16. Neue Strukturelementnavigation: Element auf Blockebene. Navigationslinks. Traditionelle Navigation, Seitenleistennavigation, In-Page-Navigation und Seitennavigation. Verwenden Sie in H5 kein Menü anstelle von Navigation. Das Menüelement ist eine Reihe von Menüs, die Befehle ausgeben. Es ist ein interaktives Element. Genauer gesagt wird es in Webanwendungen verwendet.

17. Neue Strukturelementfigur: Element auf Blockebene. Ein unabhängiger Teil des Stream-Inhalts stellt im Allgemeinen eine unabhängige Einheit des Dokument-Subjekt-Stream-Inhalts dar. Verwenden Sie das Element figcaption, um einer Gruppe von Abbildungselementen eine Beschriftung hinzuzufügen.

18. Neues Element Video: definiert Video.


Code kopieren
Der Code lautet wie folgt:


19. Neues Element Audio: Definiert Audio.


Code kopieren
Der Code lautet wie folgt:


20. Neues Element einbetten: Verschiedene Medien einfügen, das Format kann Midi, WAV, AIFF, AU, MP3 usw. sein.

21

Code kopieren
Der Code lautet wie folgt:

< object width= "320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6 ,0, 40,0"> name="src" value=""borse.wav"/" />

22. Neue Elementmarkierung: hervorgehobener oder hervorgehobener Text. Ganz ähnlich wie span

23. Fortschritt des neuen Elements: Stellt den laufenden Prozess dar und zeigt den zeitaufwändigen Funktionsprozess in JavaScript an.


Code kopieren
Der Code lautet wie folgt:


24. Neues Element Zeit: stellt Datum und Uhrzeit dar.


Code kopieren
Der Code lautet wie folgt:

Span
wird in H4 25 verwendet. Neues Element Ruby: stellt Ruby-Kommentare dar. Han Han, das in h4 nicht verfügbar ist

26. Neues Element rt: repräsentiert die Interpretation oder Aussprache von Zeichen

27. Neues Element rp: Wird in Ruby verwendet, um den Inhalt zu definieren, der von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.

28. Neues Element wbr: stellt einen weichen Zeilenumbruch dar. Der Unterschied zu br besteht darin, dass br bedeutet, dass hier ein Zeilenumbruch durchgeführt werden muss, während wbr bedeutet, dass kein Zeilenumbruch durchgeführt wird, wenn die Breite des Browsers oder des übergeordneten Elements breit genug ist Die Zeile wird hier automatisch umgebrochen. Wbr ist für zeichenbasierte Sprachen sehr nützlich, scheint aber keine große Auswirkung auf Chinesisch zu haben. Nicht verfügbar in H4.

29. Neues Element Canvas: stellt Grafiken dar. Zum Beispiel: Diagramme, Bilder. Aber: Das Element selbst hat kein Verhalten. Es wird lediglich eine Leinwand bereitgestellt und die Zeichnungs-API wird dem Client-JavaScript angezeigt, sodass das Skript die Zeichnung auf dieser Leinwand zeichnen kann.


Code kopieren
Der Code lautet wie folgt:


30. Neuer Elementbefehl: Stellt die Befehlsschaltfläche dar. Zum Beispiel: Optionsfelder, Kontrollkästchen, Schaltflächen.

Code kopieren
Der Code lautet wie folgt:


Es gibt kein

in HTML4

31. Neue Elementdetails: Zeigt die detaillierten Informationen an, die Details-Benutzer benötigen und erhalten können. Kann in Verbindung mit der Zusammenfassung verwendet werden. Die Zusammenfassung enthält einen Titel oder eine Legende.


Code kopieren
Der Code lautet wie folgt:

summary>html5< ;/summary>this ji a ddddd,you kdkdkdk about html5




32. Neues Element Datagrid: stellt eine Liste von Daten dar . Anzeige in Baumliste

33. Neues Element keygen: gibt den Generierungsschlüssel an

34. Neue Elementausgabe: repräsentiert verschiedene Arten der Ausgabe. Wie zum Beispiel Skript

35. Neue Elementquelle: Medienelement. Definieren Sie Medienressourcen. Verwenden Sie param

in H4

36. Neues Elementmenü: Stellt die Menüliste dar.

Code kopieren
Der Code lautet wie folgt:

< li>< ;/li>

  • Die Verwendung des Menüs in h4 wird nicht empfohlen.

    37. Neuer Eingabeelementtyp E-Mail: Gibt das Texteingabefeld an, in das die E-Mail eingegeben werden muss.

    38. Neue Eingabeelementtyp-URL: gibt an, dass die URL-Adresse eingegeben werden muss

    39. Neue Eingabeelementtypnummer: gibt an, dass ein numerischer Wert eingegeben werden muss.

    40. Neuer Eingabeelementtypbereich: Gibt an, dass numerische Werte innerhalb eines bestimmten Bereichs eingegeben werden müssen

    41. Neue Eingabeelementtyp-Datumsauswahl: Es gibt mehrere neue Eingabetextfelder in h5, mit denen Datums- und Uhrzeitangaben ausgewählt werden können.


    Code kopieren
    Der Code lautet wie folgt:

    Datum----- --- ------Tag, Monat, Jahr auswählen
    Monat-----------Monat, Jahr auswählen
    Woche------------ Woche und Jahr auswählen
    Zeit-------------Uhrzeit auswählen (Stunden und Minuten)
    DatumUhrzeit-------Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen )
    Datetime-local – Wählen Sie Uhrzeit, Tag, Monat, Jahr (Ortszeit) aus

    44.
    1) Elemente abschaffen: Elemente, die nur einige Browser unterstützen: Applet, BGSound (nur vom IE unterstützt), Blink, Marquee und andere Elemente. bgsound (nur von ie unterstützt), marquee (nur von ie unterstützt), daher werden sie in h5 abgeschafft. Applet – kann durch Embed oder Object ersetzt werden. Bgsound – kann durch Audio ersetzt werden. Marquee kann durch JS-Programmierung ersetzt werden.
    2) Tag-Handbuchdefinition: Wird zum Kombinieren von Elementen verwendet. Nutzungsanleitung: Wird hauptsächlich für die Kombination von Bildern und Bildbeschreibungen verwendet:

    Kopieren Sie den Code
    Der Code lautet wie folgt:


    figure label
    Hier ist die Beschreibung von die Bildinformationen



    3) Erklärung des Etikettenhandbuchs: Menüliste definieren. Verwenden Sie diese Bezeichnung, wenn Sie Formularsteuerelemente auflisten möchten. Nutzungsleitfaden: Wird in Menüblöcken zum Definieren von Menülisten oder Menüoptionen verwendet:

    Code kopieren
    Der Code lautet wie folgt:



  • HTML 5

  • CSS

  • < ;li>JavaScript


    Erklärung dieser Website
    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

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    So führen Sie das H5 -Projekt aus So führen Sie das H5 -Projekt aus Apr 06, 2025 pm 12:21 PM

    Ausführen des H5 -Projekts erfordert die folgenden Schritte: Installation der erforderlichen Tools wie Webserver, Node.js, Entwicklungstools usw. Erstellen Sie eine Entwicklungsumgebung, erstellen Sie Projektordner, initialisieren Sie Projekte und schreiben Sie Code. Starten Sie den Entwicklungsserver und führen Sie den Befehl mit der Befehlszeile aus. Vorschau des Projekts in Ihrem Browser und geben Sie die Entwicklungsserver -URL ein. Veröffentlichen Sie Projekte, optimieren Sie Code, stellen Sie Projekte bereit und richten Sie die Webserverkonfiguration ein.

    Was genau bedeutet H5 -Seitenproduktion? Was genau bedeutet H5 -Seitenproduktion? Apr 06, 2025 am 07:18 AM

    Die Produktion von H5-Seiten bezieht sich auf die Erstellung von plattformübergreifenden kompatiblen Webseiten unter Verwendung von Technologien wie HTML5, CSS3 und JavaScript. Sein Kern liegt im Parsingcode des Browsers, der Struktur-, Stil- und interaktive Funktionen macht. Zu den allgemeinen Technologien gehören Animationseffekte, reaktionsschnelles Design und Dateninteraktion. Um Fehler zu vermeiden, sollten Entwickler debuggen werden. Leistungsoptimierung und Best Practices umfassen Bildformatoptimierung, Anforderungsreduzierung und Codespezifikationen usw., um die Ladegeschwindigkeit und die Codequalität zu verbessern.

    So erstellen Sie H5 -Klicksymbol So erstellen Sie H5 -Klicksymbol Apr 06, 2025 pm 12:15 PM

    Zu den Schritten zum Erstellen eines H5 -Klicksymbols gehören: Vorbereitung eines quadratischen Quellenbildes in der Bildbearbeitungssoftware. Fügen Sie die Interaktivität in den H5 -Editor hinzu und legen Sie das Klickereignis fest. Erstellen Sie einen Hotspot, der das gesamte Symbol abdeckt. Stellen Sie die Aktion von Klickereignissen fest, z. B. zum Springen zur Seite oder zum Auslösen von Animationen. Exportieren Sie H5 als HTML-, CSS- und JavaScript -Dateien. Stellen Sie die exportierten Dateien auf einer Website oder einer anderen Plattform ein.

    Was ist die H5 -Programmiersprache? Was ist die H5 -Programmiersprache? Apr 03, 2025 am 12:16 AM

    H5 ist keine eigenständige Programmiersprache, sondern eine Sammlung von HTML5, CSS3 und JavaScript zum Erstellen moderner Webanwendungen. 1. HTML5 definiert die Webseitenstruktur und -inhalt und bietet neue Tags und APIs. 2. CSS3 steuert Stil und Layout und führt neue Funktionen wie Animation ein. 3. JavaScript implementiert dynamische Interaktion und verbessert Funktionen durch DOM -Operationen und asynchrone Anfragen.

    Worauf bezieht sich H5? Erforschen des Kontextes Worauf bezieht sich H5? Erforschen des Kontextes Apr 12, 2025 am 12:03 AM

    H5REFERSTOHTML5, ApivotaltechnologyInwebdevelopment.1) HTML5IntroducesNewelementsandapisrich, Dynamicwebapplications.2) ITSUPP ortsmultimediaWitHoutPlugins, BETHINGINGUSEREXPERICERCROSSDEVICES.3) SEMANTICELEMENTSIMPROVEPENTENTENTENTRUCTENTRUCTELUREANDSEO.4) H5'SRespo

    Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Apr 05, 2025 pm 11:42 PM

    Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

    Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Apr 05, 2025 pm 11:36 PM

    H5 (HTML5) eignet sich für leichte Anwendungen wie Marketingkampagnen, Produktdisplayseiten und Micro-Websites für Unternehmenswerbung. Seine Vorteile liegen in plattformartigen und reichhaltigen Interaktivität, aber seine Einschränkungen liegen in komplexen Interaktionen und Animationen, lokalen Ressourcenzugriff und Offline-Funktionen.

    So erstellen Sie Popup-Fenster mit H5 So erstellen Sie Popup-Fenster mit H5 Apr 06, 2025 pm 12:12 PM

    Die Erstellungsschritte für die Erstellung von Popup-Fenstern in H5: 1. Bestimmen Sie die Auslösermethode (klicken, Zeit, Beenden, Scrollen); 2. Entwurfsinhalt (Titel, Text, Aktionsschaltfläche); 3.. Set Style (Größe, Farbe, Schriftart, Hintergrund); 4. Implementieren Sie Code (HTML, CSS, JavaScript); 5. Test und Bereitstellung.

    See all articles