22 Grundkenntnisse über HTML5 (Grafik-Tutorial)_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Die Web-Technologie entwickelt sich so schnell, dass man ausscheidet, wenn man nicht mit der Zeit geht. Um mit dem kommenden HTML5 zurechtzukommen, fasst dieser Artikel daher 22 grundlegende HTML5-Kenntnisse zusammen. Ich hoffe, dass er Ihnen dabei hilft, HTML5 besser zu erlernen. 1. Neue Doctype-Deklaration Die Deklaration von XHTML ist meiner Meinung nach zu lang.

Code kopieren Der Code lautet wie folgt: HTML5 Die Doctype-Deklaration ist sehr kurz, Sie werden sich sofort daran erinnern können, nachdem Sie diese Deklaration gesehen haben. Sie müssen Ihre Gehirnzellen nicht verschwenden, um sich an die lange und etwas ungewöhnliche XHTML-Doctype-Deklaration zu erinnern. Die kurze DOCTYPE-Deklaration von HTML5 ermöglicht es modernen Browsern wie Firefox und Chrome und Browsern wie IE6/7/8, in den (Quasi-)Standardmodus zu wechseln. Sie werden überrascht sein, dass IE6 / 7 kann tatsächlich HTML5-Doctype unterstützen. Tatsächlich wechselt der IE in den Standardmodus, solange der Doctype diesem Format entspricht. 2. Tag

Sehen Sie sich den folgenden einfachen Code an:

Code kopieren Der Code lautet wie folgt: image of Mars .&lt ;/h6>

Leider scheint das h6-Tag hier nichts mit dem img-Tag zu tun zu haben und die Semantik ist nicht klar genug. HTML5 hat dies erkannt und das -Tag übernommen. Wenn das in Kombination mit dem -Tag verwendet wird, können das h6-Tag und das img-Tag kombiniert werden, und der Code wird semantischer.

Code kopieren Der Code lautet wie folgt: Dies ist ein Bild von etwas Interessantem >

Refine Vor nicht allzu langer Zeit habe ich Tags zum Erstellen von Untertiteln im Zusammenhang mit Ihrem Logo. Allerdings wurde das -Tag in HTML5 neu definiert, um es semantischer zu machen. Es wäre eine gute Idee, über die Verwendung dieses Tags für Copyright-Informationen nachzudenken die Website.

4. Entfernen Sie das Typattribut von Javascript- und CSS-Tags Normalerweise fügen Sie das Typattribut zu und hinzu: Code kopieren Der Code lautet wie folgt: In HTML5 wird das Typattribut nicht mehr benötigt, da es etwas überflüssig erscheint. Durch das Entfernen kann der Code prägnanter werden.

Code kopieren Der Code lautet wie folgt:

5 . Ob doppelte Anführungszeichen verwendet werden sollen Das ist etwas verwirrend, HTML5 ist kein XTHML, Sie können die doppelten Anführungszeichen in den Tags weglassen. Ich glaube, dass die meisten Genossen, mich eingeschlossen, es gewohnt sind, doppelte Anführungszeichen hinzuzufügen, weil der Code dadurch standardisierter aussieht. Es hängt jedoch von Ihren persönlichen Vorlieben ab, ob Sie doppelte Anführungszeichen verwenden oder nicht.

Code kopieren Der Code lautet wie folgt: startet den Reaktor.

6. Webinhalte bearbeitbar machen 7. E-Mail-Eingabefeld Eine neue Eingabe wurde in HMTL5 hinzugefügt Das E-Mail-Attribut der Box kann erkennen, ob der Eingabeinhalt dem Schreibformat der E-Mail entspricht. Die Funktion wird immer leistungsfähiger. Vor HTML5 konnte sie nur von JS erkannt werden. Obwohl die integrierte Formularvalidierung bald Realität werden wird, unterstützen viele Browser dieses Attribut noch nicht und behandeln es nur wie ein gewöhnliches Texteingabefeld.

Code kopieren Der Code lautet wie folgt: email: Formular senden

Bisher nicht einmal von modernen Browsern unterstützt Dies Attribut, daher ist dieses Attribut vorerst noch unzuverlässig. 8. Platzhalter im Textfeld (siehe den Suchfeldeffekt in diesem Blog) sind hilfreich, um die Benutzererfahrung zu verbessern. Bisher konnten wir uns nur auf JS verlassen, um eine Belegung zu erreichen Aufgrund der Wirkung von Platzhaltern wird in HTML5 das Platzhalterattribut „Platzhalter“ hinzugefügt.

Code kopieren Der Code lautet wie folgt:

Ebenso unterstützen die aktuellen gängigen modernen Browser dieses Attribut nicht sehr gut. Derzeit nur Chrome und Safari unterstützen dieses Attribut, Firefox und Opera unterstützen diese Eigenschaft nicht.

