10段实用的HTML5代码

1.HTML5编写的CSS Reset
CSS Reset也可以写成Reset CSS，即重设浏览器样式。

/* 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 { color:#000; text-decoration:none; }
mark { 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 */

复制代码

2.HTML5 Video with Flash Fallback
解释下该段代码，如果浏览器不支持HTML5视频播放，那么会自动跳回Flash播放。

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

复制代码

3.HTML5 Starter页面

<!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>
<script scr ="script/script.js"></script>
</head>
<body>
<header>
<nav>
</nav>
</header>
<footer>
</footer>
</body>
<html>

复制代码

4.创建谷歌静态地图

<!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>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<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>

复制代码

5.纯HTML5 Starter模板

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

复制代码

6.HTML5页面结构

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

复制代码

7.上下文菜单

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

复制代码

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>

复制代码

9.从谷歌地图上获取路线

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

复制代码

10.HTML5电子邮件正则表达式验证

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

复制代码

10段实用的HTML5代码的更多相关文章

Html5 代码
随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5. 本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使 ...
绝对应当收藏的10个实用HTML5代码片段（转）
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
[转载].NET开发常用的10条实用代码
1.读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine(“Platform: {0}” ...
21 段实用便捷的 PHP 代码
PHP 是目前使用最广泛的基于 Web 的编程语言,驱动着数以百万计的网站,其中也包括如 Facebook 等一些大型站点.这里收集了 21 段实用便捷的 PHP 代码摘录,对每种类型的 PHP 开发 ...
实用的JS代码段（表单篇）
整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onloa ...
10款很酷的HTML5动画和实用应用有源码
10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...

随机推荐

JAVA面试题：equals()方法和== 区别
http://bbs.csdn.net/topics/390000725 总结: equals在没重写之前和==一样,重写之后,equals只要内容一样即为true equals跟==一般情况下是等价 ...
web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
http://wenku.baidu.com/link?url=UGoPtZviipHzi5SDIlGx6hPFWAHTPLFXcZ7ieD15JMd81DEHqjehvphVMhqELmOK4qXR74dTT9nW8VBoApBc7Kfb1ZWrNF_i24fY1YRHVki
http://wenku.baidu.com/link?url=UGoPtZviipHzi5SDIlGx6hPFWAHTPLFXcZ7ieD15JMd81DEHqjehvphVMhqELmOK4qXR ...
第一章 CLR的执行模型
编译器将源代码编译为托管模块.托管木块包含: PE32或PE32+头 CLR头元数据 IL(中间语言)代码 PE32头的文件可在32或64位的电脑上运行,PE32+的只能在64上运行.Window6 ...
摄像头(1)拍照的主要API,权限和特性,判断有没有摄像头的方法
支持 Android SDK支持操作Android设备内置的照相机.从Android2.3开始,支持操作多个摄像头(主要指前置摄像头和后置照相机).通过照相机可以拍照和录像. 注意事项是否支持照相机 ...
PL/SQL Developer使用技巧
1.PL/SQL Developer记住登陆密码在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL/SQL ...
Miles per gallon to kilometers per liter
Miles per gallon to kilometers per liter 1 Imperial Gallon = 4.54609188 litres 1 Mile = 1.609344 kil ...
(转载)Web存储和SessionStorage locaStorage
<转> sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在 ...
（转载）有关反演和gcd
tips : 积性函数 F (n) = Π F (piai ) 若F (n), G (n)是积性函数则 F (n) * G (n) Σd | n F (n) 是积性函数 n = Σd | n φ ( ...
LeetCode Balanced Binary Tree (判断平衡树)
题意:如题,平衡树是指任意一个节点(除了叶子),其左子树的高度与右子树的高度相差不超过1. 思路:递归解决,但是提供的函数不满足递归的要求啊,我们至少得知道高度,又得返回真假,所以另开个函数解决. / ...

10段实用的HTML5代码

10段实用的HTML5代码的更多相关文章

随机推荐

热门专题