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:
< img alt="about image" src="path/to/image">
Dies ist ein Bild von etwas Interessantem >< /figcaption>
Refine
Vor nicht allzu langer Zeit habe ich < small> 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: </strong><br><strong> <br></strong><br>Code kopieren<br><div class="msgheader"><div class="right">Der Code lautet wie folgt:<span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u></u><link rel="stylesheet" type=text/css href= "path/ to/stylesheet.css"></span> <script type="text/javascript" src="path/to/script.js"></script>
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:
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
Web-Frontend
9. Lokaler Speicher 
10. Mehr semantische Kopf- und Fußzeile