9. Lokaler Speicher Die lokale Speicherfunktion von HTML5 ermöglicht es modernen Browsern, sich an unsere Eingaben zu „merken“, selbst wenn der Browser geschlossen und aktualisiert wird. Obwohl einige Browser diese Funktion nicht unterstützen, unterstützen IE8, Safari 4 und Firefox 3.5 diese Funktion weiterhin. Sie können sie testen.

10. Mehr semantische Kopf- und Fußzeile Der folgende Code wird in HTML5 nicht mehr existieren

Code kopieren Der Code lautet wie folgt: ... ...

Normalerweise definieren wir ein Div für Kopf- und Fußzeile und fügen dann eine weitere ID hinzu , aber die Tags und können direkt in HTML5 verwendet werden, sodass der obige Code wie folgt umgeschrieben werden kann:

Code kopieren Der Code lautet wie folgt: ... .. .

Achten Sie darauf, diese beiden Tags nicht mit der Kopf- und Fußzeile der Website zu verwechseln, es handelt sich lediglich um Container, die sie darstellen.

11. Die Unterstützung des IE-Browsers für HTML5 ist nicht gut, was jedoch auch ein großes Hindernis für die schnellere Popularisierung von HTML5 darstellt ist immer noch sehr gut. IE analysiert alle neuen Tags in HTML5 in Inline-Elemente, aber tatsächlich handelt es sich um Elemente auf Blockebene, daher ist es notwendig, einen Stil für sie zu definieren:

Code kopieren Der Code lautet wie folgt: Kopfzeile, Fußzeile, Artikel, Abschnitt, Navigation, Menü, hgroup { Anzeige: Block ; }

Trotzdem kann der IE diese neuen HTML5-Tags immer noch nicht analysieren. Derzeit müssen Sie Javascript verwenden, um dieses Problem zu lösen:

Code kopieren Der Code lautet wie folgt: document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup") ; document.createElement("nav"); document.createElement("menu");

Sie können diesen Teil des Javascript-Codes verwenden, um den IE besser zu analysieren HTML5

Code kopieren Der Code lautet wie folgt: 12. Titelgruppe (hgroup) Dies ähnelt dem zweiten Tipp. Wenn Sie die Tags h1 und h2 verwenden, um den Namen bzw. den Untertitel der Website darzustellen, werden die beiden Titel, die ihrer Natur nach eng miteinander verbunden sind, nicht miteinander verknüpft. Zu diesem Zeitpunkt können Sie sie mit dem Tag kombinieren, sodass der Code semantischer wird.

Code kopieren Der Code lautet wie folgt: Fanseite zurückrufen ;

13. Erforderliche Attribute Front-End-Mitarbeiter müssen viele Formularvalidierungsprojekte durchgeführt haben, eines davon ist sehr wichtig Es gibt einige Eingabefelder, die ausgefüllt werden müssen, daher müssen Sie Javascript verwenden, um sie zu überprüfen. In HTML5 wurde ein neues Attribut „muss ausgefüllt werden“ hinzugefügt: erforderlich. Es gibt zwei Möglichkeiten, das erforderliche Attribut zu verwenden. Die zweite Methode ist struktureller, während die erste prägnanter ist.

Code kopieren Der Code lautet wie folgt:

Mit diesem Attribut wird das Formular eingereicht werden kann. Die Überprüfung wird einfacher. Schauen Sie sich das einfache Beispiel unten an:

Kopieren Sie den Code Der Code lautet wie folgt folgt: Ihr Name: Go

Wenn das Eingabefeld leer ist, wird das Formular nicht erfolgreich gesendet.

14. Fokus automatisch erhalten Ebenso erfordert HTML5 kein Javascript mehr, um das Problem des automatischen Erhaltens des Fokus für Eingabefelder zu lösen. Wenn ein Eingabefeld ausgewählt werden soll oder den Eingabefokus erhalten soll, fügt HTML5 hinzu ein neues Attribut Autofokus:

Code kopieren Der Code lautet wie folgt: &lt ;input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">

Autofokus kann auch als „autofocus=autofocus“ geschrieben werden. , das scheint eher Standard zu sein, das hängt von Ihren persönlichen Vorlieben ab.

15. Unterstützung für die Audiowiedergabe HTML5 bietet den Tag , der das Problem löst, dass man sich in der Vergangenheit auf Plug-ins von Drittanbietern verlassen musste, um Audiodateien abzuspielen. Bisher unterstützen nur wenige der neuesten Browser dieses Tag.

Code kopieren Der Code lautet wie folgt: Laden Sie diese Datei herunter.

