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, 能 ...

随机推荐

[Spring入门学习笔记][创建网站URL]
设计网站的URL 现代的Web站点都会设计一套拥有明确意义,方便用户记忆的URL,不论是域名还是路径,以天码营为例: http://tianmaying.com/courses表示网站下所有的课程列表 ...
linux中萌翻了的cowsay命令
想要让你的linux萌翻吗? 首先需要安装cowsay软件命令如下:sudo apt-get update;sudo apt-get install cowsay 然后对其输入命令,默认情况下,动物 ...
cherry-pick，revert和rebase使用的3-way合并策略
git中的cherry-pick,revert和rebase都使用的是3-way合并策略,下面就来看看这3个方法使用的merge-base,ours和theirs分别是什么. cherry-pick ...
基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
PyQuery基本操作介绍
PyQuery基本操作介绍 PyQuery为Python提供一个类似于jQuery对HTML的操作方式,可以使用jQuery的语法对html文档进行查询操作. 本文以百度首页为例来介绍PyQuery的 ...
iOS Plist NSUserDefaults 数据存储
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
GUI为什么不设计为多线程（用户事件和底层事件的流程是相反的，每层都加锁效率太低，共用一把锁那就是单线程）
在我们这批新人转正评审的时候,我师父问了我的小伙伴一个问题:为什么一些更新界面的方法只能在主线程中调用?师父没有问我这个问题,让知其然但不知其所以然的我有种侥幸逃过一难的心情.我想如果回答那是因为An ...
HTTP -> Asp.net (第一篇)
当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的ISAPI处理. 流程如下: 1.I ...
认识元数据和IL（上） <第三篇>
说在,开篇之前很早就有说说Metadata(元数据)和IL(中间语言)的想法了,一直在这篇开始才算脚踏实地的对这两个阶级兄弟投去些细关怀,虽然来得没有<第一回:恩怨情仇:is和as>那么 ...
SQL Server - 聚集索引 <第六篇>
聚集索引的叶子页存储的就是表的数据.因此,表行物理上按照聚集索引列排序,因为表数据只能有一种物理顺序,所以一个表只能有一个聚集索引. 当我们创建主键约束时,如果不存在聚集索引并且该索引没有被明确指定为 ...

Html5 代码

Html5 代码的更多相关文章

随机推荐

热门专题