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

随机推荐

Hacker（15）----嗅探原理
嗅探指窃听网络中流经的数据包,这里的网络一般指用集线器或路由器组建的局域网.通过嗅探并解析数据包,便可知道数据包中的信息,一旦含有账户密码等隐私信息就可能造成个人资金损失. 嗅探数据包无法通过输入命令 ...
前端--关于客户端javascript
浏览器中的Javascript 客户端javascript就是运行在浏览器中的javascript,现代的浏览器已经有了很好的发展,虽然它是一个应用程序,但完全可以把它看作是一个简易的操作系统,因为像 ...
Android 控件 -------- AutoCompleteTextView 动态匹配内容，例如百度搜索提示下拉列表功能
AutoCompleteTextView 支持基本的自动完成功能,适用在各种搜索功能中,并且可以根据自己的需求设置他的默认显示数据.两个控件都可以很灵活的预置匹配的那些数据,并且可以设置输入多少值时开 ...
ado.net数据库操作（2）
5.1使用SQLDataReader进行数据库查询 <%@ Import Namespace="System.Data" %> <%@ Import NameSp ...
PHP学习笔记十五【面向对象二】
<?php class Cat{ //public 访问修饰符 public $name; public $age; } //创建 $cat1=new Cat; $cat1->name=& ...
Biztalk2010安装及配置问题集
在安装Biztalk2010时,碰到很多问题,有的是粗心有的也是比较bt的,如: 1)在win7 64下引入x86 的cab,有点粗心,幸亏给我报错版本不兼容(呵呵): 2)安装的时候不知道为什么计 ...
iPhone6设计自适应布局
http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/ http://www.devtalking.com/articles ...
QT错误：collect2:ld returned 1 exit status
1.编译成功的例子在后台执行,有时一闪而过,如果再次build ,则会提示上述错误. 解决方法:打开任务管理器,找到相应的exe进程,关闭即可: 或者直接关闭QtCreator. 2.没有编译成功的 ...
从C到C++的升级
C++的语言类型 C++是静态的强类型语言. 静态语言:数据类型在编译期间检查,因此在写程序时需要声明变量的类型强类型语言:强调数据类型,不同的数据类型间的转换需要进行强制类型转换 C与C++的关系 ...
Lucene学习总结之二：Lucene的总体架构
Lucene总的来说是: 一个高效的,可扩展的,全文检索库. 全部用Java实现,无须配置. 仅支持纯文本文件的索引(Indexing)和搜索(Search). 不负责由其他格式的文件抽取纯文本文件, ...

Html5 代码

Html5 代码的更多相关文章

随机推荐

热门专题