Warum gibt es zwei Formate von Audiodateien? Da es Unterschiede in den von Firefox- und Webkit-Browsern unterstützten Formaten gibt, kann Firefox nur .ogg-Dateien unterstützen, während Webkit nur .mp3-Dateien unterstützt. Die Lösung besteht darin, zwei Versionen von Audiodateien zu erstellen, damit sie mit Firefox und Webkit kompatibel sind . Bitte beachten Sie, dass der IE dieses Tag nicht unterstützt. 16. Unterstützung für die Videowiedergabe Wie das -Tag bietet HTML5 auch Unterstützung für das YouTube hat außerdem eine neue HTML5-Videoeinbettung angekündigt. Schade ist, dass die HTML5-Spezifikation keinen bestimmten Video-Codec vorgibt, sondern die Entscheidung dem Browser überlässt. Dies führt zu einem Browser-Kompatibilitätsproblem. Obwohl Safari und IE9 beide Videos im H.264-Format unterstützen (Flash Player kann sie abspielen), unterstützen Firefox und Opera die Open-Source-Formate Theora und Vorbis. Daher müssen bei der Anzeige von HTML5-Videos zwei Formate vorbereitet werden.

Code kopieren Der Code lautet wie folgt: Ihr Browser ist alt. laden Sie stattdessen dieses Video herunter. &lt ;/div> Es ist zu beachten, dass das Typattribut zwar weggelassen werden kann, der Browser es jedoch schneller analysieren kann, wenn es hinzugefügt wird Genaue Videodateien. Nicht alle Browser unterstützen HTML5-Videos, also seien Sie darauf vorbereitet, stattdessen die Flash-Version zu verwenden. Die Entscheidung liegt natürlich bei Ihnen 17 Preload-Attribut: zuerst Bestimmen Sie, ob das Video vorab geladen werden muss. Wenn der Besucher eine Seite mit vielen Videos besucht, ist es notwendig, ein Video vorab zu laden, was dem Besucher Wartezeit ersparen und das Benutzererlebnis verbessern kann. Sie können dem &lt ;video>-Tag zur Implementierung der Vorladefunktion ... [/code]

18. Anzeigesteuerung Das Anzeigesteuerungsattribut kann dem Video eine Wiedergabe- und Pausensteuerung hinzufügen. Es ist zu beachten, dass der Anzeigeeffekt bei jedem Browser unterschiedlich sein kann.

Code kopieren Der Code lautet wie folgt: ...

19. Mit regulären Ausdrücken in HTML5 , wir kann reguläre Ausdrücke direkt verwenden -z]{4, 10}"> Gehe zu

20. Browser-Paarung erkennen. Unterstützung für HTML5-Attribute

Da jeder Browser unterschiedliche Unterstützung für HTML5-Attribute bietet, hat dies zu einigen Kompatibilitätsproblemen geführt. Sie können jedoch Methoden verwenden, um zu erkennen, ob der Browser diese Attribute unterstützt. Wenn der Code im obigen Beispiel erkennen möchte, ob das Musterattribut vom Browser erkannt wird, können Sie es mit Javascript-Code erkennen.

Code kopieren Der Code lautet wie folgt: alert( 'pattern' in document.createElement ('input') ) // boolean; Tatsächlich ist dies eine gängige Methode zur Bestimmung der Browserkompatibilität. Die jQuery-Bibliothek verwendet diese Methode häufig. Der obige Code erstellt ein Eingabe-Tag und prüft, ob das Musterattribut vom Browser unterstützt wird. Wenn es unterstützt wird, unterstützt der Browser diese Funktion, andernfalls nicht.

Code kopieren Der Code lautet wie folgt: > if ( !'pattern' in document.createElement('input') ) { // client-/serverseitige Validierung durchführen }

21. Balise de marquage La balise est utilisée pour mettre en évidence le texte qui doit souligner visuellement son importance pour l'utilisateur. Les caractères enveloppés dans cette balise doivent être. pertinent au comportement actuel de l’utilisateur. Par exemple, si je recherche « Open your Mind » sur certains blogs, je peux envelopper chaque action avec JavaScript dans une balise

Copier le code Le code est le suivant : Ils ont été interrompus, juste après que Quato ait dit : "Ouvrez votre esprit" . 22. Comment utiliser correctement les balises div Certaines personnes peuvent avoir des questions Avec les balises telles que et , la balise La réponse est oui. Par exemple, si vous souhaitez créer un conteneur pouvant envelopper un contenu spécial, un gratuit et flexible est certainement le premier choix. Si vous souhaitez créer un article ou un menu de navigation, il est recommandé. que vous utilisiez des balises et plus sémantiques. Beaucoup de gens pensent que HTML5 est peut-être encore loin, alors ils l'ignorent. En fait, de nombreux sites Web ont commencé à utiliser HTML5. En fait, certains des nouveaux attributs et fonctions de HTML5 rendent le code plus concis. est toujours une bonne chose et mérite nos éloges. Enfin, merci d'avoir lu cet article d'introduction sur HTML5. J'espère qu'il pourra vous aider à approfondir votre apprentissage du HTML5.

22 Grundkenntnisse über HTML5 (Grafik-Tutorial)_HTML5-Tutorial-Fähigkeiten

image of Mars .< ;/h6>

Dies ist ein Bild von etwas Interessantem >< /figcaption>

startet den Reaktor.

Fanseite zurückrufen

;

Ils ont été interrompus, juste après que Quato ait dit : "Ouvrez votre esprit"