Webseitenproduktion WebJX Artikel Einführung: 10 Praktische HTML5 -Code -Snippets, die Sie auf jeden Fall sammeln sollten.
HTML5 ist ein wichtiger Meilenstein bei der Entwicklung der Web -Technologie. Wenn Sie für die Front-End-Entwicklung einige Codes finden, die möglicherweise in Zukunft häufig in der Entwicklung wiederverwendet werden müssen, werden Sie nicht ablehnen. Im Folgenden finden Sie mehr als 10 HTML5 -Code -Snippets, die wir sorgfältig gesammelt haben. Ich glaube, es wird dir gefallen!
Die einfachste Vorlage für HTML5Wenn Sie ein neues HTML5 -Projekt starten müssen, benötigen Sie definitiv die einfachste Vorlage. Hier ist eine sehr einfache und klare HTML5 -Vorlage. Ich glaube, es wird jedem gefallen!
<! DocType html><html>
<kopf>
<meta charset = utf-8>
<title> unititled </title>
<!-[wenn lt dh 9]>
<script src => </script>
<! [endif]->
</head>
<body>
Der Hauptinhalt des Webs
</body>
</html> Formular erhalten Google Maps
Hier ist ein sehr einfacher Code. Es verwendet den Benutzer, um den Standort einzugeben und den Google Map -Speicherort zu erhalten, der für die Generierung von Kontaktformularen sehr geeignet ist.
<form action = method = get darget = _blank><Label für = SADDR> LOPITE INTOPLIT </label>
<Eingabe type = textname = saddr />
<Eingabetyp = Hidden name = DADDR
Wert = 350 5th Ave New York, NY 10018 (Empire State Building) />
<Eingabe type = value = Anweisungen abrufen />
</form> base64 codierte leere GIF -Datei mit 1x1 Größe
Ich persönlich empfehle nicht, dieses transparente leere GIF zu verwenden, aber selbst im Jahr 2013 benutzen sie es immer noch. Vielleicht verwenden Sie diese Methode auch gerne.
<img src = Daten: Bild/gif; Base64, r0lgodlhaqabaiaaaaaaaaaaP /// Yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAa7>Für die Eingabeüberprüfung darf in HTML5 in HTML5 verwendet werden:
<Eingabe type = text data = your-flash-file.swfBreite = 0 Höhe = 0>
<param name = move value = your-flash-file.swf />
<param name = qualitywert = hoch/>
</Object> Film und unterstützt Fallback
Eine weitere nützlichste Funktion in HTML5 ist das Video -Tag, mit dem Sie Videodateien einfach einbetten können. Viele alte Browser unterstützen es jedoch nicht, daher ist der folgende Code sehr nützlich
<Videobreite = 640 Höhe = 360 Steuerelemente><Source Src = __ Video __. mp4 type = Video /mp4 />
<Source Src = __ Video __. OGV type = Video /ogg />
<Objektbreite = 640 Höhe = 360 Typ = Anwendung/x-shockwave-flash
Daten = __ Flash __. SWF>
<param name = move value = __ flash __. swf />
<param name = flashvars value = controlBar = Over & amp;
Image = __ Poster __. JPG & amp; Datei = __ Video __. MP4 />
<img src = __ Video __. JPG Breite = 640 Höhe = 360 Alt = __ Titel__
Titel = keine Video -Wiedergabefunktionen, bitte laden Sie das Video unten /> herunter
</Object>
</Video> iPhone Call & SMS -Links
Apple führt eine sehr bequeme Möglichkeit vor, Telefon- und Textlinks im iPhone zu erstellen. Der Code ist wie folgt:
<a href = tel: 1-408-555-5555> 1-408-555-5555 </a><a href = sms: 1-408-555-1212> Neue SMS-Nachricht </a> Die automatische Datenfüllfunktion von HTML5
Mithilfe von Datalistenelementen ermöglicht HTML5 die Verwendung eines Datensatzes, um automatische Füllfunktionen zu generieren. Jetzt müssen Sie keinen JS-Code oder Klassenbibliotheken von Drittanbietern verwenden!
<Eingabe name = Frameworks list = Frameworks /><Datalist ID = Frameworks>
<Option Value = Mootools>
<Option Value = Moobile>
<Option Value = Dojo Toolkit>
<Option Value = jQuery>
<Option Value = yui>
</datalist> Die Datei kann direkt heruntergeladen werden <!-wird als Ausgaben herunterladen.pdf->
<a href =/files/adlafjlxjewfasd89asd8f.pdf
download = expenszen.pdf> Laden Sie Ihren Kostenbericht herunter </a> Crash Old Version Browser IE6
Sie sollten wissen, dass IE6 in China ziemlich verwendet wird. Wenn ich IE6 in Ihrer Webanwendung oder Website nicht unterstütze, fügen Sie diesen Code hinzu und ich glaube, Ihre Benutzer werden IE6 aktualisieren, hehe!
<Style>*{Position: Relativ} </style> <table> <eingabe> </table>