10个最佳的HTML5代码段,以简化您的开发任务

摘要:10个最佳的HTML5代码段,以简化您的开发任务

In this article, we have compiled 10 HTML5 Code Snippets which will help you enable HTML5 markup on your site and web related projects quick and hassle free.

1. HTML5 Ready CSS Reset

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

 
Source  

2. HTML5 Video with Flash Fallback

<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&amp;image=__POSTER__.JPG&amp;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>

 
Source  

3. HTML5 Starter Page

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		<script scr ="script/script.js"></script>

	</head>

	<body>

	<header>

	<nav>

	</nav>
	</header>

	<footer>
	</footer>

	</body>
	</html>

 
Source  

4. Creating a Google Static Map

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
	<title>Geo Location</title>

	<style type="text/css" media="screen">
		html{ height: 100%; }
		body{ height: 100%; margin: 0; padding: 0; }
		#map{ width: 100%; height: 100%; }
	</style>

		<!-- jQuery Min -->
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

		<!-- Google Maps -->
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<script charset="utf-8" type="text/javascript">
		mapWidth = screen.width;
		mapHeight = screen.height;

		$(document).ready(function(){
			var geo = navigator.geolocation;
			if( geo ){
				//Used for Static Maps
				geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}

			function createStaticMarker( markerColor, markerLabel, lat, lng ){
				return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
			}

			function createStaticMap( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var zoom = 20;
				var sensor = true;

				var img = $("<img>");
					img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
								"center=" +
								lat + "," +
								lng +
								"&zoom=" + zoom +
								"&size=" + mapWidth + "x" + mapHeight +
								createStaticMarker( "blue", "1", lat, lng ) +
								"&sensor=" + sensor } );
					return img;
			}

			function showLocation( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var latlng = new google.maps.LatLng( lat, lng );

				$("#map").html( createStaticMap( position ) )

			}

			function mapError( e ){
				var error;
				switch( e.code ){
					case 1:
						error = "Permission Denied";
					break;
					case 2:
						error = "Network or Satellites Down";
					break;
					case 3:
						error = "GeoLocation timed out";
					break;
					case 0:
						error = "Other Error";
					break;
				}
				$("#map").html( error );
			}

		});
		</script>

	</head>
	<body>
		<div id="map">

		</div>
	</body>
</html>

 
Source  

5. Plain HTML5 Starter Template

1.	<!DOCTYPE html>
2.	<html>
3.		<head>
4.			<meta charset="utf-8">
5.			<title>Untitled</title>
6.			<!--[if lt IE 9]>
7.			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
8.			<![endif]-->
9.		</head>
10.		<body>
11.
12.		</body>
13.	</html>

 
Source  

6. HTML5 Page Structure

<!DOCTYPE HTML>

<html>

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Website</title>
</head>

<body>

        <header>
                <nav>
                        <ul>
                                <li>Your menu</li>
                        </ul>
                </nav>
        </header>

        <section>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

        </section>

        <aside>
                <h2>About section</h2>
                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </aside>

        <footer>
                <p>Copyright 2009 Your name</p>
        </footer>

</body>

</html>

 
Source  

7. Context Menu with HTML5

<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>

 
Source  

8. HTML5 Datalist

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

 
Source  

9. Get Directions from (Google Maps)

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

 
Source  

10. HTML5 Email Regexp Validate

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

 
Source  

扩展阅读

企业开发:Flex or HTML5?
拥抱2015:一月推荐给程序员们的技术书
2014年国人开发的最热门的开源软件TOP 100
HTML5定稿了,为什么原生App世界将被颠覆
开发者的10个最佳代码游乐场

为您推荐

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
针对非正式HTML6提案“无需JavaScript的单页应用”引发的论战
HTML6 无 JavaScript 的单页应用引起一片哗然
Jsdom 5.4.1 发布,JavaScript 的 HTML 解析器
40 个重要的 HTML5 面试问题及答案

更多

HTML5
前端技术