10 HTML5 code snippets ready to use in website production, detailed explanation-H5 Tutorial-php.cn

Table of Contents

HTML5 Startup Template

Form to get directions (Google Maps)

Base64 Encoded Blank GIF Image

Email Validated Regular Expressions

Embed Flash

HTML5 video with Flash fallback

Call and Text

Autocomplete feature

Downloadable files

Crash IE6

Home

Web Front-end

H5 Tutorial

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

黄舟

Mar 22, 2017 pm 03:21 PM

　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>

Copy after login

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>

Copy after login

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

Copy after login

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}" />

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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 of this Website

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