Html5 代码

随着HTML5的流行，许多网站开始介绍HTML5元素和属性的用法，以及各种教程，并且越来越多老的浏览器开始兼容HTML5。

本文作者编译了10段非常实用的HTML5代码片段，开发者可以直接拿过去使用，帮你快速完成HTML5项目的开发工作，你也可以把它们当做一个学习资源，进行参考。

CSS Reset也可以写成Reset CSS，即重设浏览器样式。

/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;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 */

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>

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

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电子邮件正则表达式验证

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

Html5 代码的更多相关文章

html5代码,获取地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
获取地理位置的html5代码
/** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { / ...
极客无极限一行HTML5代码引发的创意大爆炸
摘要:一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器.这件事在分享到Code Wall.Hacker News之后,引起了众 ...
HTML5代码规范
HTML5代码规范html标签里面等号两边不要留空格在IE下可能会识别不了html5等号前后可以使用空格,但仍不推荐使用. HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少.在 ...
在网站制作中随时可用的10个 HTML5 代码片段
HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮 ...
关于HTML5代码总结。
在阅读完HTML5后,自己把一些常用的代码总结了一下,自认为比较全,如果有什么错误请指出. 1.<!DOCTYPE html>声明这是一个HTML5的页面 2.<HTML lang＝ ...
绝对应当收藏的10个实用HTML5代码片段（转）
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
10段实用的HTML5代码
1.HTML5编写的CSS ResetCSS Reset也可以写成Reset CSS,即重设浏览器样式. /* html5doctor.com Reset Stylesheet (Eric Mey ...
!!常用HTML5代码
HTML5提供的新特性 2016-2-16 Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信. Web Storage 定义了一套API, 能 ...

随机推荐

[Python笔记][第四章Python正则表达式]
2016/1/28学习内容第四章 Python字符串与正则表达式之正则表达式正则表达式是字符串处理的有力工具和技术,正则表达式使用预定义的特定模式去匹配一类具有共同特征的字符串,主要用于字符串处理 ...
EasyUI 1.3.1以下的组合验证
适用于EasyUI 1.3.1以下的, 1.3.2已经自带组合验证(如validType:['validator1','validator2']) $.extend($.fn.validatebox. ...
js 分割循环
var str ='1,2,3'; var arr = str.split(","); var array1 =[]; var array2 =[]; for(i=0,l=arr. ...
git 分支的基本操作
git分支的基本操作. 创建私有分支: $git branch branchName commitID $git checkout -b branchName commitID 注意: ...
Unity-视图
Project(项目)视图:显示项目所包含的全部资源,每个Unity项目文件夹都会包含一个Assets文件夹,Assets文件夹是用来存放用户所创建的对象和导入的资源. Hierarchy(层级)视图 ...
C语言enum再学习
通常来说我们使用enum是这样的: enum week{ Mon, Tue, ... Sun }; enum week w; w = Mon; 这里默认Mon~Sun的值为0~6 也可以自己定值 , ...
Eloquent ORM 学习笔记
最近在学习Laravel,觉得ORM功能很强大,我这里只是简单探索了一点,如果有更好的笔记,还请分享. 因为重点在于Eloquent ORM,所以路由设置,控制器就不详细描述了,这里直接进入Model ...
Find them, Catch them(POJ 1703 关系并查集)
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 38668 Accepted: ...
Frogger(最短路)
Frogger(poj2253) Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31854 Accepted: 1026 ...
SQL Server 2008空间数据应用系列六：基于SQLCRL的空间数据可编程性
原文:SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 ...

Html5 代码

Html5 代码的更多相关文章

随机推荐

热门专题