Home > Article > Web Front-end > 10 HTML5 code snippets ready to use in website production, detailed explanation

10 HTML5 code snippets ready to use in website production, detailed explanation

黄舟Original: 2017-03-22 15:21:062025browse

　HTML is easy to write, but when creating web pages, you often need to do the same tasks repeatedly, such as creating forms. In this article, I collected 10 super useful HTML code snippets, including HTML5 startup templates, blank images, making phone calls and sending text messages, Autocomplete and so on, to help you improve your development speed.

HTML5 Startup Template

When starting a new project, you need a startup template. Here is a simple and clean template that can be used as the basis for HTML5 projects.

<!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>
		
	</body>
</html>

Form to get directions (Google Maps)

Here is a simple but powerful form code where the user can enter his location directions to a specific place. Very useful for contact pages.

<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 GIFs, but I know that even in 2013, many people are still using them. If you are one of them, you might enjoy this Base64 encoded 1 * 1px blank GIF. This way is better than using images.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Email Validated Regular Expressions

HTML5 Great improvements have been made to form functionality, such as allowing regular expression patterns to be used to validate emails.

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Embed Flash

Do you often need to embed Flash files in HTML pages? If so, you'd be better off saving the Flash embed code below 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

Another great feature of the new HTML5 specification is the Video tag, which allows you to easily embed video files. But unfortunately, some browsers cannot handle embedded HTML5 videos. Therefore, this code is compatible with older browsers and uses Flash in browsers that do not support HMTL5 video.

<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>

Call and Text

In mobile web, there is a quick way to establish call and SMS links. Below is a sample code, remember to save it in 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>

Autocomplete feature

Using the dataList element, HTML5 allows you to create a list of autocomplete data for an input field. 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

HTML5 Allows forced downloading of files using the download attribute. 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, which gave front-end developers a nightmare, has dropped a lot. But some people still use it. If you want to get rid of this old browser, here is a very interesting code to include in your HTML page to make IE6 crash.

<style>*{position:relative}</style><table><input></table>

The above is the detailed content of 10 HTML5 code snippets ready to use in website production, detailed explanation. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Using HTML5+SignalR2.0 (.Net) to realize code sharing of native Web videosNext article：Using HTML5+SignalR2.0 (.Net) to realize code sharing of native Web videos

See more