Webpage Production Webjx Article Introduction: 10 practical HTML5 code snippets that you should definitely collect.
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!
The easiest template for HTML5If 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=></script>
<![endif]-->
</head>
<body>
The main content of the web
</body>
</html>Form Get Google Maps
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= 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>Base64 encoded blank GIF file of 1x1 size
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///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7> Regular Form Verification EmailRegular form is allowed to be used in HTML5 for input verification:
<input type=text data=your-flash-file.swfwidth=0 height=0>
<param name=movie value=your-flash-file.swf />
<param name=quality value=high/>
</object>Film and supports fallback
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 alt=__TITLE__
title=No video playback capabilities, please download the video below />
</object>
</video>iPhone call & sms links
Apple introduces a very convenient way to create phone and text links in iPhone. The code is as follows:
<a href=tel:1-408-555-5555>1-408-555-5555</a><a href=sms:1-408-555-1212>New SMS Message</a>HTML5's automatic data filling function
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>The file can be downloaded directly<!-- will download as expenses.pdf -->
<a href=/files/adlafjlxjewfasd89asd8f.pdf
download=expenses.pdf>Download Your Expense Report</a>Crash old version browser IE6
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>