HTML5 is an important milestone in the development of WEB technology. For front-end development, if you can find some codes that may need to be reused frequently in development in the future, I believe you will not refuse. Below are more than 10 HTML5 code snippets we carefully collected. I believe you will like it!
If you need to start a new HTML5 project, you will definitely need the simplest template. Here is a very simple and clear HTML5 template. I believe everyone will like it!
<!DOCTYPE html><html><head><meta charset=utf-8><title>Untitled</title><!--[if lt IE 9]><script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script><![endif]--></head><body> Main content of the web</body></html>
Here is a very simple code. It uses the user to enter the location and get the Google map location, which is very suitable for generating contact forms.
<form action=http://maps.google.com/maps method=get target=_blank> <label for=saddr>Enter location</label> <input type=text name=saddr /> <input type=hidden name=daddr value=350 5th Ave New York, NY 10018 (Empire State Building) /> <input type=submit value=Get directions /></form>
I personally do not recommend using this transparent blank gif, but even in 2013, many people still use it. Maybe you like to use this method too.
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7>
Regular form is allowed to be used in HTML5 for input verification:
<input type=text style="margin-top: 0px; margin-bottom: 15px; padding: 0px; border: 1px solid rgb(43, 153, 230); font-family: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255); width: 1000px; z-index: 1000;"><object type=application/x-shockwave-flash data=your-flash-file.swf width=0 height=0> <param name=movie value=your-flash-file.swf /> <param name=quality value=high/></object>
Another most useful feature in HTML5 is the video tag, which allows you to easily embed video files. However, many old browsers do not support it, so the following code will be very useful
<video width=640 height=360 controls><source src=__VIDEO__.MP4 type=video/mp4 /><source src=__VIDEO__.OGV type=video/ogg /><object width=640 height=360 type=application/x-shockwave-flash data=__FLASH__.SWF><param name=movie value=__FLASH__.SWF /><param name=flashvars value=controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4 /><img src=__VIDEO__.JPG width=640 height=360 style="margin-top: 0px; margin-bottom: 15px; padding: 0px; border: 1px solid rgb(43, 153, 230); font-family: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255); width: 1000px; z-index: 1000;"><a href=tel:1-408-555-5555>1-408-555-5555</a><a href=sms:1-408-555-1212>New SMS Message</a>
Using datalist elements, HTML5 allows the use of a set of data to generate automatic filling functions. Now you don’t need to use third-party js code or class libraries!
<input name=frameworks list=frameworks /> <datalist id=frameworks><option value=MooTools><option value=Moobile><option value=Dojo Toolkit><option value=jQuery><option value=YUI></datalist>
<!-- will download as expenses.pdf --><a href=/files/adlafjlxjewfasd89asd8f.pdf download=expenses.pdf>Download Your Expense Report</a>
You should know that IE6 is quite used in China. If I do not support IE6 in your web application or website, add this code and I believe your users will upgrade IE6, hehe!
<style>*{position:relative}</style><table><input></table>