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

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 .< ;/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 <script> hinzu: </script>


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 kopierenDer 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 kopierenDer 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 kopierenDer 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 AttributeFront-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 kopierenDer Code lautet wie folgt:

Kopieren Sie den CodeDer 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:

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