10 HTML5 code snippets available at any time during website creation,
When you start a new project, you need a launch template. Here is a simple and clean template, which can be usedHTML5The foundation of the project.
<!DOCTYPE html>Get the location form (Google Maps)
Here is a simple but powerful form code. You can enter its position to indicate a specific place. It is very useful for the contact page.
<form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your 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 Image
I don't recommend using transparent GIF, But I know that even in 2013, many people still use them. If you are one of them, you may enjoy this Base64 encoded 1 * 1px blank GIF. This method is better than the image used.
Regular Expression for Email Verification
HTML5The table list function is very correct. For example, you can use the regular expression mode to verify email.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />Embedded Flash
Do you often needHTMLEmbedded Flash files in the page? If yes, you will save the following Flash Embedded code for future use.
<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>HTML5 video with Flash fallback
NewHTML5Another major feature of the specifications is the Video tag, which allows you to easily Embed Video files. Unfortunately, some browsers cannot process embedded HTML5 videos. Therefore, it is compatible with the code of the old browser. Flash is used in browsers that do not support HMTL5 videos.
<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" /> </object></video>Call and send text message
In mobile Web pages, there is a quick way to establish call and SMS links. The following is a sample code. Remember to add it to your code snippet library.
<a href="tel:1-408-555-5555">1-408-555-5555</a><a href="sms:1-408-555-1212">New SMS Message</a>Automatic completion
Use the dataList element,HTML5Allows you to create a list of input fields that automatically complete data. Super useful! Here is a sample code.
<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>Downloadable files
HTML5You can use the download attribute to forcibly download an object. Here is a standard link to a downloadable file.
<!-- will download as "expenses.pdf" --><a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>Crash IE6
In 2013, the market share of Internet Explorer 6, a nightmare for front-end developers, has dropped a lot. But some people are still using it. If you want to get rid of this old browser, here is a very interesting code, including in yourHTMLPage, causing IE6 to crash.
<style>*{position:relative}</style>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
